flutter怎么封装点击菜单工具栏组件checkbox多选版-亚博电竞手机版

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 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 createstate() => _toolmenucheckboxwidgetstate();}class _toolmenucheckboxwidgetstate extends state {  late map 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多选版”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。