分组按钮

Flutter 自定义小部件，用于创建按钮组。

包含单选按钮和复选框按钮模型。

group_button

入门

请按照以下步骤使用此包

添加依赖

dependencies:
  group_button: ^2.4.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)],
)

示例

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

属性

属性 说明
按钮 [String] 列表，将显示在[GroupButton]的按钮上。
选中的按钮 [List] 当[isRadio]为false时，将在[GroupButton]中初始设置选中的按钮。
选中的按钮 [int] 当[isRadio]为true时，将在[GroupButton]中初始设置选中的按钮。
onSelected 回调 [Function] 通过点击组元素工作。返回选中的按钮的 [index] 和 [isSelected]（如果[isRadio] = false）。
是否为单选 [bool] 变量，用于在[复选框]和[单选]模式之间切换。如果[isRadio] = true，则只能选择一个按钮；如果[isRadio] = false，则可以选择多个。
direction [GroupButton]中按钮的排列方向。
spacing [GroupButton]中按钮之间的间距。
selectedTextStyle 选中按钮的[TextStyle]。
未选中文本样式 未选中按钮的[TextStyle]。
selectedColor 选中按钮的[Color]背景。
unselectedColor 未选中按钮的[Color]背景。
选中的边框颜色 选中按钮的[Color]边框。
未选中的边框颜色 未选中按钮的[Color]边框。
borderRadius 按钮的[BorderRadius]。按钮的圆角程度。
选中的阴影 选中按钮的[BoxShadow]列表。
未选中的阴影 未选中按钮的[BoxShadow]列表。
主分组对齐 按钮在布局的主轴上应如何放置[MainGroupAlignment]。
交叉分组对齐 按钮应如何沿布局的交叉轴放置[CrossGroupAlignment]。
分组运行对齐 按钮行应如何放置在布局的交叉轴上[GroupRunAlignment]。

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

GitHub

https://github.com/Frezyx/group_button