Flutter单选按钮组插件radio_grouped

Flutter单选按钮组插件radio_grouped_buttons的使用

插件介绍

radio_grouped_buttons 是一个专门设计用于在网格布局中显示分组单选按钮的Flutter插件。你可以通过其所有属性对其进行定制。你可以根据需要创建水平或垂直排列的单选按钮组。按钮宽度、高度、间距、颜色等都可以自定义。

安装插件

dependencies:
  radio_grouped_buttons: 1.0.1

创建单选按钮

确保父容器带有宽度和高度的边界，例如 Container。默认情况下，初始选择值是提供的按钮值列表中的第一个值。但你可以通过 initialSelection 属性来自定义初始选择值。

所有属性

CustomRadioButton({
  this.buttonLabels,
  this.buttonValues,
  this.radioButtonValue,
  this.buttonWidth,
  this.buttonColor,
  this.selectedColor,
  this.buttonHeight,
  this.horizontal,
  this.enableShape,
  this.elevation,
  this.customShape,
  this.fontSize,
  this.lineSpace,
  this.buttonSpace,
  this.buttonBorderColor,
  this.textColor,
  this.selectedTextColor,
  this.initialSelection,
  this.unselectedButtonBorderColor
})

创建水平单选按钮列表

当超出容器宽度时，它会自动添加到下一行。

Container(
  padding: EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width,
  height: 160,
  child: CustomRadioButton(
    buttonLabels: buttonList,
    buttonValues: buttonList,
    radioButtonValue: (value, index) {
      print("Button value $value");
      print("Integer value $index");
    },
    horizontal: true,
    enableShape: true,
    buttonSpace: 5,
    buttonColor: Colors.white,
    selectedColor: Colors.cyan,
  ),
)

创建垂直单选按钮列表

当超出容器宽度在一个行内时，它会自动添加到新列。

Container(
  padding: EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width,
  height: 2250,
  child: CustomRadioButton(
    buttonLabels: buttonList,
    buttonValues: buttonList,
    radioButtonValue: (value, index) {
      print("Button value $value");
      print("Integer value $index");
    },
    enableShape: true,
    buttonSpace: 5,
    buttonColor: Colors.white,
    selectedColor: Colors.cyan,
  ),
)

创建等宽垂直单选按钮列表

如果想要创建等宽的按钮，可以使用 buttonWidth 和 buttonHeight 属性。

Container(
  padding: EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width,
  height: 2250,
  child: CustomRadioButton(
    buttonLabels: buttonList,
    buttonValues: buttonList,
    radioButtonValue: (value, index) {
      print("Button value $value");
      print("Integer value $index");
    },
    enableShape: true,
    buttonSpace: 5,
    buttonColor: Colors.white,
    selectedColor: Colors.cyan,
    buttonWidth: 150,
  ),
)

创建等宽水平单选按钮列表

创建等宽的水平单选按钮列表。

Container(
  padding: EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width,
  height: 2250,
  child: CustomRadioButton(
    buttonLabels: buttonList,
    buttonValues: buttonList,
    radioButtonValue: (value, index) {
      print("Button value $value");
      print("Integer value $index");
    },
    horizontal: true,
    enableShape: true,
    buttonSpace: 5,
    buttonColor: Colors.white,
    selectedColor: Colors.cyan,
    buttonWidth: 150,
  ),
)

设置初始选择值为第三个按钮

我们可以设置任何索引的初始选择按钮。但是当我们处理数组时，我们需要将初始选择值设置为 index(我们的按钮索引)-1。例如，如果我们需要将第三个按钮设置为初始选择按钮，那么对于数组来说，我们的按钮值应该是 2。

Container(
  padding: EdgeInsets.all(10),
  width: MediaQuery.of(context).size.width,
  height: 2250,
  child: CustomRadioButton(
    buttonLabels: buttonList,
    buttonValues: buttonList,
    radioButtonValue: (value, index) {
      print("Button value $value");
      print("Integer value $index");
    },
    horizontal: true,
    enableShape: true,
    buttonSpace: 5,
    initialSelection: 2,
    buttonColor: Colors.white,
    selectedColor: Colors.cyan,
    buttonWidth: 150,
  ),
)

示例代码

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

phonegap100 1楼•7 天前

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

当然，以下是一个使用 radio_grouped_buttons 插件在 Flutter 中创建单选按钮组的示例代码。这个插件可以让你更方便地管理一组单选按钮。

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

dependencies:
  flutter:
    sdk: flutter
  radio_grouped_buttons: ^x.x.x  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Radio Grouped Buttons Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RadioGroupedButtons<String>(
            onSelectedChanged: (String? value) {
              print('Selected: $value');
            },
            orientation: GroupedButtonsOrientation.VERTICAL, // 或者 HORIZONTAL
            items: [
              RadioGroupedButtonItem<String>(
                value: 'Option 1',
                title: Text('Option 1'),
              ),
              RadioGroupedButtonItem<String>(
                value: 'Option 2',
                title: Text('Option 2'),
              ),
              RadioGroupedButtonItem<String>(
                value: 'Option 3',
                title: Text('Option 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释：

导入必要的包：

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

创建主应用：
```
void main() {
  runApp(MyApp());
}
```

定义 MyApp 小部件：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Radio Grouped Buttons Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RadioGroupedButtons<String>(
            // 定义当选中项改变时的回调函数
            onSelectedChanged: (String? value) {
              print('Selected: $value');
            },
            // 定义单选按钮组的排列方向
            orientation: GroupedButtonsOrientation.VERTICAL, // 或者 HORIZONTAL
            // 定义单选按钮项
            items: [
              RadioGroupedButtonItem<String>(
                value: 'Option 1',
                title: Text('Option 1'),
              ),
              RadioGroupedButtonItem<String>(
                value: 'Option 2',
                title: Text('Option 2'),
              ),
              RadioGroupedButtonItem<String>(
                value: 'Option 3',
                title: Text('Option 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

功能说明：

RadioGroupedButtons<String>：泛型 String 表示单选按钮的值类型。
onSelectedChanged：当选中项改变时调用的回调函数，返回当前选中的值。
orientation：定义单选按钮的排列方向，可以是垂直 (VERTICAL) 或水平 (HORIZONTAL)。
items：包含 RadioGroupedButtonItem 的列表，每个项代表一个单选按钮。

这个示例展示了如何使用 radio_grouped_buttons 插件在 Flutter 应用中创建和管理一组单选按钮。你可以根据需要进一步自定义和扩展这个示例。