Flutter 自定义单选按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMekK9tV-1629764513963)(https://ducafecat.tech/2021/08/24/translation/exploring-custom-radio-button-in-flutter/2021-08-24-07-49-36.png)]

原文

https://medium.com/flutterdevs/exploring-custom-radio-button-in-flutter-4a93a7892185

正文

了解如何创建一个自定义单选按钮在您的 Flutter 应用程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-voV9OgD5-1629764513963)(https://ducafecat.tech/2021/08/24/translation/exploring-custom-radio-button-in-flutter/2021-08-24-07-36-53.png)]

单选按钮则称为选择按钮，它保存布尔值。它允许客户从一组预定义的选择中选择一个选择。这个组件使它不完全相同于一个复选框，我们可以选择一个以上的替代和未选择的状态重新建立。我们可以组织至少两个单选按钮的集合，并在屏幕上显示为带有白色区域的圆形孔用于未选择或圆点用于选择。

我们同样可以给每个相关的单选按钮一个标签，描绘单选按钮地址的决定。一个单选按钮可以选择通过点击鼠标在圆形孔或利用控制台备用方式。

在这个博客，我们将探索自定义 Flutter 单选按钮。我们将看到如何实现一个自定义单选按钮演示程序，以及如何在您的颤振应用程序创建。

简介

Flutter 允许我们利用 Radio 小部件制作单选按钮。用这个小部件制作的单选按钮由一个空白的外部圆和一个强内部圆组成，最后一个按钮显示在选择状态。时不时地，你可能需要制作一个 radio gathering，其替代方案利用自定义设计，而不是传统的 radio gathering 。本文举例说明了如何使用定制 catches 进行 radio gathering。

Demo Module :

演示模块:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXSHdaAM-1629764513964)(https://ducafecat.tech/2021/08/24/translation/exploring-custom-radio-button-in-flutter/demo.gif)]

这个演示视频显示了如何创建一个自定义单选按钮在 Flutter。它显示了如何自定义单选按钮将工作在您的 Flutter 应用程序。它展示了当用户点击按钮时，单选组将如何使用自定义按钮。动画的。它会显示在你的设备上。

如何实现 dart 文件中的代码:

你需要分别在你的代码中实现它:

在 lib 文件夹中创建一个名为 radio_opton.dart 的新 dart 文件。

因为单选按钮包含一个标签，所以我们不能使用单选按钮。综上所述，我们将创建一个自定义类，它可以用于做出称为 MyRadioOption 的选择。受 Flutter 的 Radio 小部件的激励，该类具有 value、 groupValue 和 onChanged 属性。该属性的价值解决了替代品的价值，在类似群体的所有选择中，它应该是非同寻常的。

groupValue 属性是当前选定的值。如果选项值与 groupvalue 匹配，则该选项处于选定状态。onChanged 属性存储当用户选择一个选项时将调用的回调函数。当用户选择一个选项时，回调函数负责更新 gro