Flutter自定义按钮面板插件buttons_panel的使用

Flutter自定义按钮面板插件buttons_panel的使用

Buttons Panel 是一个 Flutter 插件，它允许你创建一排或一列看起来像连接在一起的按钮。它给人一种统一的小部件的感觉，但用户仍然可以通过点击他们选择的按钮来选择其中一个选项。

短演示

特性

• 按钮面板: 创建一个包含多个按钮的面板供用户交互。
• 自定义: 可以自定义按钮的外观，包括颜色、文本或图标主题、选中项主题背景颜色等。
• 回调函数: 设置回调函数以处理用户按下按钮时的交互。
• 灵活布局: 轻松地将按钮面板集成到你的应用布局和设计中。

安装

要在这个 Flutter 项目中使用此插件，在 pubspec.yaml 文件中添加 buttons_panel 作为依赖：

dependencies:
  buttons_panel: ^0.0.1  # 替换为最新版本

然后运行 flutter pub get 来安装该包。

使用方法

在 Dart 代码中导入包：

import 'package:buttons_panel/buttons_panel.dart';

创建一个 Buttons Panel 小部件：

ButtonsPanel(
  currentIndex: _currentIndex,
  onTap: (value) => setState(() => currentIndex2 = value),
  children: const [
    Text("Home"),
    Text("Search"),
    Text("Profile"),
  ],
),

更详细的使用和自定义说明

更多详细的使用和自定义说明，请参阅 示例。

示例代码

以下是一个完整的示例代码：

import 'package:buttons_panel/buttons_panel.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int currentIndex = 0;
  int currentIndex2 = 0;
  int currentIndex3 = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Buttons Panel Example"),
          elevation: 0,
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 水平方向的按钮面板
            ButtonsPanel(
              currentIndex: currentIndex,
              borderRadius: BorderRadius.circular(32),
              backgroundColor: Colors.black.withOpacity(0.05),
              selectedItemBackgroundColor: Theme.of(context).primaryColor,
              selectedIconThemeData: const IconThemeData(color: Colors.white),
              padding: const EdgeInsets.symmetric(horizontal: 32),
              onTap: (value) => setState(() => currentIndex = value),
              children: const [
                Icon(Icons.home),
                Icon(Icons.search),
                Icon(Icons.person),
              ],
            ),
            // 水平方向的按钮面板（带文字）
            ButtonsPanel(
              currentIndex: currentIndex2,
              borderRadius: BorderRadius.circular(32),
              backgroundColor: Colors.black.withOpacity(0.05),
              selectedItemBackgroundColor: Theme.of(context).primaryColor,
              selectedIconThemeData: const IconThemeData(color: Colors.white),
              padding: const EdgeInsets.symmetric(horizontal: 32),
              selectedTextStyle: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
              ),
              unselectedTextStyle: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
              onTap: (value) => setState(() => currentIndex2 = value),
              children: const [
                Text("Home"),
                Text("Search"),
                Text("Profile"),
              ],
            ),
            // 垂直方向的按钮面板（带文字）
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.3,
              child: ButtonsPanel(
                currentIndex: currentIndex3,
                direction: Axis.vertical,
                borderRadius: BorderRadius.circular(32),
                backgroundColor: Colors.black.withOpacity(0.05),
                selectedItemBackgroundColor: Theme.of(context).primaryColor,
                selectedIconThemeData: const IconThemeData(color: Colors.white),
                padding: const EdgeInsets.symmetric(horizontal: 32),
                selectedTextStyle: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                ),
                unselectedTextStyle: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
                onTap: (value) => setState(() => currentIndex3 = value),
                children: const [
                  Text("1"),
                  Text("2"),
                  Text("3"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}