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多選版”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。