Checkbox 和 Switch
Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的
import 'package:flutter/material.dart';
class StudyCheckbox extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Checkbox和Switch"),
),
body: Container(
child: SwitchAndCheckboxRoute(),
)
);
}
}
class SwitchAndCheckboxRoute extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return SwitchAndCheckboxRouteState();
}
}
class SwitchAndCheckboxRouteState extends State<SwitchAndCheckboxRoute>{
bool switchSelect = false; //单选开关状态
bool checkboxSelect = false;//复选开关状态
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value: switchSelect,
onChanged: (value){
setState(() {
switchSelect = value;
});
},
),
Checkbox(
value: checkboxSelect,
onChanged: (value){
setState(() {
checkboxSelect = value!;
});
},
activeColor: Colors.purple,//选中时的颜色
)
],
);
}
}
未选中效果
选中效果
进度指示器
Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator。
LinearProgressIndicator
LinearProgressIndicator是一个线性、条状的进度条。
value:
value表示当前的进度,取值范围为[0,1];如果value为null时则指示器会执行一个循环动画(模糊进度);当value不为null时,指示器为一个具体进度的进度条。
backgroundColor:
指示器的背景色
valueColor:
指示器的进度条颜色
Text("LinearProgressIndicator",),
Container(
margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
//在没有给value赋值的情况下会执行循环动画
child:LinearProgressIndicator(
backgroundColor: Colors.grey,//指示器背景色
valueColor: AlwaysStoppedAnimation(Colors.blue),//进度背景色
),
height: 20,
),
Container(
margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
child:LinearProgressIndicator(
backgroundColor: Colors.grey,//指示器背景色
valueColor: AlwaysStoppedAnimation(Colors.blue),//进度背景色
value: 0.2,//进度
),
height: 20,
),
CircularProgressIndicator
strokeWidth 表示圆形进度条的粗细
Text(" CircularProgressIndicator",),
Container(
margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
//在没有给value赋值的情况下会执行循环动画
child:CircularProgressIndicator(
backgroundColor: Colors.grey,//指示器背景色
valueColor: AlwaysStoppedAnimation(Colors.blue),//进度背景色
strokeWidth: 10,
),
width: 100,
height: 100,
),
Container(
margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
child:CircularProgressIndicator(
backgroundColor: Colors.grey,//指示器背景色
valueColor: AlwaysStoppedAnimation(Colors.blue),//进度背景色
value: 0.6,
strokeWidth: 10,
),
width: 100,
height: 100,
),