flutter封装点击菜单工具栏组件checkBox多选版

效果展示

单选版可看上篇博文 用flutter封装一个点击菜单工具栏组件

本文是CHeckbox多选版

效果如图所示，点击选项回调选中的index和是否选中的值，可以自定义横向纵向，传递宽高后自动计算子项宽高，自定义边框、背景、选中的样式

实现代码

第一部分是封装子项组件， ToolMenuCheckboxItemWidget组件如下：

import 'dart:core';
import 'package:flutter/material.dart';
/// @author 编程小龙
/// @创建时间：2022/3/8
/// 工具菜单checkbox版子项
class ToolMenuCheckboxItemWidget extends StatelessWidget {
 /// 显示的title
 final String title;
 /// 序号
 final int index;
 /// 点击回调
 final void Function(int, bool) click;
 final double width;
 final double height;
 final bool isActive;
 final bool isHorizontal; // 是否横向
 final bool isEnd; // 是否为末尾
 final Color? activeColor; // 点击后的颜色 没传取主题色
 final Color? backgroundColor; // 背景色
 final Color? borderColor; // 边框色
 final TextStyle? textStyle; // 文字样式
 final TextStyle? activeTextStyle; //  选中的文字样式
 const ToolMenuCheckboxItemWidget(
     {Key? key,
     this.isActive = false,
     required this.title,
     required this.index,
     required this.click,
     this.isHorizontal = false,
     this.width = 100,
     this.isEnd = false,
     this.height = 40,
     this.activeColor,
     this.backgroundColor,
     this.borderColor,
     this.textStyle,
     this.activeTextStyle})
     : super(key: key);
 @override
 Widget build(BuildContext context) {
   TextStyle defaultTextStyle = TextStyle(
       fontSize: 16, color: isActive ? Colors.white : Colors.black87);
   return Material(
     child: Ink( // 点击右波纹效果
       width: width,
       height: height,
       decoration: BoxDecoration(
           color: isActive
               ? activeColor ?? Theme.of(context).primaryColor
               : backgroundColor ?? Colors.white30,
           border: isHorizontal
               ? isEnd
               ? const Border()
               : Border(
               right: BorderSide(
                   width: 1, color: borderColor ?? Colors.grey))
               : Border(
               bottom: BorderSide(
                   width: 1, color: borderColor ?? Colors.grey))),
       child: InkWell(
           onTap: () {
             click(index,!isActive);
           },
           child: Center(
             child: Text(title,
                 style: isActive
                     ? activeTextStyle ?? defaultTextStyle
                     : textStyle ?? defaultTextStyle),
           )),
     ),
   );
 }
}

第二部分是封装菜单内容，ToolMenuCheckBoxWidget代码如下

import 'package:demo/widgets/tool_menu_checkbox_item_widget.dart';
import 'package:flutter/material.dart';
/// @author 编程小龙
/// @创建时间：2022/3/8
/// 工具菜单checkbox版
class ToolMenuCheckBoxWidget extends StatefulWidget {
 final Map<String, bool> items; // title:checked 的形式 返回值为 key:true/false
 final void Function(int, bool) click; // 点击回调 返回第n个的选中情况
 final double? width;
 final double? height;
 final bool isHorizontal; // 横向
 final Color? activeColor; // 点击后的颜色 没传取主题色
 final Color? backgroundColor; // 背景色
 final Color? borderColor; // 边框色
 final TextStyle? textStyle; // 文字样式
 final TextStyle? activeTextStyle; //  选中的文字样式
 const ToolMenuCheckBoxWidget(
     {Key? key,
     required this.items,
     required this.click,
     this.width,
     this.height,
     this.isHorizontal = false,
     this.activeColor,
     this.backgroundColor,
     this.borderColor,
     this.textStyle,
     this.activeTextStyle})
     : super(key: key);
 @override
 State<ToolMenuCheckBoxWidget> createState() => _ToolMenuCheckBoxWidgetState();
}
class _ToolMenuCheckBoxWidgetState extends State<ToolMenuCheckBoxWidget> {
 late Map<String, bool> items;
 bool isHorizontal = false; // 是否横向
 @override
 void initState() {
   // 初始化当前选中
   items = widget.items;
   isHorizontal = widget.isHorizontal;
   super.initState();
 }
 @override
 Widget build(BuildContext context) {
   int index = 0; // 遍历自增 index
   int size = widget.items.length;
   double height = widget.height ?? (isHorizontal ? 50 : 200); // 设置水平和竖直时的默认值
   double width = widget.width ?? (isHorizontal ? 400 : 100);
   return Container(
     height: height,
     width: width,
     decoration: BoxDecoration(
       color: widget.backgroundColor ?? Colors.white30,
       border: Border.all(color: widget.borderColor ?? Colors.grey, width: 1),
     ),
     child: Wrap(
       children: items.keys.map((key) {
         return ToolMenuCheckboxItemWidget(
           title: key,
           index: index,
           isHorizontal: widget.isHorizontal,
           click: (index, isChecked) {
             setState(() {
               items[key] = isChecked;
             });
             widget.click(index, isChecked);
           },
           height:
               widget.isHorizontal ? height - 2 : height / size,
           isActive: items[key] ?? false,
           width: widget.isHorizontal ? width / size - 1 : width,
           isEnd: index++ == size - 1,
           textStyle: widget.textStyle,
           activeTextStyle: widget.activeTextStyle,
           backgroundColor: widget.backgroundColor,
           activeColor: widget.activeColor,
           borderColor: widget.borderColor,
         );
       }).toList(),
     ),
   );
 }
}

代码调用

最简单案例只需传入titles即可，选中颜色默认取主题颜色，后续再弄一个chekbox版的，可多选菜单

/// 竖向
ToolMenuCheckBoxWidget(
   items: { // 注意这里map不要用const声明，因为里面的值传递过去会同步更改，并不会重新copy一份值操作
     "选项1": true,
     "选项2": true,
     "选项3": false,
     "选项4": false
   },
   click: (index, isActive) {
     print("竖向 选项$index 的值为$isActive");
   }),
/// 自定义样式横向
ToolMenuCheckBoxWidget(
items: { // 注意这里map不要用const声明，因为里面的值传递过去会同步更改，并不会重新copy一份值操作
   "选项1": true,
   "选项2": false,
   "选项3": false,
   "选项4": true,
   "选项5": false,
   "选项6": false,
 },
 click: (index, isActive) {
   print("横向 选项$index 的值为$isActive");
 },
 isHorizontal: true,
 activeColor: Colors.green,
 backgroundColor: Colors.black,
 textStyle: const TextStyle(color: Colors.white),
 activeTextStyle:
 const TextStyle(color: Colors.white, fontSize: 18),
 borderColor: Colors.orange,
),

来源：https://blog.csdn.net/qq_42365534/article/details/123352892