Flutter 自定义单选按钮和自定义复选框

---

前言

在日常开发中，很多时候系统自带的单选按钮，复选框无法满足我们的需求，那么就需要自定义样式的按钮，本篇文章将记录如何自定义单选按钮，复选框。

---

一、自定义单选按钮

1. 在自定义单选按钮之前，我们先初始化数据

  List radioList = [
    {"title": "单选1", "isSelect": false},
    {"title": "单选2", "isSelect": false},
    {"title": "单选3", "isSelect": false},
    {"title": "单选4", "isSelect": false},
  ];

2. 开始布局，我这里使用List.generate 自动循环生成组件

  static Widget bodyWidget(HomePageViewModel model) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: Column(
        children: List<Widget>.generate(model.radioList.length,
            (index) => radioWidget(model.radioList[index], index, model)),
      ),
    );
  }

3. 单选按钮的样式属性，并且在每次触发点击事件的时候，使用循环遍历的方式，将状态初始化成未选中，再根据当前选中的下标index 实现按钮选中功能。

  static Widget radioWidget(item, int index, HomePageViewModel model) {
    return GestureDetector(
      onTap: () {
        for (var radio in model.radioList) {
          radio["isSelect"] = false;
        }
        model.radioList[index]["isSelect"] = true;
        model.notifyListeners();
      },
      child: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(
                Radius.circular(15),
              ),
              border: Border.all(
                width: 1,
                color: Colors.grey.shade300,
              ),
            ),
            child: Container(
              width: 15,
              height: 15,
              decoration: BoxDecoration(
                color: item["isSelect"] ? Colors.green : Colors.transparent,
                borderRadius: BorderRadius.all(
                  Radius.circular(7.5),
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 10,
          ),
          Text(item["title"]),
        ],
      ),
    );
  }

接下来我们来看一下运行效果：

二、自定义复选框

关于复选框，还是单选框，其实最主要的不同就是，在选择之后，数据的操作，我们修改上面单选按钮中点击事件中的代码

        model.radioList[index]["isSelect"] = !item["isSelect"];
        model.notifyListeners();

改动很简单，不多赘述，看一下完整代码

  static Widget checkWidget(item, int index, HomePageViewModel model) {
    return GestureDetector(
      onTap: () {
        model.radioList[index]["isSelect"] = !item["isSelect"];
        model.notifyListeners();
      },
      child: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(
                Radius.circular(6),
              ),
              border: Border.all(
                width: 1,
                color: Colors.grey.shade300,
              ),
            ),
            child: item["isSelect"]
                ? Icon(
                    Icons.call_missed_outgoing_rounded,
                    color: Colors.red,
                    size: 24,
                  )
                : Container(),
          ),
          const SizedBox(
            width: 10,
          ),
          Text(item["title"]),
        ],
      ),
    );
  }

运行效果：

---

总结

本篇文章的记录就到这里了，很多时候我们不知道，在一门语言中的单选或者复选框的自定义样式该怎么做，只是我们的思路的没有转变过来，其实重要的不是样式，而是数据的改变。