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

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

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

效果展示

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

本文是单选版

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

实现代码

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

import 'dart:core';import 'package:flutter/material.dart';/// @author 编程小龙/// @创建时间：2022/3/8/// 工具菜单子项class toolmenuitemwidget extends statelesswidget {  /// 显示的title  final string title;  /// 当前选中  final int index;  /// 点击回调  final valuechanged 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 toolmenuitemwidget({    key? key,    this.isactive = false,    required this.title,    required this.index,    required this.click,    this.activecolor,    this.backgroundcolor,    this.bordercolor,    this.textstyle,    this.activetextstyle,    this.ishorizontal = false,    this.width = 100,    this.isend = false,    this.height = 40,  }) : super(key: key);  @override  widget build(buildcontext context) {    var 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);            },            child: center(              child: text(title,                  style: isactive                      ? activetextstyle ?? defaulttextstyle                      : textstyle ?? defaulttextstyle),            )),      ),    );  }}

第二部分是封装工具栏部分， toolmenuitemwidget组件如下：

import 'package:demo/widgets/tool_menu_item_widget.dart';import 'package:flutter/material.dart';/// @author 编程小龙/// @创建时间：2022/3/8/// 工具菜单class toolmenuwidget extends statefulwidget {  final list titles;  final valuechanged click; // 点击回调  final double? width;  final double? height;  final int currentindex; // 当前选中  final bool ishorizontal; // 横向  final color? activecolor; // 点击后的颜色 没传取主题色  final color? backgroundcolor; // 背景色  final color? bordercolor; // 边框色  final textstyle? textstyle; // 文字样式  final textstyle? activetextstyle; //  选中的文字样式  const toolmenuwidget(      {key? key,      this.currentindex = 0,      required this.titles,      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() => _toolmenuwidgetstate();}class _toolmenuwidgetstate extends state {  int currentindex = 0; // 当前选中  bool ishorizontal = false; // 是否横向  @override  void initstate() {    // 初始化当前选中    currentindex = widget.currentindex;    ishorizontal = widget.ishorizontal;    super.initstate();  }  @override  widget build(buildcontext context) {    int index = 0; // 用于遍历计数    int size = widget.titles.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: widget.titles.map((title) {          return toolmenuitemwidget(            title: title,            index: index,            ishorizontal: widget.ishorizontal,            click: (index) {              setstate(() {                currentindex = index;              });              widget.click(index);            },            activecolor: widget.activecolor,            backgroundcolor: widget.backgroundcolor,            bordercolor: widget.bordercolor,            textstyle: widget.textstyle,            height: widget.ishorizontal ? height - 2 : height / size,            // 竖直状态-2 是去掉边框所占像素            isactive: index == currentindex,            width: widget.ishorizontal ? width / size - 1 : width,            isend: index   == size - 1,          );        }).tolist(),      ),    );  }}

代码调用

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

/// 竖向，默认样式toolmenuwidget(   titles: const ["选项1", "选项2", "选项3", "选项4"],   click: (index) {     print(" 竖向选中的是 $index");   }, ),/// 自定义样式横向toolmenuwidget(  titles: const ["选项1", "选项2", "选项3", "选项4","选项5"],   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,   click: (index) {     print("横向选中的是 $index");   }, )

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