Flutter单选组件插件flutter_radio_group的使用

flutter_radio_group 是一个用于Flutter的简单且美观的单选组控件，支持自定义标签、标题、标签样式、标题样式、方向等，并能维护 onChanged 状态。

Getting Started

首先，在您的Flutter项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_radio_group: "^latest_version"

然后导入包：

import 'package:flutter_radio_group/flutter_radio_group.dart';

确保替换 "^latest_version" 为实际的最新版本号。

Demo

使用示例

下面是一个简单的例子，展示了如何创建水平排列的单选按钮组：

var _listHorizontal = ["Horizontal 1", "Horizontal 2", "Horizontal 3"];
var _indexHorizontal = 0;

FlutterRadioGroup(
    titles: _listHorizontal,
    labelStyle: TextStyle(color: Colors.white38),
    labelVisible: true,
    label: "This is label radio",
    activeColor: Colors.blue,
    titleStyle: TextStyle(fontSize: 14),
    defaultSelected: _indexHorizontal,
    orientation: RGOrientation.HORIZONTAL,
    onChanged: (index) {
      setState(() {
        _indexHorizontal = index;
      });
    }),

编程选择索引

如果您需要编程方式更改选中的索引，可以使用 GlobalKey：

var _key = GlobalKey<RadioGroupState>();

/// 更新选中的单选按钮
_key.currentState.setIndexSelected(3);

FlutterRadioGroup(
    key: _key,
    titles: _listHorizontal,
    labelStyle: TextStyle(color: Colors.white38),
    labelVisible: true,
    label: "This is label radio",
    activeColor: Colors.blue,
    titleStyle: TextStyle(fontSize: 14),
    defaultSelected: _indexHorizontal,
    orientation: RGOrientation.HORIZONTAL,
    onChanged: (index) {
      setState(() {
        _listHorizontal = index;
      });
    }),

完整示例代码

这里提供了一个更完整的示例代码，包括垂直和水平布局的单选按钮组：

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _listHorizontal = ["Horizontal 1", "Horizontal 2", "Horizontal 3"];
  var _listVertical = ["Vertical 1", "Vertical 2", "Vertical 3"];

  var _keyVertical = GlobalKey<FlutterRadioGroupState>();
  var _keyHorizontal = GlobalKey<FlutterRadioGroupState>();

  var _indexHorizontal = 0;
  var _indexVertical = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Plugin example app')),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  "Vertical -> index selected $_indexVertical - ${_listVertical[_indexVertical]}",
                  style: TextStyle(fontSize: 16),
                ),
                FlutterRadioGroup(
                    key: _keyVertical,
                    titles: _listVertical,
                    defaultSelected: _indexVertical,
                    onChanged: (index) {
                      setState(() {
                        _indexVertical = index;
                      });
                    }),
                ElevatedButton(
                    onPressed: () {
                      _keyVertical.currentState.setIndexSelected(2);
                      setState(() {
                        _indexVertical = 2;
                      });
                    },
                    child: Text("Select index 2")),
                Divider(height: 32),
                Text(
                  "Horizontal -> index selected $_indexHorizontal - ${_listHorizontal[_indexHorizontal]}",
                  style: TextStyle(fontSize: 16),
                ),
                SizedBox(height: 16),
                FlutterRadioGroup(
                    key: _keyHorizontal,
                    titles: _listHorizontal,
                    labelStyle: TextStyle(color: Colors.pink),
                    defaultSelected: _indexHorizontal,
                    label: "Label Horizontal",
                    orientation: RGOrientation.HORIZONTAL,
                    onChanged: (index) {
                      setState(() {
                        _indexHorizontal = index;
                      });
                    }),
                ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.amber)
                    ),
                    onPressed: () {
                      _keyHorizontal.currentState.setIndexSelected(1);
                      setState(() {
                        _indexHorizontal = 1;
                      });
                    },
                    child: Text("Select index 1")),
              ],
            ),
          ),
        ),
      ),
    );
  }
}