第二百零八回自定义一个组件

文章目录

[1. 概念介绍](#1. 概念介绍)
[2. 实现方法](#2. 实现方法)
- [2.1 实现思路](#2.1 实现思路)
- [2.2 实现方法](#2.2 实现方法)
[3. 示例代码](#3. 示例代码)
[4. 内容总结](#4. 内容总结)

我们在上一章回中介绍了"如何让Text组件中的文字自动换行"相关的内容，本章回中将介绍如何自定义一个可选择的星期组件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的星期组件是一个可以在一周内任意选择一天的星期组件，详细如下图所示036，图中的组件从周一到周日依次排列，它们组合在一起表示一周，可以

从中任意选择一天，此时被选择的哪天高亮显示，其它未被选择的内容正常显示。

2. 实现方法

2.1 实现思路

对于这种复杂的组件，我们可以把它拆开来分析：这个星期组件中每一天都是一个独立的组件，把这些组件组合成一行就是一个完整的星期组件，星期组件中可以任意选择

某一天，这个需要在组件中添加事件响应相关的组件。响应事件后把原来的组件变成高亮状态。此外，这个星期组件中只能在一个星期内选择一天，也就是说星期组件内的

组件是互斥的，它们有且只有一个能被选择，这个需要使用单独按钮中的互斥思路，我们在前面章回中自定义单选按钮时介绍过这种思想。

2.2 实现方法

有了总体的思路后，就有了明确的方向，接下来我们通过具体的方法来演示如何实现可选择的星期组件：

创建一个文本组件用来显示星期中的名称，比如Monday;Sunday;
在文本组件外层嵌套一个Container组件，修改该组件的填充颜色为高亮的颜色；
在Container组件外嵌套一个响应点击事件的组件，用来响应用户发出的点击事件；
在响应事件中依据状态值把没有高亮背景的文本组件切换成有高亮背景的文本组件；
把上面的组件封装成statefulWidget,并且在该组件中添加互斥访问子组件的内容；
上面介绍的实现方法比较抽象，我们将在后面的小节中通过具体的示例代码来演示详细的实现过程。

3. 示例代码

dart 复制代码

class WeekItemWidget extends StatefulWidget {
  const WeekItemWidget({
    super.key, required this.itemName, required this.index, required this.groupValue, required this.itemClicked,
  });

  ///显示的内容，比如mon,wed
  final String itemName;
  ///用来实现互斥访问组件
  final int index;
  final int groupValue;
  final ItemClicked<int> itemClicked;

  @override
  State<WeekItemWidget> createState() => _WeekItemWidgetState();
}

class _WeekItemWidgetState extends State<WeekItemWidget> {

  bool isClicked = false;

  @override
  Widget build(BuildContext context) {

debugPrint("group: ${widget.groupValue}, index:${widget.index}");

    ///这个用来判断组件是否被选择
    if(widget.groupValue == widget.index ) {
      isClicked = true;
    }else {
      isClicked = false;
    }

    return Listener(
      ///响应用户的点击事件
      onPointerDown:(event) {
        widget.itemClicked(widget.index);
      },
      child: SingleItemWidget(isClicked: isClicked,itemName: widget.itemName,),
    );
  }
}

///依据组件是否被选择来切换正常文本和高亮文本
class SingleItemWidget extends StatelessWidget {
  const SingleItemWidget({
    super.key, required this.isClicked, required this.itemName,
  });

  final bool isClicked;
  final String itemName;

  @override
  Widget build(BuildContext context) {
    if(isClicked) {
      return Container(
        width: 40,
        height: 48,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(itemName, style: const TextStyle(color: Colors.white),),
      );
    }else {
      return Container(
        width: 40,
        height: 48,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(itemName, style: const TextStyle(color: Colors.black),),
      );
    }
  }
}

///把单独组件组合成一行，构成星期组件，这里只列出了两个组件，其它的组件省略不写
Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
   WeekItemWidget(itemName:"Mon", index: 1, groupValue: groupId,
       itemClicked: (value){
          setState(() {
            groupId = value;
          },);
       },
   ),
   WeekItemWidget(itemName: "Sun", index:7, groupValue: groupId,
       itemClicked: (value){
          setState(() {
            groupId = value;
          },);
       },
   ),
 ],
),

上面的示例代码中完全按照实现方法中介绍的步骤来编写，我们在代码的关键位置添加了注释，这样方便大家理解代码。编译并且运行该程序可以得到文本开始演示的运行

效果图。建议大家自己动手去实践，特别是互斥访问组件的内容。

4. 内容总结

最后，我们对本章回的内容做一个全面的介绍：

自定义复杂组件时可以把复杂组件拆成小组件来实现；
对于不同状态的组件可以通过状态值来切换组件；
状态值可以通过事件响应组件来实现，比如是否被点击；
子组件之间的互斥访问使用互斥的思路：多个组件中有且只有一个组件能被选择；
看官们，与"自定义一个可选择的星期组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

第二百零八回 自定义一个组件