Flutter⼊门(30):Flutter组件之Radio详解
1. 基本介绍
Radio 是⼀个常见的单选框。
2. ⽰例代码
代码下载地址。如果对你有帮助的话记得给个关注,代码会根据我的 Flutter 专题不断更新。
3. Radio 属性介绍
Radio属性介绍
value@required 是否选中
groupValue@required
onChanged@required 点击事件
mouseCursor⿏标光标
toggleable
activeColor选中时填充颜⾊
focusColor聚焦颜⾊
hoverColor悬停颜⾊
materialTapTargetSize内边距,默认最⼩点击区域为 48 * 48,MaterialTapTargetSize.shrinkWrap 为组件实际⼤⼩visualDensity布局紧凑设置
focusNode焦点控制,Flutter 组件之 FocusNode 详解
autofocus⾃动聚焦,默认为 false
4. Radio 详解
4.1 容器创建
@override
FMRadioState createState() => FMRadioState(); }
class FMRadioState extends State <FMRadioVC>{ List <FMRadioModel> _datas = [];
int groupValue = 1;
@override
void initState() {
// TODO: implement initState
super.initState();
initData();
}
void initData(){
_datas.add(FMRadioModel(1, "游戏"));
_datas.add(FMRadioModel(2, "社交"));
_datas.add(FMRadioModel(3, "购物"));
_datas.add(FMRadioModel(4, "娱乐"));
_datas.add(FMRadioModel(5, "影视"));
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("CheckBox"),
),
body: ListView.builder(
itemCount: _datas.length,
itemBuilder: (context, index){
FMRadioModel model = _datas[index];
return _buildRow(model);
}
),
bottomSheet: _bottomSheet(),
);
}
BottomSheet _bottomSheet(){
return BottomSheet(
onClosing: (){},
builder: (BuildContext context){
return Container(
htmlradio的text出不来height: 60,
color: an,
child: Text(_selectedBoxs()),
alignment: ,
);
},
);
}
String _selectedBoxs(){
String string = "";
_datas.forEach((FMRadioModel model) {
if (model.index == groupValue) {
string = "你当前选择的是: " + "${} "; }
});
return string;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论