Flutter 20 - 表单组件详解

一、常用表单介绍

Flutter 中常见的表单有

1. TextField 单行文本框，
2. TextField 多行文本框
3. CheckBox
4. Radio
5. Switch CheckboxListTile
6. RadioListTile
7. SwitchListTile
8. Slide

二、TextField 文本框组件

常见属性

属性	描述
maxLines	设置此参数可以把文本框改为多行文本框
onChanged	文本框改变的时候触发的事件
decoration	hintText border labelText labelStyle 类似 html 中的 placeholder 配置文本框边框 OutlineInputBorder 配合使用 lable 的名称 配置 lable 的样式
obscureText	把文本框框改为密码框
controller	controller 结合 TextEditingController()可以配置表单默认显示的内容

示例1

TextField(
    maxLines: 10,
    // obscureText: true, 
    decoration: InputDecoration(
        hintText: "密码框",
        border: OutlineInputBorder()
    )
)

示例2

String _username = TextEditingController();

void initState() {
    // TODO: implement initState 
    super.initState();
    _username.text = '这是文本框初始值';
} 

TextField(
    controller: _username,
    onChanged: (value){
        // print(value);
        setState(() {
            this._username.text=value;
        });
    },
    decoration: InputDecoration(
        hintText: "请输入您的内容", 
    ),
)

三、Checkbox 单选框组件

常见属性

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

示例1

Checkbox(
    value: _isSelected,
    onChanged: (v) {
        // print(v);
        setState(() {
            this._isSelected = v;
        });
    },
    activeColor: Colors.red,
    checkColor:Colors.blue
)

四、CheckboxListTile 多选框组件

常见属性

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

示例

CheckboxListTile(
    value: _isSelected,
    title: Text("Flutter开发指南"),
    subtitle: Text("CheckboxListTile 多选框组件"),
    onChanged: (v){
        setState(() {
            this._isSelected = v;
        });
    },
    activeColor: Colors.red,
    secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
    selected: _isSelected
)

五、Radio 单选按钮组件

常用属性

属性	描述
value	单选的值
onChanged	改变时触发
activeColor	选中的颜色、背景颜色
groupValue	选择组的值

示例

int _groupValue = 1;

Radio(
    value: 0,
    onChanged: (v) {
        setState(() {
            this._groupValue = v;
        });
    },
    activeColor: Colors.red,
    groupValue: _groupValue
), 
Radio(  
    value: 1,
    onChanged: (v) {
        setState(() {
            this._groupValue = v;
        });
    },
    activeColor: Colors.red,
    groupValue:_groupValue
)

六、RadioListTile 多选按钮组件

常用属性

属性	描述
value	true 或者 false
onChanged	改变的时候触发的事件
activeColor	选中的颜色、背景颜色
title	标题
subtitle	二级标题
secondary	配置图标或者图片
groupValue	选择组的值

示例

int _groupValue = 1;

_handelChange(v) {
    setState(() {
        _groupValue=v;
    });
}

RadioListTile(
    value: 1,
    title: Text("Flutter开发指南"),
    subtitle: Text("RadioListTile 多选按钮组件"),
    secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
    groupValue: _groupValue,
    onChanged: _handelChange
),
Divider(),
RadioListTile(
    value: 0,
    title: Container(
        height: 60,
        child: Text('这是文本'),
        color: Colors.red
    ),
    // subtitle: Text("RadioListTile 多选按钮组件"),
    secondary: Image.network("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png"),
    groupValue: _groupValue,
    onChanged: _handelChange
）

六、Switch 开关组件

常用属性

属性	描述
value	单选的值
onChanged	改变时触发
activeColor	选中的颜色、背景颜色