Flutter之表單組件

目錄

一、Flutter 常用表單介紹

二、TextField 文本框組件 TextField 表單常見屬性:

三、Checkbox、CheckboxListTile 多選框組件 Checkbox 常見屬性:

四、Radio、RadioListTile 單選按鈕組件 Radio 常用屬性:

五、開關 Switch

---

一、Flutter 常用表單介紹

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

CheckboxListTile、RadioListTile、SwitchListTile、Slide.

二、TextField 文本框組件 TextField 表單常見屬性:

屬性	描述
maxLines	設置此參數可以把文本框改爲多行文本框
onChanged	文本框改變的時候觸發的事件
decoration	hintText border labelText labelStyle 類似 html 中的 placeholder 配置文本框邊框 OutlineInputBorder 配合使用 lable 的名稱 配置 lable 的樣式
obscureText	把文本框框改爲密碼框
controller	controller 結合 TextEditingController()可以配置表單默認顯示的內容

三、Checkbox、CheckboxListTile 多選框組件 Checkbox 常見屬性:

屬性	描述
value	true 或者 false
onChanged	改變的時候觸發的事件
activeColor	選中的顏色、背景顏色

checkColor 選中的顏色、Checkbox 裏面對號的顏色

CheckboxListTile 常見屬性:

屬性	描述
value	true 或者 false
onChanged	改變的時候觸發的事件
activeColor	選中的顏色、背景顏色
title	標題
subtitle	二級標題
secondary	配置圖標或者圖片
selected	選中的時候文字顏色是否跟着改變

四、Radio、RadioListTile 單選按鈕組件 Radio 常用屬性:

RadioListTile 常用屬性:

屬性	描述
value	單選的值
onChanged	改變時觸發
activeColor	選中的顏色、背景顏色
groupValue	選擇組的值

屬性	描述
value	true 或者 false
onChanged	改變的時候觸發的事件
activeColor	選中的顏色、背景顏色
title	標題
subtitle	二級標題
secondary	配置圖標或者圖片
groupValue	選擇組的值

 

五、開關 Switch

)

groupValue:_groupValue , onChanged: _handelChange,

屬性	描述
value	單選的值
onChanged	改變時觸發
activeColor

 

 

import 'package:flutter/material.dart';

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

  @override
  _RegisterPageState createState() {
    return _RegisterPageState();
  }
}

class _RegisterPageState extends State<RegisterPage> {
  var name;
  int sex = 0;
  var result='';

  //自定義改變性別的方法
  void _sexChanged(value) {
    setState(() {
      sex = value;
    });
  }

  //自定義裝填多選框組件
  List hobby = [
    {"value": false, "title": "喫飯"},
    {"value": false, "title": "睡覺"},
    {"value": false, "title": "打豆豆"},
  ];

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

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @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: (userName) {
                  setState(() {
                    name = userName;
                  });
                },
              ),
              Row(
                children: <Widget>[
                  Text("男"),
                  Radio(value: 0, groupValue: sex, onChanged: _sexChanged),
                  SizedBox(
                    width: 20,
                  ),
                  Text("女"),
                  Radio(value: 1, groupValue: sex, onChanged: _sexChanged),
                ],
              ),
              Column(
                children: _getHobby(),
              ),
              Container(
                width: double.infinity,
                padding: EdgeInsets.all(10),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: RaisedButton(
                        child: Text("點擊註冊"),
                        onPressed: () {
                          String sexName = sex == 0 ? "男" : "女";
                         setState(() {
                           result = "註冊姓名是 $name" + " 性別是 $sexName";
                         });
                          print("愛好是:"+hobby.toString());
                          print(result);
                        },
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Expanded(
                      child: RaisedButton(
                        child: Text("去登錄"),
                        onPressed: () {},
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                width: double.infinity,
                child: Text(result==null?"":result,style: TextStyle(color: Colors.red,fontSize: 20),),
              )
            ],
          ),
        ));
  }
}