import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Input Example'),
),
body: Center(
child: TextInputWidget(),
),
),
);
}
}
class TextInputWidget extends StatefulWidget {
@override
_TextInputWidgetState createState() => _TextInputWidgetState();
}
class _TextInputWidgetState extends State<TextInputWidget> {
TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Enter your text',
),
),
SizedBox(height: 16.0),
ElevatedButton(
onPressed: () {
// 获取文本框中的文本
String enteredText = _controller.text;
// 在控制台输出输入的文本
print('Entered text: $enteredText');
},
child: Text('Submit'),
),
],
),
);
}
@override
void dispose() {
// 在组件销毁时释放控制器
_controller.dispose();
super.dispose();
}
}
在这个例子中,我们创建了一个 TextInputWidget 组件,其中包含一个带有标签的文本输入框 (TextField) 和一个提交按钮 (ElevatedButton)。通过使用 TextEditingController,我们能够获取文本输入框中的文本内容,并在按钮被按下时处理它。
这只是一个基本的例子,你可以根据需要进行定制,例如添加输入验证、密码框、多行文本框等。
转载请注明出处:http://www.pingtaimeng.com/article/detail/9600/Flutter