关注我们

Flutter - Radio

单选按钮也称为选项按钮，其中包含布尔值。它允许用户从一组预定义的选项中仅选择一个选项。此功能使其与复选框不同，在复选框中，无涯教程可以选择多个选项并还原未选择的状态。

在本节中，无涯教程将解释如何在Flutter中使用单选按钮。 Flutter允许无涯教程在“ Radio”，“ RadioListTile”或“ ListTitle”小部件的帮助下使用单选按钮。

Flutter单选按钮本身不会保持任何状态。当无涯教程选择任何单选选项时，它将调用onChanged回调并将值作为参数传递。如果value和groupValue匹配，则将选择单选选项。

让无涯教程看看如何通过以下步骤在Flutter应用中创建单选按钮：

步骤1:在IDE中创建Flutter项目。在这里，无涯教程将使用Android Studio。

步骤2:在Android Studio中打开项目，然后导航到lib文件夹。在此文件夹中，打开main.dart文件并创建RadioButtonWidget类（此处：MyStatefulWidget）。接下来，无涯教程将创建Column小部件，并放置三个RadioListTile组件。 ListTitle包含以下属性：

groupValue - 用于为单选按钮组指定当前选择的项目。

title - 用于指定单选按钮标签。

value - 它指定值，由单选按钮表示。

onchanged - 每当用户选择单选按钮时，它将被调用。

复制代码

ListTile(
  title: const Text('www.learnfk.com'),
  leading: Radio(
    value: BestTutorSite.learnfk,
    groupValue: _site,
    onChanged: (BestTutorSite value) {
      setState(() {
        _site = value;
      });
    },
  ),
),

让无涯教程查看上述步骤的完整代码。打开 main.dart 文件并替换以下代码。

在这里，包装在ListTiles中的Radio小部件和当前选定的文本将传递到groupValue中，并由示例的State维护。在这里，第一个单选按钮将被选中，因为_site已初始化为BestTutorSite.javatpoint。如果按下第二个单选按钮，则示例的状态将用setState更新，将_site更新为BestTutorSite.w3schools。它使用更新的groupValue重建按钮，因此将选择第二个按钮。

复制代码

import 'package:flutter/material.dart';

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

/// 这个小部件是主要的应用小部件。
class MyApp extends StatelessWidget {
  static const String _title = 'Radio Button Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

enum BestTutorSite { learnfk, w3schools, tutorialandexample }

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  BestTutorSite _site = BestTutorSite.learnfk;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          title: const Text('www.learnfk.com'),
          leading: Radio(
            value: BestTutorSite.learnfk,
            groupValue: _site,
            onChanged: (BestTutorSite value) {
              setState(() {
                _site = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('www.w3school.com'),
          leading: Radio(
            value: BestTutorSite.w3schools,
            groupValue: _site,
            onChanged: (BestTutorSite value) {
              setState(() {
                _site = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('www.tutorialandexample.com'),
          leading: Radio(
            value: BestTutorSite.tutorialandexample,
            groupValue: _site,
            onChanged: (BestTutorSite value) {
              setState(() {
                _site = value;
              });
            },
          ),
        ),
      ],
    );
  }
}