单选按钮也称为选项按钮,其中包含布尔值。它允许用户从一组预定义的选项中仅选择一个选项。此功能使其与复选框不同,在复选框中,无涯教程可以选择多个选项并还原未选择的状态。
在本节中,无涯教程将解释如何在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; }); }, ), ), ], ); } }
当无涯教程运行应用程序时,会出现以下输出。在这里,无涯教程有三个单选按钮,默认情况下只选择一个。无涯教程还可以选择任何其他选项。
链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-radio-button.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)