17.Flutter学习之路常用表单TextField、CheckBox等组件

TextField常见属性：

属性	描述
maxLines	将文本框改为多行文本框，默认是单行
onChanged	文本框改变的时候触发的时间
decoration	hintText类似于EditText中hint属性。border 边框线，配合OutlineInputBorder使用、labelText:label的名称、labelStyle，配置label使用
obscureText	j将文本框改为密码框
controller	controller结合TextEditingController ()可以配置表单默认显示的内容

class TextFieldPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TextFieldPageState();
  }

}

class _TextFieldPageState extends State<TextFieldPage> {

  var _message=TextEditingController() ;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _message.text='初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TextFieldDemo'),),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(),
            SizedBox(height: 20,),
            TextField(
              decoration: InputDecoration(
                  hintText: '请输入内容',
                  border: OutlineInputBorder(),
              ),

            ),
            SizedBox(height: 20,),
            TextField(
              maxLines: 3,
              decoration: InputDecoration(
                hintText: '多行文本框',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '密码框',
                border: OutlineInputBorder(

                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名',
                labelText: '用户名',
                border: OutlineInputBorder(

                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              decoration: InputDecoration(
                hintText: '请输入用户名',
                icon: Icon(Icons.account_circle),
                border: OutlineInputBorder(
                ),
              ),
            ),
            SizedBox(height: 20,),
            TextField(
              controller:_message,
              decoration: InputDecoration(
                hintText: '获取表单内容',
                labelText: '获取表单内容',
                icon: Icon(Icons.account_circle),
                border: OutlineInputBorder(
                ),
              ),
            ),
            SizedBox(height: 20,),
            RaisedButton(
              child: Text('获取上面文本框的内容'),
              onPressed: (){
                print('${_message.text}');
              },
            )
          ],
        ),
      ),
    );
  }
}

Checkbox但选

Checkbox常见属性

属性	描述
value	true或者false
onChange	改变的时候触发的事件
activeColor	选中的颜色、背景颜色
checkColor	选中的颜色、CheckBox里面对号的颜色

CheckboxListTile多选框组件

属性	描述
value	true或者false
onChange	改变的时候触发的事件
activeColor	选中的颜色、背景颜色
title	标题
subtitle	二级标题
secondary	配置图标或者图片
selected	选中的时候文字颜色是否跟着改变