用于快速创建按钮组的 Flutter 小部件？

包含带有自定义分组类型的单选按钮和复选框按钮模型？

请给本项目点赞并 star 仓库 以支持项目！

Pub
Star on Github
License: MIT

Pub likes
Pub popularity
Pub points

Image Image Image

入门

请按照以下步骤使用此包

添加依赖

dependencies:
  group_button: ^3.3.1 #latest version

导入包

import 'package:group_button/group_button.dart';

易于使用

GroupButton 的简单使用示例
将此代码放入您项目的一个屏幕中，了解它是如何工作的？

GroupButton(
    isRadio: false,
    spacing: 10,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)

自定义

要自定义 GroupButton 中的按钮，您可以使用以下代码
此代码包含 GroupButton 中使用的所有字段

GroupButton(
    spacing: 5,
    isRadio: false,
    direction: Axis.horizontal,
    onSelected: (index, isSelected) =>
          print('$index button is ${isSelected ? 'selected' : 'unselected'}'),
    buttons: ["Dart","Kotlin","Java","Swift","Objective-C","Python","JS"],
    selectedButtons: [0, 1], /// [List<int>] after 2.2.1 version 
    selectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 16,
        color: Colors.red,
    ),
    unselectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 14,
        color: Colors.grey[600],
    ),
    selectedColor: Colors.white,
    unselectedColor: Colors.grey[300],
    selectedBorderColor: Colors.red,
    unselectedBorderColor: Colors.grey[500],
    borderRadius: BorderRadius.circular(5.0),
    selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
    unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
)

示例

您可以在 这里 查看更多使用此包的示例

属性

属性 说明
buttons [String] 列表，将在 [GroupButton] 的按钮上显示
selectedButtons [List] 当 [isRadio] 为 false 时，将在 [GroupButton] 中初始设置选定的按钮
selectedButton [int] 当 [isRadio] 为 true 时，将在 [GroupButton] 中初始设置选定的按钮
onSelected 回调 [Function]，通过点击组元素来工作
如果 [isRadio] = false，则返回选定按钮的 int [index] 和 [isSelected]
isRadio 用于在 [ChackBox] 和 [Radio] 模式之间切换的布尔变量
如果 [isRadio] = true，则只能选择一个按钮
如果 [isRadio] = false，您可以选择多个按钮
direction [GroupButton] 中按钮的排列方向
spacing [GroupButton] 中按钮之间的间距
runSpacing 当 [groupingType] 为 [GroupingType.wrap] 时，此字段设置 Wrap [runSpacing]
selectedTextStyle 选定按钮的文本 [TextStyle]
unselectedTextStyle 未选定按钮的文本 [TextStyle]
selectedColor 选定按钮的背景 [Color]
unselectedColor 未选定按钮的背景 [Color]
selectedBorderColor 选定按钮的边框 [Color]
unselectedBorderColor 未选定按钮的边框 [Color]
borderRadius [BorderRadius] 按钮
按钮的圆角程度
selectedShadow 选定按钮的 [BoxShadow] 列表
unselectedShadow 未选定按钮的 [BoxShadow] 列表
groupingType 该字段负责按钮如何分组 [GroupingType]
mainGroupAlignment 在布局的主轴上如何放置按钮 [MainGroupAlignment]
crossGroupAlignment 在布局的交叉轴上如何放置按钮 [CrossGroupAlignment]
groupRunAlignment 在布局中，按钮运行本身应如何放置在交叉轴上 [GroupRunAlignment]
textAlign [GroupButton] 中按钮的文本对齐方式
textPadding [GroupButton] 的内部内边距
alignment [AlignmentGeometry] 当定义了 [buttonWidth] 或 [buttonHeight] 时，按钮内的文本位置
elevation [double] 按钮的阴影
disabledButtons [int] 被禁用的按钮 ID

感谢本包的所有贡献者

要开始使用 Flutter，请参阅
在线文档，其中提供教程，
示例、移动开发指南和完整的 API 参考。

GitHub

查看 Github