Flutter分组按钮插件group_button的使用

Flutter分组按钮插件group_button的使用

Flutter中的group_button插件可以帮助开发者快速创建一组按钮，支持Radio和CheckBox模型，并允许自定义分组类型。以下是关于如何使用该插件的详细介绍。

开始使用

添加依赖

在pubspec.yaml文件中添加如下依赖：

dependencies:
  group_button: ^5.3.4

然后执行flutter pub get以获取并安装此包。

导入包

在需要使用的Dart文件顶部添加以下导入语句：

import 'package:group_button/group_button.dart';

基本用法

下面是一个简单的例子，展示了如何创建一个非单选模式下的按钮组：

GroupButton(
    isRadio: false, // 设置为false表示多选模式；true则为单选模式（默认）
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)

使用控制器

从版本4.1.0开始，可以通过GroupButtonController来控制按钮组的行为。例如：

final controller = GroupButtonController();

Column(
  children: [
    GroupButton.checkbox(
      controller: controller,
      buttons: ['12:00', '13:00', '14:00'],
      onSelected: (i, selected) => debugPrint('Button #$i $selected'),
    ),
    TextButton(
      onPressed: () => controller.selectIndex(1),
      child: const Text('Select 1 button'),
    )
  ],
),

自定义按钮值类型

在5.0.0版本之后，可以设置按钮的值类型为任意类型（如int, DateTime, double或自定义类）。文本显示将基于对象的.toString()方法：

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
)

也可以结合buttonBuilder来自定义每个按钮的外观：

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
  buttonBuilder: (selected, date, context) {
    return Text('${date.year}-${date.month}-${date.day}');
  },
),

定制化选项

为了进一步定制按钮样式，可以使用GroupButtonOptions类。这里提供了许多属性用于调整按钮的外观和布局方式，比如颜色、边框、间距等：

GroupButtonOptions(
  selectedShadow: const [],
  selectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.pink[900],
  ),
  selectedColor: Colors.pink[100],
  unselectedShadow: const [],
  unselectedColor: Colors.amber[100],
  unselectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.amber[900],
  ),
  selectedBorderColor: Colors.pink[900],
  unselectedBorderColor: Colors.amber[900],
  borderRadius: BorderRadius.circular(100),
  spacing: 10,
  runSpacing: 10,
  groupingType: GroupingType.wrap,
  direction: Axis.horizontal,
  buttonHeight: 60,
  buttonWidth: 60,
  mainGroupAlignment: MainGroupAlignment.start,
  crossGroupAlignment: CrossGroupAlignment.start,
  groupRunAlignment: GroupRunAlignment.start,
  textAlign: TextAlign.center,
  textPadding: EdgeInsets.zero,
  alignment: Alignment.center,
  elevation: 0,
),

示例项目结构

示例项目的入口文件main.dart如下所示：

import 'package:example/examples/common_example/example.dart';
import 'package:flutter/material.dart';
import 'routes.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GroupButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      routes: Routes.appRoutes,
      home: CommonExample(),
    );
  }
}

更多示例代码可以在GitHub仓库中找到。

希望以上信息能帮助您更好地理解和使用group_button插件！如果您有任何问题或建议，请随时提出。


更多关于Flutter分组按钮插件group_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter分组按钮插件group_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用group_button插件的示例代码。这个插件允许你创建分组按钮，用户可以从一组按钮中选择一个选项。

首先，确保你的pubspec.yaml文件中已经添加了group_button依赖：

dependencies:
  flutter:
    sdk: flutter
  group_button: ^最新版本号 # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个完整的Flutter应用示例，展示如何使用group_button插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Group Button Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedOption = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Group Button Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Option: $selectedOption',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            GroupButton<String>(
              options: [
                'Option 1',
                'Option 2',
                'Option 3',
              ],
              onSelected: (value) {
                setState(() {
                  selectedOption = value;
                });
              },
              selectedValue: selectedOption,
              isRadio: true, // 使用单选按钮
              itemCount: 3, // 按钮数量，通常不需要手动设置，除非有特殊布局需求
              itemBuilder: (context, index, isSelected) {
                return Container(
                  height: 50,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.blue : Colors.grey[300],
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    options[index],
                    style: TextStyle(
                      color: isSelected ? Colors.white : Colors.black,
                      fontSize: 18,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖引入：在pubspec.yaml文件中添加group_button依赖。
  2. 状态管理：在_MyHomePageState中管理选中的选项。
  3. GroupButton：
    • options：按钮选项的列表。
    • onSelected：用户选择选项时的回调函数。
    • selectedValue：当前选中的值。
    • isRadio：设置为true表示单选按钮，如果设置为false则表示多选按钮（需要额外处理多选逻辑）。
    • itemBuilder：自定义每个按钮的样式。在这个例子中，我们为每个按钮设置了高度、对齐方式、装饰（包括颜色和圆角）以及文本样式。

运行这个示例应用，你将看到一个包含三个选项的单选按钮组。当你选择一个选项时，上面的文本将更新为选中的值。

请根据实际需求和插件的文档调整代码和样式。

回到顶部