25.Flutter中的表單 Radio RadioListTile Switch SwitchListTile 以及表單組件實現一個簡單的學員登記系統(下)

四、Radio、RadioListTile單選按鈕組件

Radio常用屬性：

value單選的值。

onChanged改變時觸發。

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

groupValue:選擇組的值。

RadioListTile：常用屬性：

value:true或者false

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

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

title:標題

subtitle:二級標題

secondary:配置圖標或者圖片

groupValue:選擇租的值。

五、開關Switch

 

Radio:

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

  _RadioDemoPageState createState() => _RadioDemoPageState();
}

class _RadioDemoPageState extends State<RadioDemoPage> {
  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>[
                //groupValue:一樣表示是同一個按鈕組：
                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),
            ),
            RadioListTile(
              value: 2,
              onChanged: (v){
                setState(() {
                  this.sex=v;
                });
              },
              groupValue: this.sex,
              title: Text('標題'),
              subtitle: Text('二級標題'),
              secondary: Icon(Icons.help),
            ),
            SizedBox(height: 40),
            Switch(
              value:this.flag,
              onChanged: (v){
                setState(() {
                  print(v);
                  this.flag=v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

FormDemo.dart

import 'package:flutter/material.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  String username;
  int sex = 1;
  String info;
  List hobby = [
    {"checked": true, "title": "吃飯"},
    {"checked": true, "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 Container(
      child: 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;
                  });
                },
              ),
              Row(
                children: <Widget>[
                  Text("男"),
                  Radio(
                    value: 1,
                    onChanged: this._sexChanged,
                    groupValue: this.sex,
                  ),
                  Text("女"),
                  Radio(
                    value: 2,
                    onChanged: this._sexChanged,
                    groupValue: this.sex,
                  )
                ],
              ),
              //愛好：
              Column(
                children: this._getHobby(),
              ),
              TextField(
                maxLines: 4,
                decoration: InputDecoration(
                  hintText: "描述信息",
                  border: OutlineInputBorder()
                ),
                onChanged: (value){
                  setState(() {
                    this.info=value;
                  });
                },
              ),
              SizedBox(height: 20),
              Container(
                width: double.infinity,
                height: 40,
                child: RaisedButton(
                  child: Text("登錄"),
                  onPressed: () {
                    print(this.sex);
                    print(this.username);
                    print(this.hobby);
                    print(this.info);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}