第二百五十四回

文章目录

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

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

第二百五十四回_第1张图片

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;

  
  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组件的代码,代码完全按照上一小节中的实现方法来编写,并且在关键
位置添加了注释,这样有助于大家理解代码。

3.2 运行效果

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

4. 内容总结

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

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

你可能感兴趣的:(一起Talk,Flutter吧,前端,移动开发Flutter)