您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-18(表单)

2020-04-30【Flutter】879人已围观

简介## 一、Flutter 常用表单介绍 `Flutter` 中常见的表单有 `TextField` 单行文本框，`TextField` 多行文本框、`CheckBox`、`Radio`、`Switch`、`CheckboxListTile`、`RadioListTile`、`SwitchListTile`、`Slide` ## 二、 TextField 文本框组件 **TextField 表单常见属性** 属性 | 描述 ---|--- maxLines | 设置此参数可以

## 一、Flutter 常用表单介绍

`Flutter` 中常见的表单有 `TextField` 单行文本框，`TextField` 多行文本框、`CheckBox`、`Radio`、`Switch`、`CheckboxListTile`、`RadioListTile`、`SwitchListTile`、`Slide`

## 二、 TextField  文本框组件

**TextField  表单常见属性**

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311150953.png)

> demo

```
import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
  FormDemoPage({Key key}) : super(key: key);

_FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  var _username = new TextEditingController();
  var _password;
    @override
    void initState(){
      super.initState();
      this._username.text = "admin";
    }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title:Text('Form Demo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child:Column(
          children: <Widget>[
            TextField(
              decoration:InputDecoration(
                labelText: "用户名",// lable 的名称
                hintText: "请输入用户名",// placeholder
                border:OutlineInputBorder(),// 边框
                icon: Icon(Icons.people),// 图标
              ),
              onChanged: (value){
                setState(() {
                  this._username.text = value;
                });
              },
              controller: this._username,
            ),
            SizedBox(height: 20,),
            Row(
              children: <Widget>[
                Expanded(child: // Row 组件中不能直接使用 TextField 组件
                  TextField(
                    // obscureText: true,// 把文本框框改为密码框
                    maxLines: 2,// 设置此参数可以把文本框改为多行文本框
                    decoration:InputDecoration(
                      labelText: "密码",// lable 的名称
                      hintText: "密码框",// placeholder
                      border:OutlineInputBorder(),// 边框
                      icon: Icon(Icons.fingerprint),// 图标
                    ),
                    onChanged: (value){
                      setState(() {
                        this._password = value;
                      });
                    },
                  ),
                ),
              ],
            ),
            SizedBox(height: 20,),
            Container(
              width: double.infinity,
              child:RaisedButton(
                child: Text('登录',style:TextStyle(color: Colors.white)),
                color: Colors.blue,
                onPressed: () {
                  print('username='+this._username.text+",password="+this._password);
                },
              ),
            )
          ],
        )
      ),
    );
  }
}

```

## 三、 Checkbox、CheckboxListTile 多选框组件

**Checkbox  常见属性：**

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

**CheckboxListTile 常见属性**

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

> Checkbox demo

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311152544.png)

```
Row(
  children: <Widget>[
    Text("记住我"),
    Checkbox(
      value: _remember,
      activeColor:Colors.blue,// 选中颜色
      checkColor:Colors.white,// 勾勾颜色
      onChanged: (v) {
        setState(() {
          this._remember=v;
        });
      },
    ),
  ],
),
```

> CheckboxListTile demo

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311164351.png)

```
CheckboxListTile(
  value: this._remember,
  selected: this._remember,// 文字颜色是否跟着改变
  activeColor: Colors.blue,// 选中的文字颜色，默认 blue
  onChanged: (v){
    setState(() {
      this._remember=v;
    });
  },
  title: Text("前端"),// 标题
  subtitle:Text("HTML、CSS、JAVASCRIPT") ,// 二级标题
),
```

## 四、 Radio 、RadioListTile 单选按钮组件

**Radio 常用属性**

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

**RadioListTile 常用属性**

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

> Radio domo

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311175209.png)

```
Row(
  children: <Widget>[
    Text("前端"),
    Radio(
      groupValue:this._islove,
      value: "前端",
      onChanged:(v){
        setState(() {
          this._islove = v;
        });
      }
    ),
    SizedBox(width: 20,),
    Text("后端"),
    Radio(
      groupValue:this._islove,
      value: "后端",
      onChanged:(v){
        setState(() {
          this._islove = v;
        });
      }
    ),
    SizedBox(width: 20,),
    Text("运维"),
    Radio(
      groupValue:this._islove,
      value: "运维",
      onChanged:(v){
        setState(() {
          this._islove = v;
          print(this._islove);
        });
      }
    ),
  ],
),
```

> RadioListTile domo

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311185839.png)

```
Column(children: <Widget>[
  RadioListTile(
    value: "前端",
    groupValue:this._islove2,
    title:Text("前端"),
    subtitle:Text("HTML、CSS、JS"),
    secondary:Image.network("https://www.itying.com/images/flutter/1.png"),
    onChanged:(v){
      setState(() {
        this._islove2 = v;
      });
    },
  ),
  RadioListTile(
    value: "后端",
    title:Text("后端"),
    subtitle:Text("PHP、GO"),
    groupValue:this._islove2,
    secondary:Icon(Icons.videogame_asset),
    onChanged:(v){
      setState(() {
        this._islove2 = v;
        print(this._islove2);
      });
    },
  ),
],),
```

## 五、 开关 Switch

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

> Switch

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200311190401.png)

```
Row(
  children: <Widget>[
    Text("开"),
    Switch(
      value: this._remember,
      onChanged: (v){
        setState(() {
          this._remember = v;
          print(this._remember);
        });
      },
    ),
    Text("关"),
  ],
),
```

> all Demo

```
import 'package:flutter/material.dart';

class FormDemoPage extends StatefulWidget {
  FormDemoPage({Key key}) : super(key: key);

_FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  var _username = new TextEditingController();
  var _password;
  var _remember = true;
  var _islove;
  var _islove2;

int _groupValue=1;
  _handelChange(v){
    setState(() {
      _groupValue=v;
    });
  }
    @override
    void initState(){
      super.initState();
      this._username.text = "admin";
    }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title:Text('Form Demo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child:Column(
          children: <Widget>[
            TextField(
              decoration:InputDecoration(
                labelText: "用户名",// lable 的名称
                hintText: "请输入用户名",// placeholder
                border:OutlineInputBorder(),// 边框
                icon: Icon(Icons.people),// 图标
              ),
              onChanged: (value){
                setState(() {
                  this._username.text = value;
                });
              },
              controller: this._username,
            ),
            SizedBox(height: 20,),
            Row(
              children: <Widget>[
                Expanded(child: // Row 组件中不能直接使用 TextField 组件
                  TextField(
                    // obscureText: true,// 把文本框框改为密码框
                    maxLines: 2,// 设置此参数可以把文本框改为多行文本框
                    decoration:InputDecoration(
                      labelText: "密码",// lable 的名称
                      hintText: "密码框",// placeholder
                      border:OutlineInputBorder(),// 边框
                      icon: Icon(Icons.fingerprint),// 图标
                    ),
                    onChanged: (value){
                      setState(() {
                        this._password = value;
                      });
                    },
                  ),
                ),
              ],
            ),
            SizedBox(height: 20,),
            Row(
              children: <Widget>[
                Text("记住我"),
                Checkbox(
                  value: _remember,
                  activeColor:Colors.blue,// 选中颜色
                  checkColor:Colors.white,// 勾勾颜色
                  onChanged: (v) {
                    setState(() {
                      this._remember=v;
                    });
                  },
                ),
              ],
            ),
            SizedBox(height: 20,),
            CheckboxListTile(
              value: this._remember,
              selected: this._remember,// 文字颜色是否跟着改变
              activeColor: Colors.blue,// 选中的文字颜色，默认 blue
              onChanged: (v){
                setState(() {
                  this._remember=v;
                });
              },
              title: Text("前端"),// 标题
              subtitle:Text("HTML、CSS、JAVASCRIPT") ,// 二级标题
            ),
            SizedBox(height: 20,),
            Row(
              children: <Widget>[
                Text("前端"),
                Radio(
                  groupValue:this._islove,
                  value: "前端",
                  onChanged:(v){
                    setState(() {
                      this._islove = v;
                    });
                  }
                ),
                SizedBox(width: 20,),
                Text("后端"),
                Radio(
                  groupValue:this._islove,
                  value: "后端",
                  onChanged:(v){
                    setState(() {
                      this._islove = v;
                    });
                  }
                ),
                SizedBox(width: 20,),
                Text("运维"),
                Radio(
                  groupValue:this._islove,
                  value: "运维",
                  onChanged:(v){
                    setState(() {
                      this._islove = v;
                      print(this._islove);
                    });
                  }
                ),
              ],
            ),
            Column(children: <Widget>[
              RadioListTile(
                value: "前端",
                groupValue:this._islove2,
                title:Text("前端"),
                subtitle:Text("HTML、CSS、JS"),
                secondary:Image.network("https://www.itying.com/images/flutter/1.png"),
                onChanged:(v){
                  setState(() {
                    this._islove2 = v;
                  });
                },
              ),
              RadioListTile(
                value: "后端",
                title:Text("后端"),
                subtitle:Text("PHP、GO"),
                groupValue:this._islove2,
                secondary:Icon(Icons.videogame_asset),
                onChanged:(v){
                  setState(() {
                    this._islove2 = v;
                    print(this._islove2);
                  });
                },
              ),
            ],),
            Row(
              children: <Widget>[
                Text("开"),
                Switch(
                  value: this._remember,
                  onChanged: (v){
                    setState(() {
                      this._remember = v;
                      print(this._remember);
                    });
                  },
                ),
                Text("关"),
              ],
            ),
            SizedBox(height: 20,),
            Container(
              width: double.infinity,
              child:RaisedButton(
                child: Text('登录',style:TextStyle(color: Colors.white)),
                color: Colors.blue,
                onPressed: () {
                  print('username='+this._username.text+",password="+this._password);
                },
              ),
            )
          ],
        )
      ),
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-17(按钮组件、自定义按钮组件、FloatingActionButton)

下一篇：flutter-19(icon)