Flutter控制元件--Radio和RadioListTile

flutter控制元件練習demo地址：github

一。Radio (單選框)

flutter 中的單選框 ， 和 Checkbox 一樣 本身沒有狀態，必須父親有狀態 才能改變值

1.1 屬性

• value： 此 Radio 的 value 值
• onChanged： 當選擇此 radio 的時候 的回撥。 引數就是 此 value 的值
• groupValue： 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設定為 不選中
• activeColor： 選中的顏色

二、RadioListTile(dan)

2.1 屬性

• value： 此 Radio 的 value 值
• onChanged： 當選擇此 radio 的時候 的回撥。 引數就是 此 value 的值
• groupValue： 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設定為 不選中
• activeColor： 選中的顏色
• title： 標題， 具有代表性的就是 Text
• subtitle： 副標題（在 title 下面）， 具有代表性的就是 Text
• isThreeLine = false：// 是否是三行文字
  • true ： 副標題 不能為 null
  • false：如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行
• dense： 是否密集垂直
• secondary： 左邊的一個控制元件
• selected = false： text 和 icon 的 color 是否 是 activeColor 的顏色
• controlAffinity = ListTileControlAffinity.platform：
  • ListTileControlAffinity.platform 根據不同的平臺，來顯示 對話方塊 的位置
  • ListTileControlAffinity.trailing：勾選在右，title 在中，secondary 在左
  • ListTileControlAffinity.leading ：勾選在左，title 在中，secondary 在右

1.2 demo圖片

1.3 程式碼

注意點 RadioListTile 的父控制元件 不能選擇Row （暫時不知道為什麼），demo中選的是 Column

import 'package:flutter/material.dart';

class RadioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio 和 Radio RadioListTile "),
        centerTitle: true,
      ),
      body: RadioStateDemo(),
    );
  }
}

class RadioStateDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return RadioSDemo();
  }
}

class RadioSDemo extends State<RadioStateDemo> {
  String groupValue;
  String valueLiu;
  String valueZhang;
  String valueGuo;
  String valueLi;

  @override
  void initState() {
    super.initState();
    groupValue = "劉德華";
    valueLiu = "劉德華";
    valueZhang = "張學友";
    valueGuo = "郭富城";
    valueLi = "黎明";
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 20,
        ),
        Text(
          "一：Radio",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Radio<String>(
              // 此 Radio 的 value 值
              value: valueLiu,
              // 當選擇此 radio 的時候 的回撥。 引數就是 此 value 的值
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              // 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設定為 不選中
              groupValue: groupValue,
              // 選中的顏色
              activeColor: Colors.red,
              // 響應手勢的大小 ， 預設是 48 * 48
              // MaterialTapTargetSize.shrinkWrap 水波紋 在中間
              // MaterialTapTargetSize.padded  水波紋 靠左上
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueZhang,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueGuo,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueLi,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
          ],
        ),
        SizedBox(
          height: 40,
        ),
        Text(
          "二：RadioListTile",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        // 不知道 為什麼 Row 父佈局 不行（暫時不知道why）
        Column(
//          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RadioListTile<String>(
              title: Text(valueLiu),
              // 必須要的屬性
              value: valueLiu,
              //是否選中發生變化時的回撥， 回撥的 bool 值 就是是否選中 , true 是 選中
              groupValue: groupValue,
              onChanged: _changed,
              // 選中時 填充的顏色
              activeColor: Colors.red,
              // 標題， 具有代表性的就是 Text ，
              //        selected 如果是 true ：
              //         如果 不設定 text 的 color 的話， text的顏色 跟隨 activeColor
              // 副標題（在 title 下面）， 具有代表性的就是 Text ， 如果 不設定 text 的 color 的話， text的顏色 跟隨 activeColor
              subtitle: Text("副標題"),
              // 是否是三行文字
              //        如果是 true ： 副標題 不能為 null
              //        如果是 false：
              //                      如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行
              isThreeLine: false,
              // 是否密集垂直
              dense: false,
              // 左邊的一個控制元件
//              secondary: Text("secondary"),
              // text 和 icon 的 color 是否 是 activeColor 的顏色
              selected: true,
              controlAffinity: ListTileControlAffinity.leading,
            ),
            RadioListTile<String>(
                title: Text(valueZhang),
                value: valueZhang,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile<String>(
                title: Text(valueGuo),
                value: valueGuo,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile<String>(
                title: Text(valueLi),
                value: valueLi,
                groupValue: groupValue,
                onChanged: _changed),
          ],
        )
      ],
    );
  }

  void _changed(value) {
    groupValue = value;
    setState(() {});
  }
}

複製程式碼