在移动应用开发中,单选和复选是常见的用户交互模式,用于选择一个或多个选项。Flutter提供了一些内置的组件和机制,方便我们实现单选和复选功能。本文将介绍Flutter中的单选按钮(RadioButton)和复选框(Checkbox)的使用方法和示例。
单选
单选按钮(RadioButton)
单选按钮是一种用户界面组件,用于在多个选项中选择一个选项。在Flutter中,我们可以使用Radio和RadioListTile来创建单选按钮。
Radio组件需要与RadioGroup一起使用,以便在一组选项中实现单选功能。以下是一个使用Radio和RadioGroup的示例:
示例代码
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: RadioPage(),
));
}
class RadioPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Radio Page'),
),
body: Center(
child: MyRadioGroup(),
),
);
}
}
class MyRadioGroup extends StatefulWidget {
@override
_MyRadioGroupState createState() => _MyRadioGroupState();
}
class _MyRadioGroupState extends State<MyRadioGroup> {
int _selectedValue = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
RadioListTile(
title: Text('Option 1'),
value: 1,
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value as int;
});
},
),
RadioListTile(
title: Text('Option 2'),
value: 2,
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value as int;
});
},
),
],
);
}
}
在上面的示例中,我们创建了一个名为MyRadioGroup的有状态(stateful)小部件。通过使用RadioListTile,我们为每个选项创建了一个单选按钮,并使用groupValue属性指定当前选中的值。onChanged回调函数在选择改变时被调用,通过调用setState来更新选择的值。
复选框
Flutter复选框(Checkbox)
Flutter的复选框是一种用户界面组件,用于允许用户选择多个选项,可以同时选择或取消选择多个选项。复选框通常以一个方框和一个选中状态的标记符号呈现,用户可以通过点击复选框来切换选项的选择状态。
示例代码
以下是一个完整的能够运行的Flutter复选框的示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: CheckboxPage(),
));
}
class CheckboxPage extends StatefulWidget {
@override
_CheckboxPageState createState() => _CheckboxPageState();
}
class _CheckboxPageState extends State<CheckboxPage> {
List<bool> _selectedValues = [false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Checkbox Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CheckboxListTile(
title: Text('Option 1'),
value: _selectedValues[0],
onChanged: (value) {
setState(() {
_selectedValues[0] = value!;
});
},
),
CheckboxListTile(
title: Text('Option 2'),
value: _selectedValues[1],
onChanged: (value) {
setState(() {
_selectedValues[1] = value!;
});
},
),
CheckboxListTile(
title: Text('Option 3'),
value: _selectedValues[2],
onChanged: (value) {
setState(() {
_selectedValues[2] = value!;
});
},
),
],
),
);
}
}
在上面的示例中,我们创建了一个名为CheckboxPage的有状态(stateful)小部件。该页面包含了三个复选框,用于选择不同的选项。复选框的选择状态通过_selectedValues列表进行控制,并在状态改变时使用setState进行更新。
我们使用CheckboxListTile组件创建了复选框,并在每个复选框中设置了标题和初始的选中状态。onChanged回调函数在复选框状态改变时被调用,并通过setState更新选择的状态。
运行这个示例,您将看到三个复选框在页面上显示,并且可以通过点击复选框来切换它们的选中状态。
Flutter单选开关(Switch)
Flutter的单选开关(Switch)是一种用户界面组件,用于在两个选项之间进行单选选择,表示开关的状态为打开或关闭。单选开关通常以滑动开关的形式呈现,用户可以通过滑动或点击来改变其状态。
示例代码
以下是一个完整的能够运行的Flutter单选开关的示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: SwitchPage(),
));
}
class SwitchPage extends StatefulWidget {
@override
_SwitchPageState createState() => _SwitchPageState();
}
class _SwitchPageState extends State<SwitchPage> {
bool _isSwitched = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Switch(
value: _isSwitched,
onChanged: (value) {
setState(() {
_isSwitched = value;
});
},
),
Text(
_isSwitched ? 'Switch is ON' : 'Switch is OFF',
style: TextStyle(fontSize: 18.0),
),
],
),
),
);
}
}
在上面的示例中,我们创建了一个名为SwitchPage的有状态(stateful)小部件。该页面包含一个Switch组件和一个文本组件,用于显示开关的状态。开关的状态通过_isSwitched变量进行控制,并在状态改变时使用setState进行更新。
在Switch组件中,我们使用value属性指定当前的开关状态,onChanged回调函数在开关状态改变时被调用,并通过setState更新开关的值。