Flutter--表单

TextField

属性	释义
maxLines	多行文本框
onChanged	监听文本框中的文字改变
decoration	hintText, border, labelText, labelStyle
obscureText	把文本框改为密码框
controller	结合TextEditingController()可以配置表单默认显示内容

import 'package:flutter/material.dart';
class TextFieldDemoPage extends StatefulWidget {
  TextFieldDemoPage({Key key}) : super(key: key);
  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}


class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  var _username=new TextEditingController();   //初始化的时候给表单赋值
  var _password;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _username.text='初始值';
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('表单演示页面'),
        ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: "请输入用户名"
              ),
              controller: _username,
              onChanged: (value){
                setState(() {
                  _username.text = value;
                });
              },
            ),
            SizedBox(height: 10,),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: "请输入密码"
              ),
              onChanged: (value) {
                setState(() {
                  _password = value;
                });
              },
            ),
            SizedBox(height: 10,),
            Container(
              width: double.infinity, // 相当于match_parent
              height: 40,
              child: RaisedButton(
                child: Text("登录"),
                onPressed: () {
                  print(this._username.text);
                  print(this._password);
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Checkbox, CheckboxListTile多选框组件

Checkbox属性

属性	释义
value	true或者false
onChanged	状态改变监听
activeColor	选中的颜色、背景颜色
checkColor	选中的颜色、Checkbox填充颜色

CheckboxListTile属性

属性	释义
value	true或者false
onChanged	监听触发事件
activeColor	选中的颜色和背景
title	标题
subtitle	二级标题
secondary	配置图标或者图片
selected	选中的时候文字是否跟随着改变

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}
class _CheckBoxDemoState extends State<CheckBoxDemo> {
  var flag=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("checkbox"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(children: <Widget>[
            Checkbox(
              value: this.flag,
              onChanged: (v){
                setState(() {
                  this.flag=v;
                });
              },
              activeColor: Colors.red,
            )
          ]),
          Row(
            children: <Widget>[
              Text(this.flag?"选中":"未选中")
            ],
          ),
          SizedBox(height: 40),
          
          Divider(),
          CheckboxListTile(
            value: this.flag,
            onChanged: (v){
              setState(() {
                this.flag=v;
              });
            },
            title: Text("标题"),
            subtitle:Text("这是二级标题") ,
            secondary:Icon(Icons.help),
            selected: this.flag,
          )
        ],
      ),
    );
  }
}

Radio、RadioListTile单选按钮组件

Radio属性

属性	释义
value	单选的值
onChanged	改变时触发
activeColor	选中的颜色和背景
groupValue	选择组的值,相同的值为一个组，value值和groupValue值相等处于选中状态

RadioListTile属性

属性	释义
value	true或者false
onChanged	监听触发事件
activeColor	选中的颜色和背景
title	标题
subtitle	二级标题
secondary	配置图标或者图片
groupValue	选择组的值,相同的值为一个组

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  RadioDemo({Key key}) : super(key: key);
  _RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  int sex=1;
  bool flag=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[


             Row(
               children: <Widget>[
                 Text("男:"),
                 Radio(
                   value:1,
                   onChanged: (v){
                     setState(() {
                        this.sex=v;
                     });
                   },
                   groupValue:this.sex ,
                 ),
                 SizedBox(width: 20),
                 Text("女:"),
                 Radio(
                   value:2,
                   onChanged: (v){
                     setState(() {
                        this.sex=v;
                     });
                   },
                   groupValue:this.sex ,
                 )
               ],
             ),
             Row(
               children: <Widget>[
                 Text("${this.sex}"),
                 Text(this.sex==1?"男":"女")
               ],
             ),
            SizedBox(height: 40),
            RadioListTile(
              value:1,
              onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              },
              groupValue:this.sex ,
              title: Text("标题"),
              subtitle:Text("这是二级标题") ,
              secondary:Icon(Icons.help),
              selected: this.sex==1,
            ),
            RadioListTile(
              value:2,
              onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              },
              groupValue:this.sex ,
              title: Text("标题"),
              subtitle:Text("这是二级标题") ,
              secondary:Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143'),
              selected: this.sex==2, // 选中文字高亮
            ),
            SizedBox(height: 40),


            Switch(
              value: this.flag,
              onChanged: (v){
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}