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

这篇“Flutter怎么封装点击菜单工具栏组件checkBox多选版”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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,),

以上就是关于“flutter怎么封装点击菜单工具栏组件checkBox多选版”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。