flutter封裝單選點選選單工具列元件

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<int> 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),
            )),
      ),
    );
  }
}

import 'package:demo/widgets/tool_menu_item_widget.dart';
import 'package:flutter/material.dart';
/// @author 程式設計小龍
/// @建立時間：2022/3/8
/// 工具選單
class ToolMenuWidget extends StatefulWidget {
  final List<String> titles;
  final ValueChanged<int> 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<ToolMenuWidget> createState() => _ToolMenuWidgetState();
}
class _ToolMenuWidgetState extends State<ToolMenuWidget> {
  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(),
      ),
    );
  }
}

/// 豎向，預設樣式
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");
   },
 )