24Flutter中常見的表單有TextField單行文本框，TextField多行文本框、CheckBox、Radio、Switch

一、Flutter常用表單介紹：

CheckboxListTile、RadioListTile、SwitchListTile、Slide。

二、TextField:表單常見屬性：

maxLines:設置此參數可以把文本框改為多行文本框

onChanged:文本框改變的時候觸發的事件。

decoration:

hintText:類似html中的placeholder

border:配置文本框邊框

OutlineInputBorder：配合使用

labelText:lable的名稱

labelStyle:配置label的樣式

obscureText:把文本框改為密碼框

controller:controller結合TextEditingController()可以配置表單默認顯示的內容。

三、Checkbox、CheckboxListTile多選框組件：

Checkbox常見屬性：

value:true或者false

onChanged改變的時候觸發的事件。

activeColor:選中的顏色、背景顏色

checkColor:選中的顏色、Checkbox里面對號的顏色。

CheckboxListTile常見屬性：

value:true或者false

onChanged:改變的時候觸發的事件。

activeColor:選中的顏色、背景顏色

title:標題

subtitle:二級標題。

secondary:配置圖標或者圖片。

selected:選中的時候文字顏色是否跟着改變。

TextField.dart

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(){
    super.initState();
    _username.text="初始值";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表單演示頁面'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            // TextField(),
            // SizedBox(height: 20),
            // TextField(
            //   decoration: InputDecoration(
            //     hintText: "請輸入搜索的內容",
            //     border: OutlineInputBorder()
            //   ),
            // ),
            // SizedBox(height: 20),
            // TextField(  //設置為多行文本框：
            //   maxLines: 4,
            //   decoration: InputDecoration(
            //     hintText: "多行文本框",
            //     border: OutlineInputBorder()
            //   ),
            // ),
            // SizedBox(height: 20),
            // TextField(
            //   obscureText: true, //把文本框修改成密碼框：
            //   decoration: InputDecoration(
            //     hintText: "密碼框",
            //     border: OutlineInputBorder()
            //   ),
            // ),
            // SizedBox(height: 20),
            // TextField(
            //   obscureText: true,
            //   decoration: InputDecoration(
            //     hintText: "labelText使用",
            //     border: OutlineInputBorder(),
            //     labelText: "用戶名"
            //   ),
            // ),
            TextDemo(),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                  hintText: "labelText使用",
                  border: OutlineInputBorder(),
                  labelText: "密碼"),
                  onChanged: (value){
                    setState(() {
                      this._password=value;
                    });
                  },
            ),
            TextField(
              decoration:
                  InputDecoration(icon: Icon(Icons.search), hintText: "請輸入用戶名"),
                  controller: _username,
                  onChanged: (value){
                    setState(() {
                      _username.text=value;
                    });
                  },
            ),
            Container(
              width: double.infinity,
              height: 40,
              child: RaisedButton(
                child: Text("登錄"),
                onPressed: (){
                  print(this._username.text);
                  print(this._password);
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        decoration:
            InputDecoration(icon: Icon(Icons.people), hintText: "請輸入用戶名"),
      ),
    );
  }
}

CheckBox.dart

import 'package:flutter/material.dart';
class CheckBoxDemoPage extends StatefulWidget {
  CheckBoxDemoPage({Key key}) : super(key: key);

  _CheckBoxDemoPageState createState() => _CheckBoxDemoPageState();
}
// CheckBox
class _CheckBoxDemoPageState extends State<CheckBoxDemoPage> {
  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('這是一個二級標題'),
            secondary: Icon(Icons.help),
          )
        ],
      )
    );
  }
}