Flutter 【表单】

---

在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop

TextField 文本框组件

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

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

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、CheckboxListTile 多选框组件

Checkbox 常见属性：

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

CheckboxListTile 常见属性：

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

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

CheckboxListTile( 
  value: _isSelected, 
  title: Text("111111"), 
  subtitle: Text("222"), 
  onChanged: (v){ 
    setState(() { this._isSelected=v; }); 
  },
  activeColor: Colors.red,
  secondary: Image.network("baidu.com"), 
  selected:_isSelected
)

// 例子
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),

            // CheckboxListTile(
            //    value: this.flag,
            //     onChanged: (v){
            //       setState(() {
            //          this.flag=v;
            //       });
            //     },
            //     title: Text("标题"),
            //     subtitle:Text("这是二级标题") ,
            // ),
            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	选择组的值

RadioListTile 常用属性：

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

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('baidu.com'),
               selected: this.sex==2,
           ),
           SizedBox(height: 40),

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

开关 Switch

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