[Flutter]flutter基础之组件基础(十四)

一、Radio Widget

Radio 是单选按钮 Widget 。用于在多个互斥值之间进行选择。 当选择了组中的一个单选按钮时,该组中的其他单选按钮将停止被选择。Radio 通常与 enum 配合使用。单选按钮本身不保持任何状态。相反,选择单选会调用 onChanged 回调,并将值作为参数传递。如果 groupValuevalue 匹配,则将选择此单选。大多数小部件将通过调用 State.setState 来更新单选按钮的 groupValue 来响应 onChanged 。 构造方法如下:

1
const Radio({
2
  Key key,
3
  //T类型(泛型)必传参数,此单选按钮表示的值
4
  @required this.value,
5
  //T类型(泛型)必传参数,一组单选按钮的当前选定值
6
  @required this.groupValue,
7
  //ValueChanged<T>类型必传参数,单选按钮被选择时调用的方法
8
  @required this.onChanged,
9
  //Color类型可选命名参数,选择此单选按钮时使用的颜色
10
  this.activeColor,
11
  //Color类型可选命名参数,具有输入焦点时的颜色
12
  this.focusColor,
13
  //Color类型可选命名参数,指针悬停在点选按钮上时的颜色。
14
  this.hoverColor,
15
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
16
  this.materialTapTargetSize,
17
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
18
  this.focusNode,
19
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
20
  this.autofocus = false,
21
})

使用方法如下:

1
import 'package:flutter/material.dart';
2
3
enum Fruits{
4
  Apple,
5
  Banana,
6
  Orange,
7
}
8
9
void main() => runApp(MyApp());
10
11
class MyApp extends StatelessWidget {
12
  @override
13
  Widget build(BuildContext context) {
14
    return MaterialApp(
15
      home: MyHomePage(),
16
    );
17
  }
18
}
19
20
class MyHomePage extends StatefulWidget {
21
  @override
22
  State<StatefulWidget> createState() {
23
    // TODO: implement createState
24
    return _MyHomePageState();
25
  }
26
}
27
28
class _MyHomePageState extends State<MyHomePage> {
29
  Fruits _fruit = Fruits.Banana;
30
  @override
31
  Widget build(BuildContext context) {
32
    return Scaffold(
33
      appBar: AppBar(
34
        title: Text("HomePage"),
35
      ),
36
      body: Container(
37
        color: Colors.yellow,
38
        child: Column(
39
          children: <Widget>[
40
            ListTile(
41
              title: const Text("苹果"),
42
              leading: Radio(
43
                value: Fruits.Apple,
44
                groupValue: _fruit,
45
                onChanged: (fruitValue){
46
                  setState(() {
47
                    _fruit = fruitValue;
48
                  });
49
                },
50
              ),
51
            ),
52
            ListTile(
53
              title: const Text("香蕉"),
54
              leading: Radio(
55
                value: Fruits.Banana,
56
                groupValue: _fruit,
57
                onChanged: (fruitValue){
58
                  setState(() {
59
                    _fruit = fruitValue;
60
                  });
61
                },
62
              ),
63
            ),
64
            ListTile(
65
              title: const Text("柑橘"),
66
              leading: Radio(
67
                value: Fruits.Orange,
68
                groupValue: _fruit,
69
                onChanged: (fruitValue){
70
                  setState(() {
71
                    _fruit = fruitValue;
72
                  });
73
                },
74
              ),
75
            ),
76
          ],
77
        ),
78
      ),
79
    );
80
  }
81
}

效果如下:

20203311012

二、 RadioListTile Widget

Radio 是单纯的单选按钮,如果需要显示标签,需要配合其他 Widget 来做展示操作。RadioListTile 是自带标签的单选按钮,相当于 RadioListTile 的组合 Widget 。要将 RadioListTile 显示为禁用,请将 null 作为 onChanged 回调传递。

由于 RadioListTile 的整体是交互式的,因此应将自身表示为单个交互式实体。为此,RadioListTile 小部件使用 MergeSemantics 小部件包装其子级。 MergeSemantics 将尝试将其后代语义节点合并到语义树中的一个节点中。 因此,如果 RadioListTile 的任何子级需要其自己的 Semantics 节点,则将引发错误。

例如,您不能将 RichText 小部件嵌套为 RadioListTile 的后代。 RichText 具有一个嵌入式手势识别器,该识别器需要其自己的“语义”节点,这与 RadioListTile 将其所有后代的语义节点合并为一个节点的愿望直接冲突。 因此,可能有必要创建自定义的无线电图块窗口小部件以适应类似的用例。

构造方法如下:

1
const RadioListTile({
2
  Key key,
3
  //T类型(泛型)必传参数,此单选按钮表示的值
4
  @required this.value,
5
  //T类型(泛型)必传参数,一组单选按钮的当前选定值
6
  @required this.groupValue,
7
  //ValueChanged<T>类型必传参数,单选按钮被选择时调用的方法
8
  @required this.onChanged,
9
  //Color类型可选命名参数,选择此单选按钮时使用的颜色
10
  this.activeColor,
11
  //Widge类型可选命名参数,要展示的主要内容
12
  this.title,
13
  //Widge类型可选命名参数,标题下方显示了其他内容
14
  this.subtitle,
15
  //bool类型可选命名参数,此列表图块是否旨在显示三行文本
16
  this.isThreeLine = false,
17
  //bool类型可选命名参数,此列表图块是否是垂直密集列表的一部分
18
  this.dense,
19
  //Widget类型可选命名参数,在单选按钮的图块另一侧显示的小部件
20
  this.secondary,
21
  //bool类型可选命名参数,是否在activeColor中呈现图标和文本
22
  this.selected = false,
23
  //ListTileControlAffinity类型可选命名参数,相对于文本放置控件的位置
24
  this.controlAffinity = ListTileControlAffinity.platform,
25
})

ListTileControlAffinity 用来控制文本与单选按钮的相对位置,是一个枚举类型值,如下:

1
enum ListTileControlAffinity {
2
  //将控件放在前边缘,将辅助小部件(如果有)放在后边缘
3
  leading,
4
  //将控件放置在后边缘,将辅助小部件(如果有)放置在前边缘
5
  trailing,
6
  //以当前平台的典型方式将控件相对于文本放置,然后将辅助小部件放在相对的一侧
7
  platform,
8
}

RadioListTile 使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  Fruits _fruit = Fruits.Banana;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: Column(
12
          children: <Widget>[
13
            RadioListTile(
14
              value: Fruits.Apple,
15
              groupValue: _fruit,
16
              onChanged: (fruitValue){
17
                setState(() {
18
                  _fruit = fruitValue;
19
                });
20
              },
21
              title: Text("苹果"),
22
              subtitle: Text("是一种水果"),
23
              secondary: Icon(Icons.arrow_forward_ios),
24
              activeColor: Colors.red,
25
            ),
26
            RadioListTile(
27
              value: Fruits.Banana,
28
              groupValue: _fruit,
29
              onChanged: (fruitValue){
30
                setState(() {
31
                  _fruit = fruitValue;
32
                });
33
              },
34
              title: Text("香蕉"),
35
              subtitle: Text("是一种水果"),
36
              secondary: Icon(Icons.arrow_forward_ios),
37
              activeColor: Colors.red,
38
            ),
39
            RadioListTile(
40
              value: Fruits.Orange,
41
              groupValue: _fruit,
42
              onChanged: (fruitValue){
43
                setState(() {
44
                  _fruit = fruitValue;
45
                });
46
              },
47
              title: Text("柑橘"),
48
              subtitle: Text("是一种水果"),
49
              secondary: Icon(Icons.arrow_forward_ios),
50
              activeColor: Colors.red,
51
            )
52
          ],
53
        ),
54
      ),
55
    );
56
  }
57
}

关于其他方面的说明可查看官方说明:https://api.flutter.dev/flutter/material/RadioListTile-class.html

三、Checkbox Widget

Checkbox 是复选框按钮 Widget 。复选框本身不维护任何状态。相反,当复选框的状态更改时,窗口小部件将调用 onChanged 回调。大多数使用复选框的窗口小部件将侦听 onChanged 回调,并使用新值重建该复选框以更新该复选框的外观。

如果 tristatetrue ,则该复选框可以选择显示三个值:truefalsenull 。当 valuenull 时,将显示破折号。默认情况下,为 false ,并且复选框的值必须为 truefalse

1
const Checkbox({
2
  Key key,
3
  //bool类型必传参数,是否选中此复选框
4
  @required this.value,
5
  //bool类型命名可选参数,如果为true,则复选框的值可以为true,false或null
6
  this.tristate = false,
7
  //ValueChanged<bool>类型必传参数,当复选框的值应更改时调用
8
  @required this.onChanged,
9
  //Color类型可选命名参数,选中此复选框时使用的颜色
10
  this.activeColor,
11
  //Color类型可选命名参数,选中此复选框时用于选中图标的颜色
12
  this.checkColor,
13
  //Color类型可选命名参数,复选框具有输入焦点时的颜色。
14
  this.focusColor,
15
  //Color类型可选命名参数,指针悬停在复选框上时的颜色。
16
  this.hoverColor,
17
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
18
  this.materialTapTargetSize,
19
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
20
  this.focusNode,
21
  //bool类型必传参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
22
  this.autofocus = false,
23
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  var currentSelected = Set();
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: Column(
12
          children: <Widget>[
13
            ListTile(
14
              title: const Text("苹果"),
15
              leading: Checkbox(
16
                value: currentSelected.contains(Fruits.Apple),
17
                onChanged: (bool fruitValue){
18
                  setState(() {
19
                    Fruits s = fruitValue ? Fruits.Apple : Fruits.NoResult;
20
                    print(s);
21
                    if(s == Fruits.NoResult && currentSelected.contains(Fruits.Apple)) {
22
                      currentSelected.remove(Fruits.Apple);
23
                    }else currentSelected.add(Fruits.Apple);
24
                  });
25
                },
26
              ),
27
            ),
28
            ListTile(
29
              title: const Text("香蕉"),
30
              leading: Checkbox(
31
                value: currentSelected.contains(Fruits.Banana),
32
                onChanged: (bool fruitValue){
33
                  setState(() {
34
                    Fruits s = fruitValue ? Fruits.Banana : Fruits.NoResult;
35
                    print(s);
36
                    if(s == Fruits.NoResult && currentSelected.contains(Fruits.Banana)) {
37
                      currentSelected.remove(Fruits.Banana);
38
                    }else currentSelected.add(Fruits.Banana);
39
                  });
40
                },
41
              ),
42
            ),
43
            ListTile(
44
              title: const Text("柑橘"),
45
              leading: Checkbox(
46
                value: currentSelected.contains(Fruits.Orange),
47
                onChanged: (bool fruitValue){
48
                  setState(() {
49
                    Fruits s = fruitValue ? Fruits.Orange : Fruits.NoResult;
50
                    print(s);
51
                    if(s == Fruits.NoResult && currentSelected.contains(Fruits.Orange)) {
52
                      currentSelected.remove(Fruits.Orange);
53
                    }else currentSelected.add(Fruits.Orange);
54
                  });
55
                },
56
              ),
57
            ),
58
          ],
59
        ),
60
      ),
61
    );
62
  }
63
}

效果如下:

2020411133

四、CheckboxListTile Widget

Checkbox 是单纯的复选框,如果需要显示标签,需要配合其他 Widget 来做展示操作。CheckboxListTile 是自带标签的复选框列表,相当于 CheckboxListTile 的组合 Widget 。要将 CheckboxListTile 显示为禁用,请将 null 作为 onChanged 回调传递。构造方法如下:

1
const CheckboxListTile({
2
  Key key,
3
  //bool类型必传参数,是否选中此复选框
4
  @required this.value,
5
  //ValueChanged<bool>类型必传参数,当复选框的值应更改时调用
6
  @required this.onChanged,
7
  //Color类型可选命名参数,选中此复选框时使用的颜色
8
  this.activeColor,
9
  //Color类型可选命名参数,选中此复选框时用于选中图标的颜色
10
  this.checkColor,
11
  //Widget类型可选命名参数,显示的主要部分标题
12
  this.title,
13
  //Widget类型可选命名参数,标题下方显示的其他内容
14
  this.subtitle,
15
  //bool类型可选命名参数,此列表图块是否旨在显示三行文本
16
  this.isThreeLine = false,
17
  //bool类型可选命名参数,此列表图块是否是垂直密集列表的一部分
18
  this.dense,
19
  //Widget类型可选命名参数,显示在与复选框相对应的图块的另一侧的Widget
20
  this.secondary,
21
  //bool类型可选命名参数,是否在activeColor中呈现图标和文本
22
  this.selected = false,
23
  //ListTileControlAffinity类型可选命名参数,相对于文本放置控件的位置
24
  this.controlAffinity = ListTileControlAffinity.platform,
25
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  var currentSelected = Set();
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: Column(
12
          children: <Widget>[
13
            CheckboxListTile(
14
              title: const Text("苹果"),
15
              subtitle: const Text("这是一种水果"),
16
              value: currentSelected.contains(Fruits.Apple),
17
              onChanged: (bool fruitValue){
18
                setState(() {
19
                  Fruits s = fruitValue ? Fruits.Apple : Fruits.NoResult;
20
                  print(s);
21
                  if(s == Fruits.NoResult && currentSelected.contains(Fruits.Apple)) {
22
                    currentSelected.remove(Fruits.Apple);
23
                  }else currentSelected.add(Fruits.Apple);
24
                });
25
              },
26
            ),
27
            CheckboxListTile(
28
              title: const Text("香蕉"),
29
              subtitle: const Text("这是一种水果"),
30
              value: currentSelected.contains(Fruits.Banana),
31
              onChanged: (bool fruitValue){
32
                setState(() {
33
                  Fruits s = fruitValue ? Fruits.Banana : Fruits.NoResult;
34
                  print(s);
35
                  if(s == Fruits.NoResult && currentSelected.contains(Fruits.Banana)) {
36
                    currentSelected.remove(Fruits.Banana);
37
                  }else currentSelected.add(Fruits.Banana);
38
                });
39
              },
40
            ),
41
            CheckboxListTile(
42
              title: const Text("柑橘"),
43
              subtitle: const Text("这是一种水果"),
44
              value: currentSelected.contains(Fruits.Orange),
45
              controlAffinity: ListTileControlAffinity.leading,
46
              onChanged: (bool fruitValue){
47
                setState(() {
48
                  Fruits s = fruitValue ? Fruits.Orange : Fruits.NoResult;
49
                  print(s);
50
                  if(s == Fruits.NoResult && currentSelected.contains(Fruits.Orange)) {
51
                    currentSelected.remove(Fruits.Orange);
52
                  }else currentSelected.add(Fruits.Orange);
53
                });
54
              },
55
            ),
56
          ],
57
        ),
58
      ),
59
    );
60
  }
61
}

效果如下:

2020411148

前两个 CheckboxListTile 是默认的样式,最后一个是改变了位置参数的样式。

五、Switch Widget

Switch 是用来设置开或关闭状态的 Widget 。Switch 本身不保持任何状态。 相反,当开关的状态更改时,小部件将调用 onChanged 回调。 大多数使用开关的小部件都会侦听 onChanged 回调,并使用新值重建开关以更新开关的外观。如果 onChanged 回调为 null ,则该开关将被禁用(它不会响应输入)。 默认情况下,禁用的开关的拇指和轨迹显示为灰色阴影。 禁用开关的默认外观可以用 inactiveThumbColorinactiveTrackColor 覆盖。
构造方法如下:

1
const Switch({
2
  Key key,
3
  //bool类型必传参数,此开关是打开还是关闭
4
  @required this.value,
5
  //ValueChanged<bool>类型必传参数,当用户打开或关闭开关时调用
6
  @required this.onChanged,
7
  //Color类型可选命名参数,开启此开关时使用的颜色
8
  this.activeColor,
9
  //Color类型可选命名参数,此开关打开时在赛道上使用的颜色
10
  this.activeTrackColor,
11
  //Color类型可选命名参数,关闭此开关时在拇指上使用的颜色
12
  this.inactiveThumbColor,
13
  //Color类型可选命名参数,关闭此开关时在轨道上使用的颜色
14
  this.inactiveTrackColor,
15
  //ImageProvider类型可选命名参数,开关打开时在此开关的拇指上使用的图像
16
  this.activeThumbImage,
17
  //ImageProvider类型可选命名参数,开关关闭时在此开关的拇指上使用的图像
18
  this.inactiveThumbImage,
19
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
20
  this.materialTapTargetSize,
21
  //DragStartBehavior类型可选命名参数,确定拖动开始行为的处理方式
22
  this.dragStartBehavior = DragStartBehavior.start,
23
  //Color类型可选命名参数,具有输入焦点时按钮的颜色。
24
  this.focusColor,
25
  //Color类型可选命名参数,指针悬停在按钮上时的颜色。
26
  this.hoverColor,
27
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此窗口小部件的焦点节点
28
  this.focusNode,
29
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
30
  this.autofocus = false,
31
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  bool isOpen = false;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: Switch(						//Switch
12
          value: isOpen,
13
          onChanged: (bool value){
14
            setState(() {
15
              isOpen = !value;
16
            });
17
          },
18
          activeColor: Colors.red,
19
          activeTrackColor: Colors.lightBlue,
20
          inactiveThumbColor: Colors.deepPurple,
21
          inactiveTrackColor: Colors.greenAccent,
22
        ),
23
      ),
24
    );
25
  }
26
}

效果如下:

2020411223

六、SwitchListTile Widget

SwitchListTile 带标签的开关 Widget 。整个列表图块是交互式的:点击图块中的任何位置均可切换开关。 轻击并拖动 Switch 也会触发 onChanged 回调。构造方法如下:

1
const SwitchListTile({
2
  Key key,
3
  //bool类型必传参数,此开关是打开还是关闭
4
  @required this.value,
5
  //ValueChanged<bool>类型必传参数,当用户打开或关闭开关时调用
6
  @required this.onChanged,
7
  //Color类型可选命名参数,开启此开关时使用的颜色
8
  this.activeColor,
9
  //Color类型可选命名参数,此开关打开时在赛道上使用的颜色
10
  this.activeTrackColor,
11
  //Color类型可选命名参数,关闭此开关时在拇指上使用的颜色
12
  this.inactiveThumbColor,
13
  //Color类型可选命名参数,关闭此开关时在轨道上使用的颜色
14
  this.inactiveTrackColor,
15
  //ImageProvider类型可选命名参数,开关打开时在此开关的拇指上使用的图像
16
  this.activeThumbImage,
17
  //ImageProvider类型可选命名参数,开关关闭时在此开关的拇指上使用的图像
18
  this.inactiveThumbImage,
19
  //Widget类型可选命名参数,主要显示的标题
20
  this.title,
21
  //Widget类型可选命名参数,标题下方显示的其他内容
22
  this.subtitle,
23
  //bool类型可选命名参数,此列表图块是否旨在显示三行文本
24
  this.isThreeLine = false,
25
  //bool类型可选命名参数,此列表图块是否是垂直密集列表的一部分
26
  this.dense,
27
  //EdgeInsetsGeometry类型可选命名参数,内边距
28
  this.contentPadding,
29
  //Widget类型可选命名参数,显示在与开关相对应的图块的另一侧的Widget
30
  this.secondary,
31
  //bool类型可选命名参数,是否在activeColor中呈现图标和文本
32
  this.selected = false,
33
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  bool isOpen = false;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: SwitchListTile(
12
          title: Text("开关"),
13
          subtitle: Text("是否打开开关"),
14
          contentPadding: EdgeInsets.all(10),
15
          value: isOpen,
16
          onChanged: (bool value){
17
            setState(() {
18
              isOpen = !value;
19
            });
20
          },
21
          activeColor: Colors.red,
22
          activeTrackColor: Colors.lightBlue,
23
          inactiveThumbColor: Colors.deepPurple,
24
          inactiveTrackColor: Colors.greenAccent,
25
        ),
26
      ),
27
    );
28
  }
29
}

效果如下:

2020411233

更多可查看官方文档:https://api.flutter.dev/flutter/material/SwitchListTile-class.html

七、Slider Widget

Slider 是一个滑块 Widget ,用于从一系列值中进行选择。Slider 可用于从一组连续值或一组离散值中进行选择。默认值是使用从最小到最大的连续值范围。要使用离散值,请使用非空值进行除法,该值指示离散间隔的数量。例如,如果 min 为 0.0,max 为 50.0,除法为 5,则滑块可以采用离散值 0.0、10.0、20.0、30.0、40.0 和50.0 。

如果 onChangednullmin..max给定的范围为空(即,如果 min 等于 max ),则将禁用滑块。

滑块小部件本身不保持任何状态。 相反,当滑块的状态更改时,小部件将调用 onChanged 回调。 大多数使用滑块的小部件都会侦听 onChanged 回调,并使用新值重建滑块以更新滑块的外观。 要知道该值何时开始更改或何时完成更改,请设置可选的回调 onChangeStart 和/或onChangeEnd。

默认情况下,Slider 将在垂直居中的情况下尽可能宽。 当给出无限制的约束时,它将尝试使轨道宽 144 像素(每边都有空白),并将垂直收缩包装 。构造方法有如下:

1
//创建默认滑块
2
const Slider({
3
  Key key,
4
  //double类型必传参数,该滑块当前选择的值
5
  @required this.value,
6
  //ValueChanged<double>类型必传参数,当用户通过拖动为滑块选择新值时在拖动期间调用
7
  @required this.onChanged,
8
  //ValueChanged<double>类型可选命名参数,当用户开始为滑块选择新值时调用
9
  this.onChangeStart,
10
  //ValueChanged<double>类型可选命名参数,当用户完成选择滑块的新值时调用
11
  this.onChangeEnd,
12
  //double类型可选命名参数,用户可以选择的最小值
13
  this.min = 0.0,
14
  //double类型可选命名参数,用户可以选择的最大值
15
  this.max = 1.0,
16
  //int类型可选命名参数,离散分区的数量
17
  this.divisions,
18
  //String类型可选命名参数,当滑块处于活动状态时在滑块上方显示的标签,设置离散值时显示
19
  this.label,
20
  //Color类型可选命名参数,用于滑块轨道的活动部分的颜色
21
  this.activeColor,
22
  //Color类型可选命名参数,滑块轨道的非活动部分的颜色
23
  this.inactiveColor,
24
  //SemanticFormatterCallback类型可选命名参数,用于从滑块值创建语义值的回调
25
  this.semanticFormatterCallback,
26
})
27
  
28
//如果目标平台是iOS,则创建一个CupertinoSlider,否则创建一个Material Design滑块
29
const Slider.adaptive({
30
    Key key,
31
    //double类型必传参数,该滑块当前选择的值
32
    @required this.value,
33
    //ValueChanged<double>类型必传参数,当用户通过拖动为滑块选择新值时在拖动期间调用
34
    @required this.onChanged,
35
   	//省略与Slider相同部分
36
  })

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  double currentValue = 5.0;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        color: Colors.yellow,
11
        child: Slider(					//Slider
12
          max: 50.0,
13
          min: 0.0,
14
          label: currentValue.toString(),
15
          activeColor: Colors.red,
16
          value: currentValue,
17
          onChanged: (double value){
18
            setState(() {
19
              currentValue = value;
20
            });
21
          },
22
          onChangeStart: (double startValue){
23
            print("StartValue:$startValue");
24
          },
25
          onChangeEnd: (double endValue){
26
            print("EndValue:$endValue");
27
          },
28
          divisions: 10,
29
        ),
30
      ),
31
    );
32
  }
33
}

效果如下:

2020411258

八、Dialog Widget

Dialog 是一个对话框 Widget 。该对话框小部件对对话框的内容没有任何意见。与其直接使用此小部件,不如考虑使用 AlertDialogSimpleDialog ,它们实现特定种类的材料设计对话框。构造方法如下:

1
const Dialog({
2
  Key key,
3
  //Color类型可选命名参数,对话框背景色
4
  this.backgroundColor,
5
  //double类型可选命名参数,此对话框的Z坐标
6
  this.elevation,
7
  //Duration类型可选命名参数,当系统键盘侵入对话框所在的空间时显示的动画持续时间
8
  this.insetAnimationDuration = const Duration(milliseconds: 100),
9
  //Curve类型可选命名参数,当系统键盘进入对话框所在的空间时,用于显示动画的曲线
10
  this.insetAnimationCurve = Curves.decelerate,
11
  //ShapeBorder类型可选命名参数,此对话框边框的形状
12
  this.shape,
13
  //Widget类型可选命名参数,树中此窗口小部件下方的窗口小部件
14
  this.child,
15
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  double currentValue = 5.0;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        height: 100,
11
        color: Colors.yellow,
12
        child: Dialog(				//Dialog
13
          child: Text("提示信息", style: TextStyle(fontSize: 30),),
14
          backgroundColor: Colors.lightBlue,
15
        ),
16
      ),
17
    );
18
  }
19
}

效果如下:

202041115

可以直接调用 Flutter 中提供的 showDialog() 函数显示对话框。该对话框带有模态屏障颜色和模态屏障行为(通过轻按屏障可关闭对话框)。此函数需要一个构建器,该构建器通常会构建一个 Dialog 小部件。 对话框下方的内容通过 ModalBarrier 变暗。 构建器返回的窗口小部件与最初调用 showDialog 的位置不共享上下文。 如果对话框需要动态更新,请使用 StatefulBuilder 或自定义 StatefulWidget

child 参数已弃用,应将其替换为 builder

context 参数用于查找对话框的“导航器”和“主题”。 仅在调用该方法时使用。 在关闭对话框之前,可以从树中安全删除其对应的小部件。

useRootNavigator 参数用于确定是否将对话框推到距给定上下文最远或最接近给定上下文的 Navigator 。 默认情况下,useRootNavigatortrue ,并且由此方法创建的对话框路由被推送到根导航器。

如果应用程序具有多个 Navigator对象,则可能有必要调用 Navigator.of(context, rootNavigator:true).pop(result)关闭对话框,而不仅仅是 Navigator.pop(context, result)

返回一个 Future,它解析为关闭对话框时传递给 Navigator.pop 的值(如果有)。

该函数的定义如下:

1
Future<T> showDialog<T>({
2
  @required BuildContext context,
3
  bool barrierDismissible = true,
4
  @Deprecated(
5
    'Instead of using the "child" argument, return the child from a closure '
6
    'provided to the "builder" argument. This will ensure that the BuildContext '
7
    'is appropriate for widgets built in the dialog. '
8
    'This feature was deprecated after v0.2.3.'
9
  )
10
  Widget child,
11
  WidgetBuilder builder,
12
  bool useRootNavigator = true,
13
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  double currentValue = 5.0;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Center(
10
          child: RaisedButton(
11
            child: Text("显示Dialog"),
12
            onPressed: ()=>showDialog(
13
              context: context,
14
              builder: (ctx){
15
                return Center(
16
                  child: Column(
17
                    mainAxisSize: MainAxisSize.min,
18
                    children: <Widget>[
19
                      RaisedButton(
20
                        child: Text("确定"),
21
                        onPressed: ()=> Navigator.pop(context),
22
                      ),
23
                    ],
24
                  ),
25
                );
26
              },
27
          ),
28
        ),
29
      ),
30
    );
31
  }
32
}

效果如下:

202041304

九、AlertDialog Widget

AlertDialog 是一个警告对话框 Widget 。警报对话框通知用户需要确认的情况。警报对话框具有可选的标题和可选的操作列表。标题显示在内容上方,动作显示在内容下方。

如果内容太大而无法垂直显示在屏幕上,则对话框将显示标题和操作,并让内容溢出,这是很少需要的。 考虑将滚动小部件用于内容,例如 SingleChildScrollView ,以避免溢出。 (但是,请注意,由于 AlertDialog 尝试使用其子项的固有尺寸来调整自身大小,因此使用惰性视口的 ListViewGridViewCustomScrollView 之类的小部件将无法工作。如果出现问题,请考虑直接使用 Dialog 。 )

对于为用户提供多个选项之间的选择的对话框,请考虑使用 SimpleDialog

1
const AlertDialog({
2
  Key key,
3
  //Widget类型可选命名参数,标题Widget
4
  this.title,
5
  //EdgeInsetsGeometry类型可选命名参数,围绕标题填充
6
  this.titlePadding,
7
  //TextStyle类型可选命名参数,此AlertDialog标题中的文本样式
8
  this.titleTextStyle,
9
  //Widget类型可选命名参数,对话框的(可选)内容以较浅的字体显示在对话框的中央
10
  this.content,
11
  //EdgeInsetsGeometry类型可选命名参数,围绕内容填充
12
  this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
13
  //TextStyle类型可选命名参数,此AlertDialog内容中的文本样式
14
  this.contentTextStyle,
15
  //List<Widget>类型可选命名参数,对话框底部显示的(可选)操作集
16
  this.actions,
17
  //Color类型可选命名参数,此对话框表面的背景颜色
18
  this.backgroundColor,
19
  //double类型可选命名参数,此对话框的Z坐标
20
  this.elevation,
21
  //String类型可选命名参数,辅助功能框架用于在对话框打开和关闭时宣布屏幕转换的对话框的语义标签
22
  this.semanticLabel,
23
  //ShapeBorder类型可选命名参数,此对话框边框的形状
24
  this.shape,
25
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  double currentValue = 5.0;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        height: 400,
11
        color: Colors.yellow,
12
        child: AlertDialog(					//AlertDialog
13
          title: Text("是否继续?"),
14
          content: Text("是否进行下一步操作?确定继续。"),
15
          actions: <Widget>[
16
            RaisedButton(
17
              child: Text("确定"),
18
              onPressed: ()=> print("确定"),
19
            ),
20
            RaisedButton(
21
              child: Text("取消"),
22
              onPressed: ()=> print("取消"),
23
            ),
24
          ],
25
        ),
26
      ),
27
    );
28
  }
29
}

效果如下:

2020241127

十、SimpleDialog Widget

SimpleDialog 是一个简单的对话框 Widget ,为用户提供了多个选项之间的选择。 一个简单的对话框有一个可选标题,显示在选项上方。选项通常使用 SimpleDialogOption 小部件表示。 如果使用其他小部件,请参 阅contentPadding 以获取有关获得 Material Design 期望的间距的约定的注释。

对于通知用户有关情况的对话框,请考虑使用 AlertDialog

1
const SimpleDialog({
2
  Key key,
3
  //Widget类型可选命名参数,对话框的(可选)标题以大字体显示在对话框顶部
4
  this.title,
5
  //EdgeInsetsGeometry类型可选命名参数,在标题周围填充
6
  this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
7
  //List<Widget>类型可选命名参数,对话框的(可选)内容显示在标题下方的SingleChildScrollView中
8
  this.children,
9
  //EdgeInsetsGeometry类型可选命名参数,围绕内容填充
10
  this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
11
  //Color类型可选命名参数,此对话框表面的背景色
12
  this.backgroundColor,
13
  //double类型可选命名参数,此对话框的Z坐标
14
  this.elevation,
15
  //String类型可选命名参数,辅助功能框架用于在对话框打开和关闭时宣布屏幕转换的对话框的语义标签
16
  this.semanticLabel,
17
  //ShapeBorder类型可选命名参数,此对话框边框的形状
18
  this.shape,
19
})

SimpleDialogOption 是在 SimpleDialog 中使用的选项 Widget 。SimpleDialog 为用户提供了多个选项之间的选择。该小部件通常用于表示每个选项。如果用户选择此选项,则小部件将调用 onPressed 回调,该回调通常使用 Navigator.pop 关闭对话框。

SimpleDialogOption 上的填充配置为与默认的 SimpleDialog.contentPadding 结合使用,以便每个选项在垂直方向上彼此之间的距离为 8 像素,对话框标题和第一个选项之间的距离为 20 像素,最后一个选项之间的距离为 24 像素选项和对话框底部。构造方法如下:

1
const SimpleDialogOption({
2
  Key key,
3
  //VoidCallback类型可选命名参数,选择此选项时调用的回调方法
4
  this.onPressed,
5
  //Widget类型可选命名参数,树中此窗口小部件下方的Widget
6
  this.child,
7
})

SimpleDialog 使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  double currentValue = 5.0;
3
  @override
4
  Widget build(BuildContext context) {
5
    return Scaffold(
6
      appBar: AppBar(
7
        title: Text("HomePage"),
8
      ),
9
      body: Container(
10
        height: 400,
11
        color: Colors.yellow,
12
        child: SimpleDialog(      //SimpleDialog
13
          title: Text("选项"),
14
          children: <Widget>[
15
            SimpleDialogOption(
16
              onPressed: ()=> print("1"),
17
              child: Text("点击选择1"),
18
            ),
19
            SimpleDialogOption(
20
              onPressed: ()=> print("2"),
21
              child: Text("点击选择2"),
22
            ),
23
            SimpleDialogOption(
24
              onPressed: ()=> print("3"),
25
              child: Text("点击关闭"),
26
            ),
27
          ],
28
        ),
29
      ),
30
    );
31
  }
32
}

效果如下:

202041147

SimpleDialog 的高度超过屏幕可用空间时, SimpleDialog 可以上下滚动操作。

十一、AboutDialog Widget

AboutDialog 是一个关于框。 这是一个对话框,其中包含应用程序的图标,名称,版本号和版权,以及用于显示该应用程序使用的软件的许可证的按钮。要显示 AboutDialog ,请使用 showAboutDialog

如果应用程序具有抽屉,则 AboutListTile 小部件可使显示关于对话框的过程更简单。

showAboutDialog 显示的 AboutDialog 包含一个调用 showLicensePage 的按钮。

LicensePage 上显示的许可证是由 LicenseRegistry API 返回的许可证,可用于将更多许可证添加到列表中。

构造方法如下:

1
const AboutDialog({
2
  Key key,
3
  //String类型可选命名参数,此应用程序的名称
4
  this.applicationName,
5
  //String类型可选命名参数,此应用程序版本的版本
6
  this.applicationVersion,
7
  //Widget类型可选命名参数,在应用程序名称旁边显示的图标
8
  this.applicationIcon,
9
  //String类型可选命名参数,以小写字母显示的字符串,许可、声明等信息
10
  this.applicationLegalese,
11
  //List<Widget>类型可选命名参数,在名称,版本和legalese之后添加到对话框的小部件
12
  this.children,
13
})

使用如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: AboutDialog(					//AboutDialog
9
        applicationName: "名称",
10
        applicationIcon: Icon(Icons.print),
11
        applicationVersion: "1.0.0",
12
        applicationLegalese: "说明、许可等信息",
13
        children: <Widget>[
14
          Text("其他Widget1"),
15
          Text("其他Widget2"),
16
        ],
17
      ),
18
    );
19
  }
20
}

效果如下:

202042414

也可以直接调用 showAboutDialog 方法展示关于框。方法定义如下:

1
void showAboutDialog({
2
 	//BuildContext类型必传参数,上下文
3
  @required BuildContext context,
4
  //String类型可选命名参数,应用名称
5
  String applicationName,
6
  //String类型可选命名参数,应用版本号
7
  String applicationVersion,
8
  //Widget类型可选命名参数,应用图标
9
  Widget applicationIcon,
10
  //String类型可选命名参数,以小写字母显示的字符串,许可、声明等信息
11
  String applicationLegalese,
12
  //List<Widget>类型可选命名参数,在名称,版本和legalese之后添加到对话框的小部件
13
  List<Widget> children,
14
  //bool类型可选命名参数,参数确保在设置为true时,根导航器用于显示AboutDialog。如果需要在所有其他
15
  //内容上方显示模式AboutDialog,但调用者在另一个Navigator内,则这很有用
16
  bool useRootNavigator = true,
17
})

使用方法如下:

1
class _MyHomePageState extends State<MyHomePage> {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: RaisedButton(
9
        child: Text("AboutDialog"),
10
        onPressed: ()=> showAboutDialog(			//showAboutDialog
11
          context: context,
12
          applicationName: "名称",
13
          applicationVersion: "1.0.0",
14
          applicationLegalese: "说明、许可等信息",
15
          applicationIcon: Icon(Icons.print),
16
          children: <Widget>[
17
            Text("其他Widget1"),
18
            Text("其他Widget2"),
19
          ],
20
        ),
21
      ),
22
    );
23
  }
24
}
陌问.MW wechat
欢迎关注微信公众号,及时获取知识!