Flutter入门进阶之旅（十一）Index&Chose

发表于 | 更新于

延续上一节的内容，上一节我们讲解了各种Dialog跟提示，其中包括轻量级跟非轻量级，我们了解到了像SnackBar、Tooltip、Dialog等各种具有提示交互作用的Widget，今天我们继续上一篇的内容，来一块了解一下各种用于进度显示的Widget跟checkBox等选择作用的Widget。

今天我们来一块了解一下各种Index跟Chose控件，像CircularProgressIndicator圆环进度条，
LinearProgressIndicator水平进度条，Slider滑杆，还有Checkbox，Switch等，下面我们就一块来进入今天的分享。

1. CircularProgressIndicator

老规矩，先从构造方法入手

1
2
3
4
5
6
7
8
9
const CircularProgressIndicator({
Key key,
double value,  //进度（0-1）之间，不设置进度会一直循环
Color backgroundColor, 
Animation<Color> valueColor, //圆环进度颜色
this.strokeWidth = 4.0, //圆环进度条宽度
String semanticsLabel,
String semanticsValue,
})

从上述CircularProgressIndicator的方法签名中，我们首先可以得到的信息是，圆环进度条可以自定义指定背景颜色跟宽度，可以设置进度，我贴上几个简单的例子来直观体验一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
          child: new Column(
        children: <Widget>[
          SizedBox(height: 30.0),
          Text("设置进度比为80%(0.8)"),
          SizedBox(height: 30.0),
          CircularProgressIndicator(
            value: 0.8, //
            backgroundColor: Colors.green,
            strokeWidth: 10.0,
          ),
          SizedBox(height: 30.0), //设置间隔
          Text("未做任何处理，默认一直循环"),
          CircularProgressIndicator(),

          Text("设置圆环进度颜色为红色"),
          CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation(Colors.deepOrange),
          ),
        ],
      )),
    );
  }
}

//const CircularProgressIndicator({
//Key key,
//double value,  //进度（0-1）之间，不设置进度会一直循环
//Color backgroundColor,
//Animation<Color> valueColor, //圆环进度颜色
//this.strokeWidth = 4.0, //圆环进度条宽度
//String semanticsLabel,
//String semanticsValue,
//})

效果图
CircularProgressIndicator

2.LinearProgressIndicator

对比LinearProgressIndicator的构造方法

1
2
3
4
5
6
7
8
const LinearProgressIndicator({
   Key key,
   double value,
   Color backgroundColor,
   Animation<Color> valueColor,
   String semanticsLabel,
   String semanticsValue,
 })

我们发现LinearProgressIndicator与CircularProgressIndicator除了少了一个strokeWidth不支持设置进度条宽度之外，其他完全一致，所以我就不多做讲解了，直接看下效果吧。

效果图
LinearProgressIndicator
样例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
          child: new Column(
        children: <Widget>[
          SizedBox(height: 30.0),
          Text("设置进度比为80%(0.8)"),
          SizedBox(height: 30.0),
          LinearProgressIndicator(
            value: 0.8, //
            backgroundColor: Colors.green,
          ),
          SizedBox(height: 30.0), //设置间隔
          Text("未做任何处理，默认一直循环"),
          LinearProgressIndicator(),

          Text("设置进度颜色为红色,背景透明"),
          LinearProgressIndicator(
            backgroundColor: Colors.transparent,
            valueColor: AlwaysStoppedAnimation(Colors.deepOrange),
          ),
        ],
      )),
    );
  }
}

3.Slider

构造方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Slider({
Key key,
@required this.value,//滑块的值
@required this.onChanged, //改变时触发。
this.onChangeStart, //改变前触发。
this.onChangeEnd,  //改变后触发。
this.min = 0.0, //用户可以选择的最小值。
this.max = 1.0, //用户可以选择的最大值。
this.divisions, //离散部分的数量
this.label, //滑块处于活动状态时显示在滑块上方的标签。
this.activeColor,//激活时的颜色
this.inactiveColor,//滑块轨道的非活动部分的颜色。
this.semanticFormatterCallback,
})

Slider滑杆进度条，支持用户手动拖拽定位，如果不涉及到用户拖拽交互，我们可以把他认为就是一个静态的LinearProgressIndicator，使用起来也比较简单。但是如果需用跟用户交互，涉及到用户的拖拽手势然后动态的改变Slider的值，就需要借助我们之前讲到的StatefullWidget，通过setState来完成用户交互的数据重新更新渲染到Slider上，我们来一起体验一下。

3.1 静态Slider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Slider(
          value: 0.4,
          onChanged: null,
        ),
      ),
    );
  }
}

效果图
静态Slider
如上图，就仅仅只是一个指示作用，不支持用户手指拖拽滑动，下面我们来借助StatefullWidget来做一下简单交互。

3.2 动态Slider

我们来模拟一下用户拖拽Slider可以设置当前是星期几的效果。
效果图
Slider
这里提到一个小细节，有读者给我反馈说在使用Slider的时候，在Slider上方的label一直不显示，这里是因为label在指定了divisions也就是指定当前进度被离散成多少份之后才会显示，读者注意到这个细节即可。下面是上图的样例代码，供大家参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  double _currentIndex = 0.0;
  void _onSliderStateChanged(double value) {
    setState(() {
      _currentIndex = value;
      print(_currentIndex.toString() + '-------------------');
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Slider(
          value: _currentIndex,
          label: '星期${(_currentIndex*10).floor().toString()}',
          activeColor: Colors.redAccent,
          inactiveColor: Colors.grey,
          max: 0.7,
          min: 0.0,
          onChanged: _onSliderStateChanged,
          onChangeStart: (value){
            print('开始滑动-------------$value');
          },
          onChangeEnd: (value){
            print('结束滑动-------------$value');
          },
          divisions: 7,
        ),
      ),
    );
  }
}
//
//const Slider({
//Key key,
//@required this.value,滑块的值
//@required this.onChanged, //改变时触发。
//this.onChangeStart, //改变前触发。
//this.onChangeEnd,  //改变后触发。
//this.min = 0.0, //用户可以选择的最小值。
//this.max = 1.0, //用户可以选择的最大值。
//this.divisions, //离散部分的数量
//this.label, //滑块处于活动状态时显示在滑块上方的标签。
//this.activeColor,//激活时的颜色
//this.inactiveColor,//滑块轨道的非活动部分的颜色。
//this.semanticFormatterCallback,
//})

上面说完了常用的进度展示控件，我们通过上面的学习基本能处理业务上不同场景下如果选用进度Widget，下面我们来进入本篇的第二部分，关于Chose控件的介绍。

4.Checkbox

Checkbox跟Slider一样，因为需要处理或者说需要记录用户的选择状态，然后去更新Checkbox的选中状态，所以理所当然我们也需要使用StatefullWidget来完成这一操作。否则Checkbox只能跟上面分析Slider一样，只能一个静态展示，不能完成或者说记录用户的行为操作。

Checkbox使用跟原生Android一样，没有什么需要特别注意的知识点，我就不多做讲解了，下面我们一起来看一个例子。
CheckBox

样例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  bool isChecked = false;

  void _onCheckStateChanged(bool value) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Checkbox(
          value: isChecked,
          onChanged: _onCheckStateChanged,
          activeColor: Colors.green,
        ),
      ),
    );
  }
}

5.Switch

Switch跟Checkbox用户上类似，都是为了记录用户的选中状态，只不过是Switch可定制的部分比Checkbox更多一些，开发者可以加入更多的个性化定制，我们还是先从构造方法说起。

1
2
3
4
5
6
7
8
9
10
11
12
const Switch({
Key key,
@required this.value,//切换按钮的值。
@required this.onChanged,//改变时触发。
this.activeColor, //激活时圆点的颜色。
this.activeTrackColor, //激活时横条的颜色
this.inactiveThumbColor,//非激活时原点的颜色。
this.inactiveTrackColor, // 非激活时原点的颜色。
this.activeThumbImage, //圆点还支持图片，激活时的效果
this.inactiveThumbImage,//非激活原点的图片效果。
this.materialTapTargetSize,
})

下面我把几个配置不同样式的Switch效果图贴上了，读者可根据代码自行分析其具体实现细节，我就不逐一讲解构造方法中各个属性的作用了。

效果图
Switch

这里说明一下，上图为什么点击其中一个Switch另外两个也会跟着联动，原因是我在写测试代码的时候，为了减少代码的书写量，尽可能的让代码清晰，所以给三个Switch在onChanged的时候绑定的是同一个函数回调，没有分开单独处理每个Swtich的回调事件，读者知道即可，不用过于纠结。

如上图：
第一个Switch我指定了，激活跟非激活状态的圆点颜色跟滑动轨迹的颜色
第二个Switch我指定了，激活跟非激活状态下圆点是资源图片。
第三个Swtich没有做任何处理。

上述效果图代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  bool isChecked = false;

  void _onCheckStateChanged(bool value) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: Column(
          children: <Widget>[
            new Switch(
              value: isChecked,
              inactiveThumbColor: Colors.redAccent,
              inactiveTrackColor: Colors.brown,
              activeTrackColor: Colors.blue,
              onChanged: _onCheckStateChanged,
              activeColor: Colors.green,
            ),
            Text("指定激活跟非激活状态下，圆点都为图片"),
            new Switch(
              value: isChecked,
             inactiveThumbImage: AssetImage('images/a.png'),
              activeThumbImage: AssetImage('images/aaa.png'),
              onChanged: _onCheckStateChanged,
              activeColor: Colors.green,
            ),
            new Switch(
              value: isChecked,
              onChanged: _onCheckStateChanged,
            )
          ],
        ),
      ),
    );
  }
}
//
//const Switch({
//Key key,
//@required this.value,//切换按钮的值。
//@required this.onChanged,//改变时触发。
//this.activeColor, //激活时圆点的颜色。
//this.activeTrackColor, //激活时横条的颜色
//this.inactiveThumbColor,//非激活时原点的颜色。
//this.inactiveTrackColor, // 非激活时原点的颜色。
//this.activeThumbImage, //圆点还支持图片，激活时的效果
//this.inactiveThumbImage,//非激活原点的图片效果。
//this.materialTapTargetSize,
//})

属性及外观

Switch和Checkbox属性比较简单，读者可以查看API文档，它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false ；如果其值为true时，value的值会增加一个状态null，读者可以自行了解。

6.Radio

在项目开发或者真实案例中Radio通常都是成组出现，比如性别选择、爱好选择等等场景中，Flutter充分考虑到了这一场景需求，给我们提供了便捷使用Radio的API。利用flutter的Radio能满足我们在原生Android中各个使用Radio的场景。下面我们来一起看下构造方法，顺便有一点小细节需要讲解一下。

1
2
3
4
5
6
7
8
const Radio({
Key key,
@required this.value,  //单选的值。
@required this.groupValue, //选择组的值。
@required this.onChanged,  //改变时触发。
this.activeColor,  //激活时的颜色
this.materialTapTargetSize,
})

看下Radio中的这段代码

1
2
3
4
5
6
7
8
/// The value represented by this radio button.
final T value;

/// The currently selected value for this group of radio buttons.
///
/// This radio button is considered selected if its [value] matches the
/// [groupValue].
final T groupValue;

从Radio的这段源码注释中我们可以看到Radio在处理分组时，value跟groupValue是作为一个泛型参数，也就是说我们可以指定value的类型为int、或者String等类型，并且当value和groupValue一致的时候则选中

根据这些我们就可以自由发挥去处理我们实际开发中需要使用Radio分组的业务逻辑了。下面我贴上一个选择性别跟选择数字的样例代码供大家参考，读者可结合上述关于Radio的源码分析和下面的代码对比学习。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  int _value = 0;
  String _sex = '男';

  void _onRadioChanged(int value) {
    setState(() {
      _value = value;
    });
  }

  void _onSexRadioChanged(String value) {
    setState(() {
      _sex = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: Column(children: <Widget>[
          Radio(
            value: 0,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),
          Radio(
            value: 1,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),
          Radio(
            value: 2,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),

          Text("选择的数字为$_value"),
          SizedBox(height: 50.0),
          Text("选择性别"),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio(
                value: '男',
                groupValue: _sex,
                onChanged: _onSexRadioChanged,
              ),
              Radio(
                value: '女',
                groupValue: _sex,
                onChanged: _onSexRadioChanged,
              ),
            ],
          ),
          Text(_sex),

        ]),
      ),
    );
  }
}

//当value和groupValue一致的时候则选中
//const Radio({
//Key key,
//@required this.value,  //单选的值。
//@required this.groupValue, //选择组的值。
//@required this.onChanged,  //改变时触发。
//this.activeColor,  //激活时的颜色
//this.materialTapTargetSize,
//})

效果图
Radio