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

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

在Flutter中，使用mu_radio_group插件可以轻松创建一个单选按钮组。以下是一个简单的示例来展示如何使用这个插件。

示例代码

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

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^3.0.1

然后，你可以使用以下代码来创建一个包含单选按钮组的界面：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用MURadioGroup创建单选按钮组
          MURadioGroup(
            // 提示文本
            hintext: "性别",
            // 可选项列表
            elements: const ["男", "女"],
            // 选择变化时的回调函数
            onChanged: (index) {
              print("Selected index: $index");
            },
            // 提示文本样式
            hintextStyle: GoogleFonts.urbanist(
              color: const Color(0xFF9E9E9E),
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
            // 选中时的颜色
            onTapColor: const Color(0xFFF27A1A),
            // 未选中时的颜色
            onNonTapColor: const Color(0xFFD1D1D1),
            // 单选按钮的圆角大小
            radiusSize: 24,
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


mu_radio_group 是一个 Flutter 插件，用于创建单选按钮组。它允许用户从一组选项中选择一个选项。以下是如何使用 mu_radio_group 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 mu_radio_group 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mu_radio_group: ^1.0.0  # 请确保使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 mu_radio_group 包：

import 'package:mu_radio_group/mu_radio_group.dart';

3. 创建单选按钮组

使用 MuRadioGroup 小部件来创建单选按钮组。你需要提供一个选项列表，并为每个选项指定一个值和一个标签。

class MyRadioGroup extends StatefulWidget {
  @override
  _MyRadioGroupState createState() => _MyRadioGroupState();
}

class _MyRadioGroupState extends State<MyRadioGroup> {
  String? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MuRadioGroup Example'),
      ),
      body: Center(
        child: MuRadioGroup<String>(
          options: [
            MuRadioOption(value: 'option1', label: 'Option 1'),
            MuRadioOption(value: 'option2', label: 'Option 2'),
            MuRadioOption(value: 'option3', label: 'Option 3'),
          ],
          onChanged: (value) {
            setState(() {
              _selectedValue = value;
            });
          },
          selectedValue: _selectedValue,
        ),
      ),
    );
  }
}

4. 处理选择事件

MuRadioGroup 提供了一个 onChanged 回调函数，当用户选择一个选项时，这个函数会被调用。你可以在 onChanged 中更新状态以反映当前选中的值。

5. 自定义样式

MuRadioGroup 允许你自定义单选按钮的样式。你可以通过 radioBuilder 属性来自定义单选按钮的外观。

MuRadioGroup<String>(
  options: [
    MuRadioOption(value: 'option1', label: 'Option 1'),
    MuRadioOption(value: 'option2', label: 'Option 2'),
    MuRadioOption(value: 'option3', label: 'Option 3'),
  ],
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
  selectedValue: _selectedValue,
  radioBuilder: (BuildContext context, bool isSelected, MuRadioOption option) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: isSelected ? Colors.blue : Colors.grey[200],
        borderRadius: BorderRadius.circular(4.0),
      ),
      child: Text(
        option.label,
        style: TextStyle(
          color: isSelected ? Colors.white : Colors.black,
        ),
      ),
    );
  },
);
回到顶部