Flutter自定义按钮组插件puzzle_button_group的使用

一个用于创建具有可定制功能的交互式拼图按钮组的包。

特性

• 可自定义按钮大小和样式
• 支持多种按钮布局
• 易于与Flutter应用程序集成
• 响应式设计，适用于各种屏幕尺寸

开始使用

要在项目中使用此包，请在pubspec.yaml文件中添加依赖项：

dependencies:
  puzzle_button_group: ^0.1.0

使用方法

首先导入包并创建按钮组：

import 'package:puzzle_button_group/puzzle_button_group.dart';

PuzzleButtonGroup(
  buttonCount: 4,
  onPressed: (index) {
    print('Button $index pressed');
  },
);

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用puzzle_button_group插件。此示例包括水平和垂直布局的按钮组。

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

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

class PuzzleButtonGroupExampleApp extends StatelessWidget {
  const PuzzleButtonGroupExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Puzzle Button Group Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const PuzzleButtonGroupDemo(),
    );
  }
}

class PuzzleButtonGroupDemo extends StatelessWidget {
  const PuzzleButtonGroupDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Puzzle Button Group Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 水平拼图按钮组
            PuzzleButtonGroup(
              axis: Axis.horizontal, // 设置为水平布局
              backgroundColor: Colors.blue, // 设置背景颜色
              borderColor: Colors.white, // 设置边框颜色
              children: [
                TextButton(
                  onPressed: () {}, // 按钮点击事件
                  child: const Text('Button 1'), // 按钮文本
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text('Button 2'),
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text('Button 3'),
                ),
              ],
            ),
            const SizedBox(height: 20), // 添加间距

            // 垂直拼图按钮组
            PuzzleButtonGroup(
              axis: Axis.vertical, // 设置为垂直布局
              backgroundColor: Colors.green, // 设置背景颜色
              borderColor: Colors.black, // 设置边框颜色
              children: [
                TextButton(
                  onPressed: () {},
                  child: const Text('Button 1'),
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text('Button 2'),
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text('Button 3'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}