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

发布于 1周前 作者 phonegap100 来自 Flutter

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

simple_radio_group 是一个简单易用的 Flutter 插件,支持表单验证和控制器。

使用

以下是一个简单的示例,展示了如何在 Flutter 应用程序中使用 simple_radio_group 插件。该插件允许你创建水平或垂直方向的单选按钮组,并且可以设置初始值、验证器等属性。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SimpleRadioGroupExample(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Simple radio group example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text("水平方向"),
            SimpleRadioGroup<String>(
              direction: Axis.horizontal, // 设置为水平方向
              initialValue: "Option 1", // 设置初始值
              validator: (String? option) { // 验证器函数
                if (option == null) {
                  return "请选择一个选项"; // 如果未选择任何选项,则返回错误信息
                }
                return null; // 如果选择了选项,则返回 null
              },
              options: const [ // 可供选择的选项列表
                "Option 1",
                "Option 2",
                "Options 3",
              ],
            ),
            const SizedBox(
              height: 22,
            ),
            const Text("垂直方向"),
            SimpleRadioGroup<String>( // 创建垂直方向的单选按钮组
              direction: Axis.vertical, // 设置为垂直方向
              validator: (String? option) { // 验证器函数
                if (option == null) {
                  return "请选择一个选项"; // 如果未选择任何选项,则返回错误信息
                }
                return null; // 如果选择了选项,则返回 null
              },
              options: const [ // 可供选择的选项列表
                "Option 1",
                "Option 2",
                "Options 3",
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


simple_radio_group 是一个用于在 Flutter 中创建单选按钮组的简单而有效的插件。它允许你轻松地创建一组单选按钮,并在用户选择某个选项时获取所选值。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 simple_radio_group 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  simple_radio_group: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用 simple_radio_group

以下是一个简单的示例,展示了如何使用 simple_radio_group 插件来创建一个单选按钮组,并获取用户选择的值。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioGroupExample(),
    );
  }
}

class RadioGroupExample extends StatefulWidget {
  @override
  _RadioGroupExampleState createState() => _RadioGroupExampleState();
}

class _RadioGroupExampleState extends State<RadioGroupExample> {
  String? selectedValue;

  final List<String> options = ["Option 1", "Option 2", "Option 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Radio Group Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SimpleRadioGroup(
              options: options,
              onSelected: (value) {
                setState(() {
                  selectedValue = value;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 导入插件

    import 'package:simple_radio_group/simple_radio_group.dart';
  2. 定义选项

    final List<String> options = ["Option 1", "Option 2", "Option 3"];
  3. 创建单选按钮组

    SimpleRadioGroup(
      options: options,
      onSelected: (value) {
        setState(() {
          selectedValue = value;
        });
      },
    )
    • options: 单选按钮组的选项列表。
    • onSelected: 当用户选择一个选项时触发的回调函数,value 是用户选择的选项。
  4. 显示选中的值

    Text(
      'Selected Value: $selectedValue',
      style: TextStyle(fontSize: 18),
    )

自定义样式

SimpleRadioGroup 提供了一些属性来自定义单选按钮的样式,例如:

  • activeColor: 选中时的颜色。
  • textStyle: 选项文本的样式。
  • direction: 单选按钮的排列方向(Axis.horizontalAxis.vertical)。

例如:

SimpleRadioGroup(
  options: options,
  onSelected: (value) {
    setState(() {
      selectedValue = value;
    });
  },
  activeColor: Colors.blue,
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  direction: Axis.vertical,
)
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!