flutter 单选框按钮组件Radio、单选框卡片组件 RadioListTile、开关组件Switch、开关卡片组件SwitchListTile
程序员文章站
2022-05-29 23:11:47
...
单选框按钮组件
单选框按钮必须成对出现,不能只出现一个
Radio(
value:点击后传递的值,
onChanged:(v){ 回调参数是value的内容
setState(){变量=v };
},
groupValue:变量, 多个按钮相的该值相同时成为一个按钮组,当值与value相等时,会被选中
),
单选框卡片组件
按钮-内容- secondary组件的内容
RadioListTile(
value: 点击后传递的值,
onChanged: (v){ 回调参数是value的内容
setState(() {
变量=v; 使得被选中
});
},
groupValue:变量, 当变量的值和value相等时,会被选中
title: Text('标题'),
subtitle: Text('二级标题'),
secondary: , 末尾组件内容
selected: 布尔值, //true/false,为true时文字高亮
),
开关组件
Switch(
value:flag, 布尔值
onChanged:(v){ 回调参数为value的值
setState(() {
this.flag=v; 点击会自动改变状态
});
}
)
开关卡片组件
secondary组件内容-内容-开关按钮
SwitchListTile(
value:布尔变量,
onChanged:(v){ 回调参数是value值
setState(() {
布尔变量=v; 点击自动改变状态
});
},
title: Text('标题'),
subtitle: Text('第二标题'),
secondary: , 开头组件内容
)
代码示例:
import 'package:flutter/material.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
var sex=1;
bool flag=true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(children: <Widget>[
Text('男'),
Radio(
value:1,
onChanged:(v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex, //相同时候成为一个按钮组,当值与value相等时,会被选中
),
SizedBox(width: 20,),
Text('女'),
Radio(
value:2,
onChanged:(v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex,
),
//成对出现、且必须得垂直布局
//和卡片布局相似,按钮-文字内容-字体图标
RadioListTile(
value: 1,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue:this.sex,
title: Text('标题'),
subtitle: Text('二级标题'),
secondary: Icon(Icons.home),
selected: this.sex==1, //true/false,为true时文字高亮
),
RadioListTile(
value: 2,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue:this.sex,
title: Text('标题'),
subtitle: Text('二级标题'),
secondary: Icon(Icons.home),
selected: this.sex==2,
),
SizedBox(height: 40,),
Switch(
value:flag,
onChanged:(v){
setState(() {
this.flag=v;
});
}
),
SizedBox(height: 20,),
SwitchListTile(
value:this.flag,
onChanged:(v){
setState(() {
this.flag=v;
});
},
title: Text('标题'),
subtitle: Text('第二标题'),
secondary: Icon(Icons.home),
)
]),
);
}
}
// 因为表单组件需要改变状态,所以要使用有状态组件
效果图: