文章目录
一、单选开关（Switch）
1. 属性
const Switch({
Key key,
@required this.value, // 必选属性，即按钮当前的状态是选中还是不选中，值为true 或者false
@required this.onChanged, // 必选属性，当按钮改变状态时，代码的执行逻辑
this.activeColor, // 显示的是按钮的颜色
this.activeTrackColor, //显示的是按钮里面的颜色
this.inactiveThumbColor,
this.inactiveTrackColor,
this.activeThumbImage,
this.inactiveThumbImage,
this.materialTapTargetSize,
this.dragStartBehavior = DragStartBehavior.start,
})
2. 单选开关
Switch(
value: _switchSelected,//当前状态
onChanged:(value){
//重新构建页面
setState(() {
_switchSelected = value;
});
},
),
3. IOS 风格的单选开关
CupertinoSwitch(
value: _switchSelected,
onChanged: (value) {
},
),
4. SwitchListTile
SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件
SwitchListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: _switchSelected,
onChanged: (bool value) {
setState(() {
_switchSelected = !_switchSelected;
});
},
),
5. 完整代码
1. 效果图
2. 完整代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('单选开关（Switch）'),
),
body: Center(
child: SwitchStatefulWidget(),
)
)
);
}
}
class SwitchStatefulWidget extends StatefulWidget {
const SwitchStatefulWidget({
Key? key}) : super(key: key);
@override
State<SwitchStatefulWidget> createState() => _SwitchStatefulWidget();
}
class _SwitchStatefulWidget extends State<SwitchStatefulWidget> {
bool _switchSelected=true; //维护单选开关状态
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"1. 单选开关",
textScaleFactor: 1.2,
),
Switch(
value: _switchSelected,//当前状态
onChanged:(value){
//重新构建页面
setState(() {
_switchSelected = value;
});
},
),
Text(
"2. IOS 风格单选开关",
textScaleFactor: 1.2,
),
CupertinoSwitch(
value: _switchSelected,
onChanged: (value) {
},
),
Text(
"3. SwitchListTile",
textScaleFactor: 1.2,
),
SwitchListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: _switchSelected,
onChanged: (bool value) {
setState(() {
_switchSelected = !_switchSelected;
});
},
),
],
);
}
}
二、单选框(Radio)
1. 效果图
2. 完整代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('单选框（Radio）'),
),
body: Center(
child: RadioStatefulWidget(),
)
)
);
}
}
class RadioStatefulWidget extends StatefulWidget {
const RadioStatefulWidget({
Key? key}) : super(key: key);
@override
State<RadioStatefulWidget> createState() => _RadioStatefulWidget();
}
class _RadioStatefulWidget extends State<RadioStatefulWidget> {
///默认选中的单选框的值
String _groupValue = '学科';
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
RadioListTile<String>(
value: '语文',
title: Text('语文'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue = value!;
});
},
),
RadioListTile<String>(
value: '数学',
title: Text('数学'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue = value!;
});
},
),
RadioListTile<String>(
value: '英语',
title: Text('英语'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue = value!;
});
},
),
ElevatedButton(
onPressed: (){
final snackBar = SnackBar(content: Text('你选择的是$_groupValue'),);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('确定'),
),
],
)
);
}
}
三、复选框(Checkbox)
1. 效果图
2. 完整代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('复选框（Checkbox）'),
),
body: Center(
child: CheckboxStatefulWidget(),
)
)
);
}
}
class CheckboxStatefulWidget extends StatefulWidget {
const CheckboxStatefulWidget({
Key? key}) : super(key: key);
@override
State<CheckboxStatefulWidget> createState() => _CheckboxStatefulWidget();
}
class _CheckboxStatefulWidget extends State<CheckboxStatefulWidget> {
bool _value=false;
bool _value1=false;
bool _value2=false;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
CheckboxListTile(
value: _value,
title: Text('篮球'),
onChanged: (value){
setState(() {
_value = value!;
});
},
),
CheckboxListTile(
value: _value1,
title: Text('足球'),
onChanged: (value){
setState(() {
_value1 = value!;
});
},
),
CheckboxListTile(
value: _value2,
title: Text('网球'),
onChanged: (value){
setState(() {
_value2 = value!;
});
},
),
ElevatedButton(
onPressed: (){
final snackBar = SnackBar(content: Text('你的兴趣爱好是篮球$_value,足球$_value1,网球$_value2'),);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('确定'),
),
],
)
);
}
}