【Android】flutter如何创建单选按钮解析

收集用户数据时经常遇到的一个挑战是格式化答案选择，以便问题的说明对用户来说是隐含的。单选按钮是一个图形 UI 元素，它显示了相互排斥的答案选项的预定义列表，通过其设计解决了问题。

单选按钮通常简短且易于浏览，这使它们成为移动应用程序的绝佳选择。在 Flutter 中，默认的单选按钮不保持任何状态。相反，它在onChange每次选择一个选项时调用回调函数。

在本文中，我们将使用 Flutter 的内置方法构建一个简单的单选按钮，然后构建我们自己的 Flutter 小部件来自定义单选按钮。

入门

首先，我们将建立一个新的 Flutter 项目。导航到您的工作目录，然后复制并粘贴以下代码：

flutter create radio_button_app 

初始化完成后，打开您的 Android 模拟器或 iOS 模拟器。导航到stripe_app文件夹并使用以下命令运行应用程序：

cd radio_button_app && flutter run 

您的应用应该类似于下面的屏幕截图，表明您的应用安装成功：

在 Flutter 中构建一个单选按钮

首先，让我们使用 Flutter Material Components 小部件构建一个单选按钮。通过将以下代码添加到main.dart文件顶部来导入包：

import 'package:flutter/material.dart'; 

创建无状态小部件

接下来，我们需要创建一个无状态小部件，它是不可变的，允许我们在其上构建其他应用程序。让我们创建一个名为 的无状态小部件MyApp，它将充当根小部件并保存我们应用程序的脚手架。将下面的代码添加到main.dart：

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  static const String _title = 'Radio buttons';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.black, 
        accentColor: Colors.black,
        ),
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
} 

在上面的代码中，我们将MyApp小部件传递给runApp函数，使其成为小部件树的根：

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

该MyApp部件不持有任何状态。因此，要构建像单选按钮这样的可变或有状态小部件的组件，我们需要创建一个有状态小部件并将其作为子部件传递给根小部件：

child: MyStatefulWidget(), 

创建一个有状态的小部件

接下来，让我们添加MyStatefulWidget通过添加以下代码来创建main.dart：

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
} 

MyStatefulWidget取决于由createState立即调用的函数 (IIF)触发的私有状态。因此，MyStatefulWidget调用_MyStatefulWidgetState私有状态。

要建立_MyStatefulWidgetState私有状态，让我们将以下代码添加到我们的main.dart文件中：

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Pet _pet = Pet.dog;

  @override
  Widget build(BuildContext context) {

    return Column(

      children: <Widget>[
        ListTile(
          title: const Text('Dog'),
          leading: Radio<Pet>(
            fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
            focusColor: MaterialStateColor.resolveWith