在Flutter中,可以使用TextField组件来创建文本字段。要添加一个“取消选择”按钮,可以使用TextEditingController来控制文本字段的值,并在按钮按下时清空文本字段的内容。
下面是一个示例代码:
import 'package:flutter/material.dart';
class MyTextField extends StatefulWidget {
@override
_MyTextFieldState createState() => _MyTextFieldState();
}
class _MyTextFieldState extends State<MyTextField> {
TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _clearText() {
setState(() {
_controller.clear();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField示例'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: '文本字段',
),
),
SizedBox(height: 16.0),
RaisedButton(
onPressed: _clearText,
child: Text('取消选择'),
),
],
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyTextField(),
));
}
在上面的示例中,我们创建了一个MyTextField小部件,它包含一个TextField和一个RaisedButton。TextField使用TextEditingController来控制文本字段的值,RaisedButton的onPressed回调函数_clearText会在按钮按下时清空文本字段的内容。
这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。关于Flutter的更多信息,你可以参考腾讯云的Flutter开发文档:Flutter开发文档。
领取专属 10元无门槛券
手把手带您无忧上云