Flutter 单选按钮组件有两种
1、Radio
单选按钮，一般用来表现一些简单的信息
常用属性：
value：单选的值
groupValue：多个按钮选择组的值
activeColor：点击颜色变化
onChanged：点击事件
2、RadioListTile
包含更多信息的单选项，提供多种配置信息的属性，可以表现更丰富的信息。
value：单选的值
groupValue：多个按钮选择组的值
onChanged：点击事件
activeColor：点击颜色变化
secondary：在里面添加Icon图片
title 标题；
subtitle 副标题；
如图所示： 两种实现方法
代码如下：
import 'package:flutter/material.dart';
class MyRadioPage extends StatefulWidget {
@override
_MyRadioPageState createState() =>_MyRadioPageState();
}
class _MyRadioPageState extends State {
int _sex =1;
int status =1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('单选按钮'),
),
body:Column(
children: [
myRadioSex(),
Divider(
height:10,
color: Colors.grey,
),
myRadioListTitle(),
],
));
}
myRadioSex() {
return Column(
children: [
Row(
children: [
Radio(
///单选的值
value:1,
///多个按钮选择组的值
groupValue:_sex,
///点击颜色变化
activeColor: Colors.red,
///点击事件
onChanged: (value) {
setState(() {
_sex = value;
});
}),
Text('男')
],
),
Row(
children: [
Radio(
value:2,
groupValue:_sex,
activeColor: Colors.red,
onChanged: (value) {
setState(() {
_sex = value;
});
}),
Text('女')
],
),
],
);
}
myRadioListTitle() {
return Column(
children: [
RadioListTile(
value:1,
groupValue:status,
onChanged: (value) {
setState(() {
status = value;
});
},
contentPadding:EdgeInsets.fromLTRB(5, 0, 0, 0),
activeColor: Colors.red,
// selectedTileColor: Colors.blue,
title:Text("标题", style:TextStyle(color: Colors.black)),
// subtitle:Text("这是二级标题",style: TextStyle(color: Colors.black)),
secondary:Icon(
Icons.help,
color: Colors.grey,
),
selected:this.status ==1,
),
RadioListTile(
value:2,
groupValue:status,
onChanged: (value) {
setState(() {
status = value;
});
},
contentPadding:EdgeInsets.fromLTRB(5, 0, 0, 0),
activeColor: Colors.red,
// selectedTileColor: Colors.blue,
title:Text("标题", style:TextStyle(color: Colors.black)),
// subtitle:Text("这是二级标题",style: TextStyle(color: Colors.black)),
secondary:Icon(
Icons.help,
color: Colors.grey,
),
selected:this.status ==2,
),
],
);
}
}
网友评论