flutter控件練習demo地址:githubgit
flutter 中的單選框 , 和 Checkbox 同樣 自己沒有狀態,必須父親有狀態 才能改變值github
注意點 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(() {});
}
}
複製代碼