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

作者: BlueSocks | 来源:发表于2023-02-13 10:22 被阅读0次

【Android】flutter如何创建单选按钮解析
RadioGroup
Flutter 入门
Flutter 单选按钮Radio和RadioListTitle
flutter单选按钮radio
Flutter创建、编译到运行
Android 修改RadioButton圆圈颜色
Android 单选队列 RadioGroup与RadioBut
HTML中的单选按钮问题（一）
Uinty的uGUI学习(07):Toggle(单多选)、sli

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

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

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

入门

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

flutter create radio_button_app

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

cd radio_button_app && flutter run

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

新的 Flutter App 安装成功

在 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((states) => Colors.green),
            value: Pet.dog,
            groupValue: _pet,
            onChanged: (Pet value) {
              setState(() {
                _pet = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('Cart'),
          leading: Radio<Pet>(
            fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
            value: Pet.cat,
            groupValue: _pet,
            onChanged: (Pet value) {
              setState(() {
                _pet = value;
              });
            },
          ),
        ),
      ],
    );
  }
}

在本例中，我们将创建一个简单的单选按钮，要求用户在猫或狗之间进行选择。首先，我们设置Petto的值Pet.dog，它是在的全局上下文中声明的枚举main.dart：

enum Pet { dog, cat }

main.dart只要可通过全局上下文访问，您就可以在任何地方添加枚举值的代码。

每个单选按钮都是用ListTile材料类构建的，允许文本、图标和按钮的组合。

每个选定选项的值传递给groupValue，由 MyStatefulWidget维护。

本节的完整代码如下：

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
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(),
        ),
      ),
    );
  }
}
enum Pet { dog, cat }
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
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>(
            value: Pet.dog,
            groupValue: _pet,
            onChanged: (Pet value) {
              setState(() {
                _pet = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('Cart'),
          leading: Radio<Pet>(
            value: Pet.cat,
            groupValue: _pet,
            onChanged: (Pet value) {
              setState(() {
                _pet = value;
              });
            },
          ),
        ),
      ],
    );
  }
}

样式化单选按钮

现在我们已经在 Flutter 中完成了我们的单选按钮的构建，我们可以使用activeColor, focusColor, fillColor, 和等样式属性来改变它的外观hoverColor`。

让我们ListTile用Start copy和之间的代码更新我们的两个组件End copy：

ListTile(
          title: const Text('Dog'),
          leading: Radio<Pet>(
//Start copy
            fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
            focusColor: MaterialStateColor.resolveWith((states) => Colors.green),
// End copy
            value: Pet.dog,
            groupValue: _pet,
            onChanged: (Pet value) {
              setState(() {
                _pet = value;
              });
            },
          ),
        ),

在 Flutter 中自定义单选按钮

尽管它很实用，但根据您正在构建的应用程序类型，默认单选按钮可能对您的需求来说太简单了。现在我们知道如何使用默认的 Flutter 单选小部件构建单选按钮，让我们为更高级的用例构建我们自己的自定义单选按钮。

首先，让我们创建自己的小部件，名为CustomRadioButton：

int value = 0;
Widget CustomRadioButton(String text, int index){
      return OutlineButton(onPressed: (){
        setState(() {
          value = index;
        });
      },
      child: Text(
        text,
        style: TextStyle(
          color: (value == index) ? Colors.green  : Colors.black,
        ),
      ),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      borderSide: BorderSide(color: (value == index) ? Colors.green  : Colors.black),
      );
  }

在上面的代码中，我们使用构建我们的单选按钮OutlineButton，类似于我们ListStyle在上一节中的使用方式。

该CustomRadioButton部件有两个参数，text和index。text是收音机的名称，而index包含当前选择的收音机的索引号。

当用户选择一个按钮时，value的index将基于设置的值被更新CustomRadioButton，从而使Radio一个新的状态的按钮重新呈现。

让我们构建一个单选按钮，要求用户在单身、已婚或其他之间进行选择：

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
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(),
        ),
      ),
    );
  }
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int value = 0;
  Widget CustomRadioButton(String text, int index) {
    return OutlineButton(
      onPressed: () {
        setState(() {
          value = index;
        });
      },
      child: Text(
        text,
        style: TextStyle(
          color: (value == index) ? Colors.green : Colors.black,
        ),
      ),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      borderSide:
          BorderSide(color: (value == index) ? Colors.green : Colors.black),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CustomRadioButton("Single", 1),
        CustomRadioButton("Married", 2),
        CustomRadioButton("Other", 3)
      ],
    );
  }
}

上面代码的输出应该类似于下面的屏幕截图：

最终单选按钮输出抖动

结论

单选按钮因其简单性和有效性而成为流行的 UI 元素，尤其是在移动应用程序中。在本教程中，我们使用默认的 Flutter 单选按钮小部件构建了一个简单的单选按钮，并且我们构建了自己的小部件来自定义和设置复杂单选按钮的样式。我希望你喜欢这个教程！

作者：坚果

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

一、面试合集

image 二、源码解析合集

image 三、开源框架合集

image

私信获取文中籽料~

【Android】flutter如何创建单选按钮解析
收集用户数据时经常遇到的一个挑战是格式化答案选择，以便问题的说明对用户来说是隐含的。单选按钮是一个图形 UI 元素...
RadioGroup
android studio 如何实现RadioBotto和RadioGroup来实现单选按钮的选择
Flutter 入门
一、如何创建Flutter项目 1.通过Android Studio 创建 2.通过flutter命令创建 flu...
Flutter 单选按钮Radio和RadioListTitle
Flutter 单选按钮组件有两种 1、Radio 单选按钮，一般用来表现一些简单的信息常用属性：value：单...
flutter单选按钮radio
Flutter创建、编译到运行
创建一个Flutter工程利用android studio创建 Android Studio安装Flutter插...
Android 修改RadioButton圆圈颜色
参考 Android如何更改单选按钮的圆形颜色只需设置buttonTint颜色:(仅适用于api level 2...
Android 单选队列 RadioGroup与RadioBut
RadioButton(单选按钮)在Android开发中应用的非常广泛，比如一些选择项的时候，会用到单选按钮。它是...
HTML中的单选按钮问题（一）
1.如何修改单选按钮的css样式 2. 如何只选中众多按钮中的一个按钮 3. jquery中关于单选按钮的一些操作...
Uinty的uGUI学习(07):Toggle(单多选)、sli
一、uGUI - Toggle(单选、多选按钮) 1.checkbox_radio 多选_单选 2.创建多个Tog...