Flutter 組件之表單組件TextField、CheckBox、Radio、Switch

TextField

普通輸入框

TextField(//文本輸入框
  decoration: InputDecoration(//表單定義模塊
      hintText: "請輸入用戶名"//類似html的placeholder
  ),
),

圖標輸入框

TextField(//文本輸入框
  decoration: InputDecoration(//表單定義模塊
      hintText: "圖標輸入框",
      icon: Icon(Icons.people)//表單內的Icon
  ),
),

帶有邊框的本輸入框

TextField(//文本輸入框
	decoration: InputDecoration(//表單定義模塊
	hintText: "帶有邊框的表單",//類似html的placeholder
	border: OutlineInputBorder(),//帶有邊框的輸入框
),

多行文本輸入框

 TextField(//多行文本輸入框
   maxLines: 4,//控制函數,類似html 文本域textarea
   decoration: InputDecoration(//表單定義模塊
       hintText: "請輸入多行文本"//類似html的placeholder
   ),
 ),

密碼輸入框

 TextField(
   obscureText: true,//密碼輸入框屬性
   decoration: InputDecoration(
       labelText: "密碼：", //label文字內容
       hintText: "密碼"//
   ),
 ),

模擬登陸設置獲取輸入框內容

class _PeopleState extends State<People> {
//  表單controller-> TextEditingController()可以配置表單默認顯示內容
  var _username=new TextEditingController();   //初始化的時候給表單賦值
  var _password;//定義類屬性

  @override
  void initState() {//初始化組件name默認賦值
    // TODO: implement initState
    super.initState();
    _username.text='初始值';//初始化數據
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('模擬登陸'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child:TextDemo() ,
          child:Column(
            children: <Widget>[
              TextField(//input文本輸入框
                decoration: InputDecoration(//表單定義模塊
                    hintText: "請輸入用戶名"//類似html的placeholder
                ),
                onChanged: (value){
                  setState(() {//設置獲取文本內容
                    _username.text=value;
                  });
                },
              ),
              SizedBox(height: 20,),
              TextField(
                obscureText: true,//密碼輸入框屬性
                decoration: InputDecoration(
                    hintText: "密碼"//
                ),
                onChanged: (value){//表單改變事件可以獲取vlue值
                  setState(() {
                    this._password=value;//不設置默認值直接就可以賦值
                  });
                },
              ),
              SizedBox(height: 40),
              Container(//登陸按鈕
                width: double.infinity,//無窮大與外層容器,就是自適應的意思
                height: 40,
                child: RaisedButton(
                  child: Text("登錄"),
                  onPressed: (){//點擊獲取文本
                    print(this._username.text);
                    print(this._password);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ) ,
        )
    );
  }
}

Checkbox

class _PeopleState extends State<People> {
  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,
            ),Checkbox(//多選框
              value: this.flag,
              onChanged: (v){
                setState(() {
                  this.flag=v;
                });
              },
              activeColor: Colors.red,
            ),
          ]),
          Row(
            children: <Widget>[
              Text(this.flag?"選中":"未選中")//獲取this.flag的值
            ],
          ),
          SizedBox(height: 40),
           CheckboxListTile(//列表和checkBox結合屬性
              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)
          )
        ],
      ),
    );
  }
}

Radio、Switch

class _PeopleState extends State<People> {
  var flag=true;
  var sex;

  @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){//通過change事件獲取單選框的值
                     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://www.itying.com/images/flutter/1.png'),
              selected: this.sex==2,//通過判斷來選中
            ),
            SizedBox(height: 40),
            Switch(//Switch選框 值是true,false
              value: this.flag,
              onChanged: (v){//同樣change事件來監聽
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

表單Demo

class _PeopleState extends State<People> {
  String username;
  int sex=1;
  String info='';

  List hobby=[
    {
      "checked":true,
      "title":"喫飯"
    },
    {
      "checked":false,
      "title":"睡覺"
    },
    {
      "checked":true,
      "title":"寫代碼"
    }
  ];

  List<Widget> _getHobby(){

    List<Widget> tempList=[];
    for(var i=0;i<this.hobby.length;i++){
      tempList.add(
          Row(
            children: <Widget>[
              Text(this.hobby[i]["title"]+":"),
              Checkbox(
                  value: this.hobby[i]["checked"],
                  onChanged: (value){
                    setState(() {
                      this.hobby[i]["checked"]=value;
                    });
                  }
              )
            ],
          )
      );
    }
    return tempList;
  }

  void _sexChanged(value){
    setState(() {
      this.sex=value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("學員信息登記系統"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                  hintText: "輸入用戶信息"
              ),
              onChanged: (value){
                setState(() {
                  this.username=value;
                });
              },
            ),
            SizedBox(height:10),
            Row(
              children: <Widget>[
                Text("男"),
                Radio(
                    value: 1,
                    onChanged: this._sexChanged,
                    groupValue: this.sex
                ),
                SizedBox(width: 20),
                Text("女"),
                Radio(
                    value: 2,
                    onChanged:this._sexChanged,
                    groupValue: this.sex
                )
              ],
            ),
            //愛好
            SizedBox(height:40),
            Column(
              children: this._getHobby(),
            ),
            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                  hintText: "描述信息",
                  border: OutlineInputBorder()
              ),
              onChanged: (value){
                setState(() {
                  this.info=value;
                });
              },
            ),
            SizedBox(height:40),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text("提交信息"),
                onPressed: (){
                  print(this.sex);
                  print(this.username);
                  print(this.hobby);
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}