我们在前面章回中介绍过Radio组件相关的知识,本章回中介绍的Radio和官方提供的Radio在功能上相同,只是官方提供的Radio不支持修改外观,所以我们准备重新
定义Radio组件。本章回中将详细介绍自定义Radio组件的思路和方法。
最开始想继承Radio组件,然后在此基础上修改外观,后来发来这个思路行不通,因为Radio组件没有提供child属性,即使继承后也无法修改它的内容。因此我们准备
通过组合其它组件来实现自定义Radio组件。Radio上的文本通过Text组件实现,是否被选择的状态通过checkBox组件实现。把这两个组件通过Row组合成一行就是一
个Radio组件。当然了,如果想添加图片的话可以在Row中添加Image组件。有了外观后还需要实现单选功能,就是说多个Radio放在一起使用时有且只有一个Radio能
被选择。我们通过索引id和组件id来实现这个功能,如果这两个id相等,那么当前Radio处于被选择状态,反之处于末选择状态。索引值是固定的,通常不能修改,因此
我们提供一个修改组件id的方法,在点击Radio时通过该方法来修改组id.
自定义Radio的思路介绍完了,不过有看官说感觉有点抽象,接下来我们将介绍详细的实现方法:
typedef ItemSelected<T> = void Function(T value);
///单个Radio组件
class MutexWidget extends StatefulWidget {
MutexWidget({super.key,required this.groupValue, required this.index,
required this.itemSelected,
});
///索引id和组id,以及修改组id的方法都写成组件的属性
int groupValue;
int index;
ItemSelected<int> itemSelected;
State<MutexWidget> createState() => _MutexWidgetState();
}
class _MutexWidgetState extends State<MutexWidget> {
bool isWidgetSelected = false;
Widget build(BuildContext context) {
///如果这两个id相等,那么当前Radio处于被选择状态,反之处于末选择状
if (widget.index == widget.groupValue) {
isWidgetSelected = true;
} else {
isWidgetSelected = false;
}
///组件的外观在这里,可以自定义
return Listener(
onPointerDown: (event) {
if (widget.index == widget.groupValue) {
isWidgetSelected = true;
} else {
isWidgetSelected = false;
}
widget.itemSelected(widget.index);
},
child: Container(
decoration: BoxDecoration(
color: Colors.black12,
borderRadius: BorderRadius.circular(30),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("Item ${widget.index}"),
Checkbox(
activeColor: Colors.blue,
side: const BorderSide(
width: 3, color: Colors.grey,),
shape: const CircleBorder(),
value: isWidgetSelected,
onChanged: (value) {},)
],
),
),
);
}
}
///使用多个组件,主要是实现修改组id的方法,同时使用setState方法刷新所有组件的状态
child: ListView(
children: [
MutexWidget(groupValue: groupId, index:1, itemSelected: (v){
setState(() {
groupId = v;
});
}),
const SizedBox(height: 16,),
MutexWidget(groupValue: groupId, index:2, itemSelected: (v){
setState(() {
groupId = v;
});
}),
const SizedBox(height: 16,),
MutexWidget(groupValue: groupId, index:3, itemSelected: (v){
setState(() {
groupId = v;
});
}),
const SizedBox(height: 16,),
MutexWidget(groupValue: groupId, index:4, itemSelected: (v){
setState(() {
groupId = v;
});
}),
const SizedBox(height: 16,),
MutexWidget(groupValue: groupId, index:5, itemSelected: (v){
setState(() {
groupId = v;
});
}),
const SizedBox(height: 16,),
],
),
上面的示例代码中包含两个部分,一部分是单个Radio组件的代码,另外一部分是使用多个Radio组件的代码,代码完全按照上一小节中的实现方法来编写,并且在关键
位置添加了注释,这样有助于大家理解代码。
编译并且运行上面小节中的代码,可以得到下面的运行效图。图中显了个五个Radio组件,它们形成一组Radio,这组Radio中有且只有一个Radio能被选择,也就是我
们常用的单选功能。此外,单个Radio组件的布局,内容,以及颜色等风格可以依据需要自行修改。
最后,我们对本章回中的内容做一个全面的总结: