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

一、InputChip Widget

InputChipChip 类似,多了一些其他的点击、选择、标记功能。构造方法如下:

1
const InputChip({
2
  Key key,
3
  //Widget类型可选命名参数,在InputChip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,InputChip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,InputChip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,InputChip内边距
10
  this.labelPadding,
11
  //bool类型可选命名参数,是否处于选中状态
12
  this.selected = false,
13
  //bool类型可选命名参数,是否为可用状态
14
  this.isEnabled = true,
15
  //ValueChanged<bool>类型可选命名参数,当InputChip在选定状态和取消选定状态之间切换时调用
16
  this.onSelected,
17
  //Widget类型可选命名参数,设置onDeleted时显示的图标
18
  this.deleteIcon,
19
  //VoidCallback类型可选命名参数,用户点击deleteIcon删除InputChip时调用
20
  this.onDeleted,
21
  //Color类型可选命名参数,删除图标的颜色。默认值基于环境IconTheme.color
22
  this.deleteIconColor,
23
  //String类型可选命名参数,该信息用于InputChip的删除按钮工具提示
24
  this.deleteButtonTooltipMessage,
25
  //VoidCallback类型可选命名参数,点击时的回调方法
26
  this.onPressed,
27
  //double类型可选命名参数,点击时相对于其父对象应用于InputChip的高程
28
  this.pressElevation,
29
  //Color类型可选命名参数,被禁用时的背景颜色
30
  this.disabledColor,
31
  //Color类型可选命名参数,选中时的背景色
32
  this.selectedColor,
33
  //String类型可选命名参数,用于InputChip主体区域(标签和化身所在的地方)的工具提示字符串
34
  this.tooltip,
35
  //ShapeBorder类型可选命名参数,InputChip的线框形状
36
  this.shape,
37
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
38
  this.clipBehavior = Clip.none,
39
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
40
  this.focusNode,
41
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
42
  this.autofocus = false,
43
  //Color类型可选命名参数,用于未选中的已启用InputChip背景的颜色
44
  this.backgroundColor,
45
  //EdgeInsetsGeometry类型可选命名参数,InputChip内容和外部形状之间的填充
46
  this.padding,
47
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
48
  this.materialTapTargetSize,
49
  //double类型可选命名参数,相对于其父级应用于InputChip的高程
50
  this.elevation,
51
  //Color类型可选命名参数,高程大于0时InputChip阴影的颜色
52
  this.shadowColor,
53
  //Color类型可选命名参数,高程大于0且已选择时InputChip阴影的颜色
54
  this.selectedShadowColor,
55
  //bool类型可选命名参数,选中时是否显示对号
56
  this.showCheckmark,
57
  //Color类型可选命名参数,可见复选标记时InputChip的复选标记的颜色
58
  this.checkmarkColor,
59
  //ShapeBorder类型可选命名参数,当选定属性为true时,在化身上绘制的半透明高光的形状
60
  this.avatarBorder = const CircleBorder(),
61
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: InputChip(
10
          avatar: CircleAvatar(
11
            child: Text("M"),
12
          ),
13
          label: Text("This is Text"),
14
          selected: true,
15
          isEnabled: true,
16
          onSelected: (bool isOnSelected)=>print(isOnSelected)
17
          deleteIcon: Icon(Icons.delete),
18
          onDeleted: ()=>print("删除"),
19
          deleteIconColor: Colors.orange,
20
          onPressed: ()=> print("点击"),
21
          pressElevation: 20,
22
          selectedColor: Colors.lightBlueAccent,
23
          tooltip: "tip",
24
          backgroundColor: Colors.deepPurpleAccent,
25
          showCheckmark: true,
26
          checkmarkColor: Colors.red,
27
        ),
28
      ),
29
    );
30
  }
31
}

效果如下:

2020331105

二、ChoiceChip Widget

ChoiceChip 代表集合中的单个选择,与 InputChip 是类似的,只介绍下构造方法如下:

1
const ChoiceChip({
2
  Key key,
3
  //Widget类型可选命名参数,在ChoiceChip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,ChoiceChip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,ChoiceChip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,ChoiceChip内边距
10
  this.labelPadding,
11
  //ValueChanged<bool>类型可选命名参数,当ChoiceChip在选定状态和取消选定状态之间切换时调用
12
  this.onSelected,
13
  //double类型可选命名参数,点击时相对于其父对象应用于ChoiceChip的高程
14
  this.pressElevation,
15
  //bool类型必传参数,是否处于选中状态
16
  @required this.selected,
17
  //Color类型可选命名参数,选中时的背景色
18
  this.selectedColor,
19
  //Color类型可选命名参数,被禁用时的背景颜色
20
  this.disabledColor,
21
  //String类型可选命名参数,用于ChoiceChip主体区域(标签和化身所在的地方)的工具提示字符串
22
  this.tooltip,
23
  //ShapeBorder类型可选命名参数,ChoiceChip的线框形状
24
  this.shape,
25
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
26
  this.clipBehavior = Clip.none,
27
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
28
  this.focusNode,
29
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
30
  this.autofocus = false,
31
  //Color类型可选命名参数,用于未选中的已启用ChoiceChip背景的颜色
32
  this.backgroundColor,
33
  //EdgeInsetsGeometry类型可选命名参数,ChoiceChip内容和外部形状之间的填充
34
  this.padding,
35
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
36
  this.materialTapTargetSize,
37
  //double类型可选命名参数,相对于其父级应用于ChoiceChip的高程
38
  this.elevation,
39
  //Color类型可选命名参数,高程大于0时ChoiceChip阴影的颜色
40
  this.shadowColor,
41
  //Color类型可选命名参数,高程大于0且已选择时ChoiceChip阴影的颜色
42
  this.selectedShadowColor,
43
  //ShapeBorder类型可选命名参数,当选定属性为true时,在化身上绘制的半透明高光的形状
44
  this.avatarBorder = const CircleBorder(),
45
})

三、FilterChip Widget

FilterChip 使用标签或描述性单词作为筛选内容的方法。构造方法如下:

1
const FilterChip({
2
  Key key,
3
  //Widget类型可选命名参数,在FilterChip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,FilterChip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,FilterChip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,FilterChip内边距
10
  this.labelPadding,
11
  //bool类型可选命名参数,是否处于选中状态
12
  this.selected = false,
13
  //ValueChanged<bool>类型可选命名参数,当FilterChip在选定状态和取消选定状态之间切换时调用
14
  @required this.onSelected,
15
  //double类型可选命名参数,点击时相对于其父对象应用于FilterChip的高程
16
  this.pressElevation,
17
  //Color类型可选命名参数,被禁用时的背景颜色
18
  this.disabledColor,
19
  //Color类型可选命名参数,选中时的背景色
20
  this.selectedColor,
21
  //String类型可选命名参数,用于FilterChip主体区域(标签和化身所在的地方)的工具提示字符串
22
  this.tooltip,
23
  //ShapeBorder类型可选命名参数,FilterChip的线框形状
24
  this.shape,
25
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
26
  this.clipBehavior = Clip.none,
27
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
28
  this.focusNode,
29
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
30
  this.autofocus = false,
31
  //Color类型可选命名参数,用于未选中的已启用FilterChip背景的颜色
32
  this.backgroundColor,
33
  //EdgeInsetsGeometry类型可选命名参数,FilterChip内容和外部形状之间的填充
34
  this.padding,
35
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
36
  this.materialTapTargetSize,
37
  //double类型可选命名参数,相对于其父级应用于FilterChip的高程
38
  this.elevation,
39
  //Color类型可选命名参数,高程大于0时FilterChip阴影的颜色
40
  this.shadowColor,
41
  //Color类型可选命名参数,高程大于0且已选择时FilterChip阴影的颜色
42
  this.selectedShadowColor,
43
  //bool类型可选命名参数,选中时是否显示对号
44
  this.showCheckmark,
45
  //Color类型可选命名参数,可见复选标记时FilterChip的复选标记的颜色
46
  this.checkmarkColor,
47
  //ShapeBorder类型可选命名参数,当选定属性为true时,在化身上绘制的半透明高光的形状
48
  this.avatarBorder = const CircleBorder(),
49
})

四、ActionChip Widget

ActionChip 是一组选项,可触发与主要内容相关的动作。 ActionChip 应在 UI 中动态和上下文地显示。

1
const ActionChip({
2
  Key key,
3
  //Widget类型可选命名参数,在ActionChip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,ActionChip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,ActionChip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,ActionChip内边距
10
  this.labelPadding,
11
  //VoidCallback类型必传参数,当用户点击ActionChip时调用的回调方法
12
  @required this.onPressed,
13
  //double类型可选命名参数,点击时相对于其父对象应用于ActionChip的高程
14
  this.pressElevation,
15
  //String类型可选命名参数,用于ActionChip主体区域(标签和化身所在的地方)的工具提示字符串
16
  this.tooltip,
17
  //ShapeBorder类型可选命名参数,ActionChip的线框形状
18
  this.shape,
19
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
20
  this.clipBehavior = Clip.none,
21
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
22
  this.focusNode,
23
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
24
  this.autofocus = false,
25
  //Color类型可选命名参数,用于未选中的已启用ActionChip背景的颜色
26
  this.backgroundColor,
27
  //EdgeInsetsGeometry类型可选命名参数,ActionChip内容和外部形状之间的填充
28
  this.padding,
29
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
30
  this.materialTapTargetSize,
31
  //double类型可选命名参数,相对于其父级应用于ActionChip的高程
32
  this.elevation,
33
  //Color类型可选命名参数,高程大于0时ActionChip阴影的颜色
34
  this.shadowColor,
35
})

五、RawChip Widget

RawChip 是所有 Chip 小部件类型汇总的基础。 通常不会直接创建它,而是使用适合该用例的其他 Chip 类型之一:

InputChip 以紧凑的形式表示一条复杂的信息,例如实体(人,地方或事物)或对话文本。

ChoiceChip 允许从一组选项中进行单个选择。

FilterChip 一种使用标签或描述性词作为过滤内容的芯片。

ActionChips 显示一组与主要内容有关的动作。

通常仅在要创建自己的自定义 Chip 类型时才使用原始 RawChip 。构造方法如下:

1
const RawChip({
2
  Key key,
3
  //Widget类型可选命名参数,在RawChip的label前显示的Widget
4
  this.avatar,
5
  //Widget类型可选命名参数,RawChip的主要内容
6
  @required this.label,
7
  //TextStyle类型可选命名参数,RawChip的label的文本样式
8
  this.labelStyle,
9
  //EdgeInsetsGeometry类型可选命名参数,RawChip内容和外部形状之间的填充
10
  this.padding,
11
  //EdgeInsetsGeometry类型可选命名参数,RawChip内边距
12
  this.labelPadding,
13
  //Widget类型可选命名参数,设置onDeleted时显示的图标
14
  Widget deleteIcon,
15
  //VoidCallback类型可选命名参数,用户点击deleteIcon删除RawChip时调用
16
  this.onDeleted,
17
  //Color类型可选命名参数,删除图标的颜色。默认值基于环境IconTheme.color
18
  this.deleteIconColor,
19
  //String类型可选命名参数,该信息用于RawChip的删除按钮工具提示
20
  this.deleteButtonTooltipMessage,
21
  //VoidCallback类型可选命名参数,点击时的回调方法
22
  this.onPressed,
23
  //ValueChanged<bool>类型可选命名参数,当RawChip在选定状态和取消选定状态之间切换时调用
24
  this.onSelected,
25
  //double类型可选命名参数,点击时相对于其父对象应用于RawChip的高程
26
  this.pressElevation,
27
  //bool类型可选命名参数,如果设置,则表明如果所有抽头回调(onSelected,onPressed)均为空,
28
  //则应禁用RawChip
29
  this.tapEnabled = true,
30
  //bool类型可选命名参数,是否处于选中状态
31
  this.selected = false,
32
  //bool类型可选命名参数,是否为可用状态
33
  this.isEnabled = true,
34
  //Color类型可选命名参数,被禁用时的背景颜色
35
  this.disabledColor,
36
  //Color类型可选命名参数,选中时的背景色
37
  this.selectedColor,
38
  //String类型可选命名参数,用于RawChip主体区域(标签和化身所在的地方)的工具提示字符串
39
  this.tooltip,
40
  //ShapeBorder类型可选命名参数,RawChip的线框形状
41
  this.shape,
42
  //Clip类型可选命名参数,内容将被裁剪(或不裁剪)
43
  this.clipBehavior = Clip.none,
44
  //FocusNode类型可选命名参数,一个可选的焦点节点,用作此小部件的焦点节点
45
  this.focusNode,
46
  //bool类型可选命名参数,如果当前未将其范围内的其他节点作为焦点,则将此小部件选择为初始焦点时为True
47
  this.autofocus = false,
48
  //Color类型可选命名参数,用于未选中的已启用RawChip背景的颜色
49
  this.backgroundColor,
50
  //MaterialTapTargetSize类型可选命名参数,配置点击目标的最小大小
51
  this.materialTapTargetSize,
52
  //double类型可选命名参数,相对于其父级应用于RawChip的高程
53
  this.elevation,
54
  //Color类型可选命名参数,高程大于0时RawChip阴影的颜色
55
  this.shadowColor,
56
  //Color类型可选命名参数,高程大于0且已选择时RawChip阴影的颜色
57
  this.selectedShadowColor,
58
  //bool类型可选命名参数,选中时是否显示对号
59
  this.showCheckmark = true,
60
  //Color类型可选命名参数,可见复选标记时RawChip的复选标记的颜色
61
  this.checkmarkColor,
62
  //ShapeBorder类型可选命名参数,当选定属性为true时,在化身上绘制的半透明高光的形状
63
  this.avatarBorder = const CircleBorder(),
64
})

六、Tooltip Widget

Tooltip 用于显示提示性信息的 Widget 。构造方法如下:

1
const Tooltip({
2
  Key key,
3
  //String类型必传参数,显示的提示文本
4
  @required this.message,
5
  //double类型可选命名参数,提示框的高度
6
  this.height,
7
  //EdgeInsetsGeometry类型可选命名参数,提示框的内边距
8
  this.padding,
9
  //EdgeInsetsGeometry类型可选命名参数,提示框的外边距
10
  this.margin,
11
  //double类型可选命名参数,子Widget和提示框间的垂直间距
12
  this.verticalOffset,
13
  //bool类型可选命名参数,提示框是否默认显示在子Widget下方
14
  this.preferBelow,
15
  //bool类型可选命名参数,提示的消息是否应从语义树中排除
16
  this.excludeFromSemantics,
17
  //Decoration类型可选命名参数,指定工具提示的形状和背景颜色
18
  this.decoration,
19
  //TextStyle类型可选命名参数,提示消息的文本样式
20
  this.textStyle,
21
  //Duration类型可选命名参数,在显示工具提示之前,指针必须悬停在工具提示的小部件上的时间长度
22
  this.waitDuration,
23
  //Duration类型可选命名参数,释放长按后显示工具提示的时间长度
24
  this.showDuration,
25
  //Widget类型可选命名参数,添加提示的Widget
26
  this.child,
27
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Tooltip(							//Tooltip
10
          message: "tip Message",
11
          height: 20,
12
          padding: EdgeInsets.all(10),
13
          preferBelow: false,
14
          decoration: BoxDecoration(
15
            color: Colors.lightBlue
16
          ),
17
          verticalOffset: 30,
18
          textStyle: TextStyle(fontSize: 20),
19
          child: Center(
20
           child: Container(child: Text("长按显示提示"), color: Colors.red,),
21
          ),
22
        ),
23
      ),
24
    );
25
  }
26
}

效果如下:

2020331206

七、Opacity Widget

Opacity 是控制子 Widget 透明度的 Widget 。此类将其子级绘制到中间缓冲区中,然后将子级混合回到部分透明的场景中。对于除 0.0 和 1.0 之外的不透明度值,此类相对昂贵,因为它需要将子级绘制到中间缓冲区中。 对于值 0.0 ,根本不会绘制该子项。 对于值 1.0 ,将立即绘制没有中间缓冲区的子对象。这比按需在树中添加和移除子部件更有效。对不透明度窗口小部件进行动画处理会直接导致该窗口小部件(可能还有其子树)重建每个帧,这不是很有效。考虑改用 AnimatedOpacity 。如果仅需要使用不透明度介于0.0到1.0之间的单个图像或颜色进行合成,则直接使用它们而不使用Opacity小部件会更快。

例如,Container(color: Color.fromRGBO(255,0,0,0.5))Opacity(opacity: 0.5, child: Container(color: Colors.red)) 快得多。

直接使用不透明性绘制图像或颜色要比在其上使用不透明性更快,因为不透明性可以将不透明性应用于一组小部件,因此将使用昂贵的屏幕外缓冲区。将内容绘制到屏幕外缓冲区中也可能会触发渲染目标切换,并且这种切换在较旧的 GPU中 特别慢。

构造方法如下:

1
const Opacity({
2
  Key key,
3
  //double类型必传参数,不透明度值,取值0.0到1.0
4
  @required this.opacity,
5
  //bool类型可选命名参数,是否始终包含孩子的语义信息
6
  this.alwaysIncludeSemantics = false,
7
  //Widget类型可选命名参数,子Widget
8
  Widget child,
9
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Opacity(					//Opacity
10
          opacity: 0.8,
11
          child: Text("Opacity"),
12
        ),
13
      ),
14
    );
15
  }
16
}

八、Visibility Widget

Visibility 用来控制显示还是隐藏子 Widget 。默认情况下,visible 属性控制子树中是否包含子项。 当它不可见时,将包括替换子项(通常为零尺寸的框)。可以使用各种标志来精确调整孩子的隐藏方式。 (不建议动态更改标志,因为这可能会导致子树重建,并且子树中的任何状态都将被丢弃。通常,仅可见标志会动态更改。)

隐藏该孩子不需要使用此小部件。隐藏子项的最简单方法就是不包含子项,或者如果必须给子项(例如,因为父项是 StatelessWidget ),则使用 SizedBox.shrink 代替要包含的子项。

构造方法如下:

1
const Visibility({
2
  Key key,
3
  //Widget类型必传参数,子Widget
4
  @required this.child,
5
  //Widget类型可选命名参数,当visible为false时,使用的Widget
6
  this.replacement = const SizedBox.shrink(),
7
  //bool类型可选命名参数,是否显示子Widget
8
  this.visible = true,
9
  //bool类型可选命名参数,在子子树不可见时是否维护其State对象
10
  this.maintainState = false,
11
  //bool类型可选命名参数,当子子树不可见时是否维护动画
12
  this.maintainAnimation = false,
13
  //bool类型可选命名参数,是否为小部件原本保留的空间
14
  this.maintainSize = false,
15
  //bool类型可选命名参数,隐藏小部件时是否维持其语义(例如,可访问性)
16
  this.maintainSemantics = false,
17
  //bool类型可选命名参数,隐藏时是否允许小部件交互
18
  this.maintainInteractivity = false,
19
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        child: Visibility(					//Visibility
10
          child: Text("Visibility"),
11
          visible: true,
12
        ),
13
      ),
14
    );
15
  }
16
}

九、ClipOval Widget

ClipOval 是一个使用椭圆形裁剪其子 Widget 的 Widget 。默认情况下,将与轴对齐的椭圆形刻入其布局尺寸,并防止其子代在该椭圆形外部绘画,但是可以使用自定义的裁剪器自定义剪贴椭圆形的大小和位置。默认情况 ClipOval 裁剪的是一个在其容器内的内切圆,可以通过改变外层容器的宽高来改变圆的形状。构造方法如下:

1
const ClipOval({
2
  Key key, 
3
  //CustomClipper<Rect>类型可选命名参数,如果非空,则使用自定义剪裁
4
  this.clipper,
5
  //Clip类型可选命名参数,控制如何裁剪
6
  this.clipBehavior = Clip.antiAlias,
7
  //Widget类型可选命名参数,子Widget
8
  Widget child
9
})

基本使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        width: 400,
10
        height: 200,
11
        color: Colors.yellow,
12
        child: ClipOval(
13
          child: Container(
14
            color: Colors.red,
15
          ),
16
        ),
17
      ),
18
    );
19
  }
20
}

效果如下:

2020331436

如果需要自定义剪裁界面,设置 clipper 属性即可。clipperCustomClipper<Rect> 类型,用于设置定义剪裁界面。其为一个抽象类,其原型定义为 CustomClipper<T> 。需要剪裁的 Widget 也都使用到了此类,如 ClipRectClipPathClipRRect ,后面会对这些进行讲解。T 是泛型设置,具体使用什么需要根据每个剪裁 Widget 的具体说明来设置。在 ClipOval 中,委托返回一个矩形,该矩形描述椭圆形的与轴对齐的边界框。 椭圆的轴本身也将与轴对齐。如果 Clipper 委托为 null ,则椭圆将使用小部件的边界框(渲染对象的布局尺寸)代替 。由于 CustomClipper<T> 是一个抽象基类,需要自定义类并继承它来具体实现。 从 CustomClipper 继承的类需要重写两个方法分别为:T getClip(Size size)bool shouldReclip(CustomClipper oldClipper)getClip 方法,每当需要更新自定义剪裁时会调用。shouldReckip 当提供类的新实例时,将调用 shouldReclip 方法,以检查新实例是否实际代表其他信息。

此例中,需要泛型为 RectRect 用于定义一个矩形,其坐标相对于给定的原点。其有以下构造方法:

1
//通过设置左、上、右、下边缘创建一个矩形
2
const Rect.fromLTRB(
3
  //double类型必传参数,此矩形左边缘与x轴的偏移量,即距离容器左侧的距离
4
  this.left,
5
  //double类型必传参数,此矩形的上边缘与y轴的偏移量,即距离容器顶部的距离
6
  this.top,
7
  //double类型必传参数,此矩形的右边缘与x轴的偏移量,即距离容器右侧的距离
8
  this.right,
9
  //double类型必传参数,该矩形底边与y轴的偏移量,即距离容器底部的距离
10
  this.bottom
11
)
12
13
//通过设置左、上边缘和宽度、高度来创建一个矩形
14
const Rect.fromLTWH(
15
  //double类型必传参数,此矩形左边缘与x轴的偏移量
16
  double left,
17
  //double类型必传参数,此矩形的上边缘与y轴的偏移量
18
  double top,
19
  //double类型必传参数,此矩形的左右边缘之间的距离,即宽度
20
  double width,
21
  //double类型必传参数,此矩形的上下边缘之间的距离,即高度
22
  double height
23
) : this.fromLTRB(left, top, left + width, top + height);
24
                                                                                        
25
//构造一个以给定圆为界的矩形                                                                                         
26
Rect.fromCircle({
27
  //Offset类型可选命名参数,在此矩形的左右边缘与上边缘和下边缘之间的中间点的偏移量,即中心点的偏移量
28
  Offset center,
29
  //double类型必传参数,圆半径
30
  double radius 
31
}) : this.fromCenter(
32
  center: center,
33
  width: radius * 2,
34
  height: radius * 2,
35
);
36
                                                                                          
37
//从其中心点,宽度和高度构造一个矩形
38
Rect.fromCenter({ 
39
  //Offset类型可选命名参数,在此矩形的左右边缘与上边缘和下边缘之间的中间点的偏移量,即中心点的偏移量
40
  Offset center,
41
  //double类型必传参数,此矩形的左右边缘之间的距离,即宽度
42
  double width,
43
  //double类型必传参数,此矩形的上下边缘之间的距离,即高度
44
  double height 
45
}) : this.fromLTRB(
46
  center.dx - width / 2,
47
  center.dy - height / 2,
48
  center.dx + width / 2,
49
  center.dy + height / 2,
50
);
51
                                                                                          
52
//构造一个最小的矩形,将给定的偏移量包围起来,将其作为原点的向量
53
Rect.fromPoints(
54
  //相对于原点(左上角)的偏移点a
55
  Offset a,
56
  ///相对于原点(左上角)的偏移点b
57
  Offset b
58
) : this.fromLTRB(
59
  math.min(a.dx, b.dx),
60
  math.min(a.dy, b.dy),
61
  math.max(a.dx, b.dx),
62
  math.max(a.dy, b.dy),
63
);

ClipOval 自定义剪裁方法如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        width: 400,
10
        height: 200,
11
        color: Colors.yellow,
12
        child: ClipOval(
13
          clipper: MyCustomClipper(),
14
          child: Container(
15
            color: Colors.red,
16
          ),
17
        ),
18
      ),
19
    );
20
  }
21
}
22
23
class MyCustomClipper extends CustomClipper<Rect> {
24
  @override
25
  getClip(Size size) {
26
    Rect rect = Rect.fromLTWH(size.width/2, size.height/2, size.width/2, size.height/2);
27
    return rect;
28
  }
29
30
  @override
31
  bool shouldReclip(CustomClipper oldClipper) {
32
    return true;
33
  }
34
}

上述的代码自定义了一个 Rect 的裁剪区域,为 Container 容器四分之一的矩形,位于右下角的位置。效果如下:

2020331601

如果想显示四分之一的椭圆,可以通过如下设置:

1
class MyCustomClipper extends CustomClipper<Rect> {
2
  @override
3
  getClip(Size size) {
4
    Rect rect = Rect.fromLTWH(-size.width, -size.height, size.width*2, size.height*2);
5
    return rect;
6
  }
7
8
  @override
9
  bool shouldReclip(CustomClipper oldClipper) {
10
    return true;
11
  }
12
}

效果如下图:

2020331614

十、ClipRect Widget

ClipRect 是一个使用矩形裁剪其子 Widget 的 Widget 。默认情况下,ClipRect 阻止其子代在其边界外绘画,但是可以使用自定义裁剪器自定义裁剪矩形的大小和位置。构造方法如下:

1
const ClipRect({ 
2
  Key key,
3
  //CustomClipper<Rect>类型可选命名参数,如果非空,则使用自定义剪裁
4
  this.clipper,
5
  //Clip类型可选命名参数,控制如何裁剪
6
  this.clipBehavior = Clip.hardEdge,
7
  //Widget类型可选命名参数,子Widget
8
  Widget child 
9
})

基本使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: ClipRect(
9
        child: Align(
10
          widthFactor: 0.5,
11
          heightFactor: 0.5,
12
          alignment: Alignment.topLeft,
13
          child: Image.network("http://www.mwpush.com/uploads/avatar.png"),
14
        ),
15
      ),
16
    );
17
  }
18
}

效果如下:

2020331700

十一、ClipRRect Widget

ClipRRect 是一个使用圆角矩形裁剪其子 Widget 的 Widget 。默认情况下,ClipRRect 使用其自身的边界作为剪辑的基本矩形,但是可以使用自定义剪辑器自定义剪辑的大小和位置。构造方法如下:

1
const ClipRRect({
2
  Key key,
3
  //BorderRadius类型可选命名参数,圆角的边界半径
4
  this.borderRadius = BorderRadius.zero,
5
  //CustomClipper<RRect>类型可选命名参数,如果非空,则使用自定义剪裁
6
  this.clipper,
7
  //Clip类型可选命名参数,控制如何裁剪
8
  this.clipBehavior = Clip.antiAlias,
9
  //Widget类型可选命名参数,子Widget
10
  Widget child,
11
})

使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        color: Colors.yellow,
10
        child: ClipRRect(
11
          borderRadius: BorderRadius.all(Radius.circular(150)), 
12
          child: Image.network("http://www.mwpush.com/uploads/avatar.png"),
13
        ),
14
      ),
15
    );
16
  }
17
}

效果如下图:

2020331708

十二、ClipPath Widget

ClipPath 是一个使用路径裁剪其子 Widget 的 Widget 。每当要绘制小部件时,都会在委托上调用回调。 回调函数返回一个路径,该小部件可防止孩子在路径外绘制。剪切路径很昂贵。 某些形状具有更优化的小部件:

要剪辑到矩形,请考虑使用 ClipRect

要剪辑为椭圆形或圆形,请考虑 ClipOval

要裁剪到圆角矩形,请考虑 ClipRRect

若要裁剪到特定的 ShapeBorder ,请考虑使用 ClipPath.shape 静态方法或 ShapeBorderClipper 自定义裁剪器类 。如果不自定义剪裁方式,则没有任何剪裁效果。

ClipPath 构造方法如下:

1
const ClipPath({
2
  Key key,
3
  //CustomClipper<Path>类型可选命名参数,如果非空,则使用自定义剪裁
4
  this.clipper,
5
  //Clip类型可选命名参数,控制如何裁剪
6
  this.clipBehavior = Clip.antiAlias,
7
  //Widget类型可选命名参数,子Widget
8
  Widget child,
9
})

自定义裁剪需要的泛型为 Path ,是平面的复杂的一维子集。由当前点和多条路径组成。子路径由各种类型的线段组成,例如线,弧或贝塞尔曲线。子路径可以是开放的或封闭的,并且可以自相交。封闭的子路径基于当 前fillType 封闭平面的一个(可能是不连续的)区域。当前点最初位于原点。在每个操作将分段添加到子路径之后,当前点将更新到该分段的末尾。可以使用 Canvas.drawPath 在画布上绘制路径,并可以使 用Canvas.clipPath 用于创建剪辑区域。有如下两个构造方法:

1
//创建一个空的路径对象
2
Path()
3
//创建另一个路径的副本
4
factory Path.from(Path source)

常用的方法如下:

1
//在给定的坐标处开始一个新的子路径
2
moveTo(double x, double y);
3
//从当前点到给定点添加一条直线段  
4
lineTo(double x, double y);
5
//关闭最后一个子路径,就好像从当前点到子路径的第一点画了一条直线,对路径做闭合操作  
6
close();

更多可查看官网说明:https://api.flutter.dev/flutter/dart-ui/Path-class.html

ClipPath 使用如下:

1
class MyHomePage extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(
6
        title: Text("HomePage"),
7
      ),
8
      body: Container(
9
        color: Colors.yellow,
10
        child: ClipPath(
11
          clipper: MyCustomClipper(),
12
          child: Image.network("http://www.mwpush.com/uploads/avatar.png"),
13
        ),
14
      ),
15
    );
16
  }
17
}
18
19
class MyCustomClipper extends CustomClipper<Path> {
20
  @override
21
  getClip(Size size) {
22
    Path path = Path();
23
    path.moveTo(0, size.height);
24
    path.lineTo(size.width/2, 0);
25
    path.lineTo(size.width, size.height);
26
    path.close();
27
    return path;
28
  }
29
30
  @override
31
  bool shouldReclip(CustomClipper oldClipper) {
32
    return true;
33
  }
34
}

效果如下:

2020331906
陌问.MW wechat
欢迎关注微信公众号,及时获取知识!