15Flutter 基础 Widget —— 输入框和表单.pdfVIP

Flutter 基础 Widget —— 输⼊ 框和表单 本节讲 Flutter 输⼊框及表单的使⽤。 输⼊框 在 Flutter 中，输⼊框的 Widget 为： TextField (https://docs.flutter.io/flutter/material/TextField- class.html) TextField (https://docs.flutter.io/flutter/material/Te class.html) TextField 是⽂本输⼊框。 代码所在位置 flutter_widget_demo/lib/textfield/TextFieldWidget.dart TextFiled 的快速上⼿ TextFile 的最简单使⽤⽅式就是使⽤⽆参构造函数 ⼀个 TextFiled 对象： TextField(); TextField 到⼀个⻚⾯的完整 Demo 代码如下： import package:flutter/material.dart; void main() = runApp(TextField idget()); class TextField idget extends Stateless idget { @override idget build(BuildContext context) { return MaterialApp( title: Flutter Demo, theme: ThemeData( primaryColor: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text(Flutter UI基 础 idget -- ⽂本)), body : TextField()), ); } } 运⾏效果为： 可以在⽂本框⾥输⼊⽂字。 获取 TextField 的内容 因为是输⼊框，所以需要获取输⼊的内容，TextField 获取输⼊内容 有两种⽅式： . onChanged 2. TextEditingController onChanged 当⽤户输⼊，TextField 的内容发⽣变化，TextField 就会调⽤它的 onChanged 回调。 因此 onChanged 可以实时查看 TextField 的 内容变化。 使⽤代码如下： TextField( onChanged: (String data) { //实时获取 print(data); }, ) TextEditingController TextEditingController 是 TextField 的控制类，可以控制 TextField 的编辑，是 TextField 的 controller 属性，我们可以为 TextField 赋值⾃⼰创建的 TextEditingController 对象来控制 TextField。 使⽤代码如下： class TextField idget extends Stateless idget { final TextEditingController _controller = TextEditingController(); @override idget build(BuildContext context) { return ... TextField( controller: _controller, ), ... ); } } 然后使⽤ _controller.text 来访问 TextField ⾥的内容。 TextField 的构造函数及参数说明 TextField 的构造函数为： class TextField extends Stateful idget { const TextField({ Key key, this.controller, this.focusNode, this.decoration = const InputDecoration(), TextInputType keyboardType, t