Flutter基础组件Checkbox，Switch，进度指示器

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,
    ),