iOS-Flutter 基础组件 单选开关、复选框、进度指示器

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

单选开关 Switch及CheckBox

Switch 类似于iOS中的UISwitch，而CheckBox类似于iOS中的使用选中和非选中状态的UIButton，它们都带有选中的高亮色设置属性，使用起来也差不多，下面看源码实例：

class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected=true; //维护单选开关状态
  bool _checkboxSelected=true;//维护复选框状态
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          value: _switchSelected,//当前状态
          activeColor: Colors.red, //选中时的颜色
          onChanged:(value){
            //重新构建页面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //选中时的颜色
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}

Switch属性	说明	取值
value	开关是否打开	bool对象
activeTrackColor	滑块轨迹颜色	Colors对象
activeColor	滑块打开后颜色(为图像时，不显示)	Colors对象
inactiveTrackColor	滑块未打开时轨迹颜色	Colors对象
inactiveThumbColor	滑块未打开时颜色	Colors对象
activeThumbImage	滑块打开后的图标	ImageProvider对象

CheckBox属性	介绍
value	@required 是否选中
tristate	三态复选框，默认 false，当设置为 true 时，设置 value = null，复选框中间会变成破折号(-)
onChanged	@required 点击事件
mouseCursor	鼠标光标
activeColor	选中时填充颜色
checkColor	选中时中间✔️颜色
focusColor	聚焦颜色
hoverColor	悬停颜色
materialTapTargetSize	内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小
visualDensity	布局紧凑设置
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

是不是感觉两个组件很类似，不同的是Switch亦能定义宽度，高度是固定的，CheckBox大小是固定的。另外就是tristate属性，这个是可以开启三态的，也就是多了一个默认为null的状态。两个组件都是需要父组件去维护状态。

进度指示器

进度指示器分两种，一种是线型，一种是环型。

LinearPropressIndicator 线型指示器

先看源码:

LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

CircularProgressIndicator环型指示器

CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

两种属性都很简单：

• value:当前进度0-1，如果为null则会执行一个循环动画
• backgroundColor:指示器背景色
• valueColor:指示器的进度条颜色，该类型是*Animation*也就是可以制定动画 需要注意的是，本身两种指示器没有是指大小尺寸的参数，其大小是根据父组件来约束的。比如：

SizedBox(
  height: 3,
  //width:100,环型时，可设置宽度不等就会变成椭圆型.
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),

进度条动画

class _ProgressRouteState extends State<ProgressRoute>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;//动画控制

  @override
  void initState() {
    //动画执行时间3秒  
    _animationController = AnimationController(
        vsync: this, //注意State类需要混入SingleTickerProviderStateMixin（提供动画帧计时/触发器）
        duration: Duration(seconds: 3),//动画时间
      );
    _animationController.forward();开启动画
    _animationController.addListener(() => setState(() => {}));//动画状态监听
    super.initState();
  }
  @override
  void dispose() {
    _animationController.dispose();//注意通常带有Controller大多需要自己释放，避免内存泄漏
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
            Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                .animate(_animationController), // 从灰色变成蓝色
              value: _animationController.value,//以动画进度值显示指示器值
            ),
          );
        ],
      ),
    );
  }
}

上面的两种指示器通常能应付大多场景，但是有些复杂的场景还是需要自己去实现，通常是通过CustomPainter Widget来自定义绘制逻辑，类似于iOS中在UIView中重写drawRect 函数，然后通过CGContextRef进行绘制。这种实现较为麻烦，但是可以高度自定义任何场景的绘制。