Flutter控件--Radio和RadioListTile

flutter控件練習demo地址githubgit

一。Radio (單選框)

flutter 中的單選框 , 和 Checkbox 同樣 自己沒有狀態,必須父親有狀態 才能改變值github

1.1 屬性

  • value: 此 Radio 的 value 值
  • onChanged: 當選擇此 radio 的時候 的回調。 參數就是 此 value 的值
  • groupValue: 若是 Radio 的 value 和 groupValue 同樣 就 是此 Radio 選中 其餘 設置爲 不選中
  • activeColor: 選中的顏色

2、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中選的是 Columnbash

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(() {});
  }
}

複製代碼
相關文章
相關標籤/搜索