1. 开关组件
-
开关组件通常是作为和用户交互有关的组件,因此,在使用时,一般是作为有状态的组件来使用
//普通开关按钮
Switch(
value:switchEnable,
activeColor: Colors.blue,//选中的时候颜色
inactiveTrackColor: Colors.blue.shade50,//选中前颜色
onChanged: (value){
setState(() {
switchEnable = value;
});
},
),
//IOS风格的开关按钮
CupertinoSwitch(
value: iosswitchSelected,
onChanged: (value) {},
),
//带Icon、Text的开关按钮
SwitchListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: switchSelected,
onChanged: (bool value) {
setState(() {
switchSelected = !switchSelected;
});
},
),
2. 复选框组件
//普通checkbox
Checkbox(
value: checkboxSelected,
onChanged: (value) {
setState(() {
checkboxSelected = value;
});
},
),
//带Icon、Text的checkbox
CheckboxListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: checkboxTextSelected,
onChanged: (bool value) {
setState(() {
checkboxTextSelected = !checkboxTextSelected;
});
},
),
3. 共有属性
-
Flutter框架对开关和复选框的样式定义很少,主要有以下几个
activeColor → Color - 激活时原点的颜色。
activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。
activeTrackColor → Color - 激活时横条的颜色。
inactiveThumbColor → Color - 非激活时原点的颜色。
inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
inactiveTrackColor → Color - 非激活时横条的颜色。
onChanged → ValueChanged - 改变时触发。
value → bool - 切换按钮的值。
代码样式
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d43c2fbe4f0b6f65d0711301a4b1564c.jpeg#pic_center)
源码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: SwitchAndCheckBoxArea(),
),
),
);
}
}
class SwitchAndCheckBoxArea extends StatefulWidget{
@override
State<StatefulWidget> createState(){
return SwitchAndCheckBoxAreaState();
}
}
class SwitchAndCheckBoxAreaState extends State<SwitchAndCheckBoxArea> {
@override
Widget build(BuildContext context){
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
WidgetSwitchAndCheckbox(),
],
),
);
}
}
//开关和复选框组件
class WidgetSwitchAndCheckbox extends StatefulWidget {
@override
State<StatefulWidget> createState(){
return WidgetSwitchAndCheckboxState();
}
}
class WidgetSwitchAndCheckboxState extends State<WidgetSwitchAndCheckbox> {
var switchEnable = false;
var checkboxSelected = false;
var switchSelected = false;
var checkboxTextSelected = false;
var iosswitchSelected = false;
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
//普通开关按钮
Switch(
value:switchEnable,
activeColor: Colors.blue,//选中的时候颜色
inactiveTrackColor: Colors.blue.shade50,//选中前颜色
onChanged: (value){
setState(() {
switchEnable = value;
});
},
),
//IOS风格的开关按钮
CupertinoSwitch(
value: iosswitchSelected,
onChanged: (value) {},
),
//带Icon、Text的开关按钮
SwitchListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: switchSelected,
onChanged: (bool value) {
setState(() {
switchSelected = !switchSelected;
});
},
),
//普通checkbox
Checkbox(
value: checkboxSelected,
onChanged: (value) {
setState(() {
checkboxSelected = value;
});
},
),
//带Icon、Text的checkbox
CheckboxListTile(
secondary: const Icon(Icons.shutter_speed),
title: const Text('硬件加速'),
value: checkboxTextSelected,
onChanged: (bool value) {
setState(() {
checkboxTextSelected = !checkboxTextSelected;
});
},
),
]);
}
}