第二百五十四回-编程知识

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"如何给图片添加阴影"相关的内容，本章回中将介绍自定义Radio组件.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在前面章回中介绍过Radio组件相关的知识，本章回中介绍的Radio和官方提供的Radio在功能上相同，只是官方提供的Radio不支持修改外观，所以我们准备重新
定义Radio组件。本章回中将详细介绍自定义Radio组件的思路和方法。

2. 思路与方法

2.1 实现思路

最开始想继承Radio组件，然后在此基础上修改外观，后来发来这个思路行不通，因为Radio组件没有提供child属性，即使继承后也无法修改它的内容。因此我们准备
通过组合其它组件来实现自定义Radio组件。Radio上的文本通过Text组件实现，是否被选择的状态通过checkBox组件实现。把这两个组件通过Row组合成一行就是一
个Radio组件。当然了，如果想添加图片的话可以在Row中添加Image组件。有了外观后还需要实现单选功能，就是说多个Radio放在一起使用时有且只有一个Radio能
被选择。我们通过索引id和组件id来实现这个功能，如果这两个id相等，那么当前Radio处于被选择状态，反之处于末选择状态。索引值是固定的，通常不能修改，因此
我们提供一个修改组件id的方法，在点击Radio时通过该方法来修改组id.

2.2 实现方法

自定义Radio的思路介绍完了，不过有看官说感觉有点抽象，接下来我们将介绍详细的实现方法：

创建一个StatefulWidget组件，该组件表示单个Radio;
在StatefulWidget组件的参数中添加两个必选参数当作索引id和组id;
提供一个修改参数的方法，把该方法放到StatefulWidget组件的参数中，相当于向外开放；
在StatefulWidget组件中添加Text和CheckBox组件，并且通过Row把它们组合在一起；
在Row组件外层添加Listener组件，也可以换成手势组件，主要用来响应点击事件；
当点击事件发生时调用修改参数的方法，并且把当前Radio的索引id通过方法的参数传递到外面；
再StatefulWidget组件外实现修改组id的方法，主要是把组件id修改成当前Radio的索引id;
在StatefulWidget组件中判断组id和索引id是否相同，如果相同，把CheckBox修改为选择状态；
上面介绍的实现方法中比较难理解的单选功能，该功能的核心在于在单个Radio中响应点击事件，同时把修改组id的方法向外开放，在单个Radio组件修改组id时刷新所
有Radio组件的状态，这时被选择的组件会因为组id和索引id相等显示被选择状态，其它Radio组件则因为组id和索引id不相等显示末选择状态。

3. 代码与效果

3.1 示例代码


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;@overrideState<MutexWidget> createState() => _MutexWidgetState();
}class _MutexWidgetState extends State<MutexWidget> {bool isWidgetSelected = false;@overrideWidget 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组件的代码，代码完全按照上一小节中的实现方法来编写，并且在关键
位置添加了注释，这样有助于大家理解代码。

3.2 运行效果

编译并且运行上面小节中的代码，可以得到下面的运行效图。图中显了个五个Radio组件，它们形成一组Radio，这组Radio中有且只有一个Radio能被选择，也就是我
们常用的单选功能。此外，单个Radio组件的布局，内容，以及颜色等风格可以依据需要自行修改。

4. 内容总结

最后，我们对本章回中的内容做一个全面的总结：

官方提供的Radio组件无法修改外观，我们可以通过自定义Radio来实现；
自定义Radio组件的外观通过使用Row组件组合Text组件和CheckBox组件实现；
自定义Radio组件的难点在于实现单选功能，它需要在Radio组件内部和外部一起实现；
自定义Radio组件的内容，布局和颜色等风格可以自行设计与实现，实现方法可以参考示例代码中Row部分的代码；
看官们，与"自定义Radio组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!