
微信交流群
# Banner
在父组件的角上显示一个对角线的消息的控件,比如debug模式下,显示在App右上角的DEBUG
就是此组件实现的。
用法如下:
Banner(
message: '老孟',
location: BannerLocation.topStart,
)
1
2
3
4
2
3
4
效果如下:
默认情况下Banner超出了父控件的范围,可以使用ClipRect
截取超出的部分。
设置背景颜色、消息样式及位置:
Banner(
message: '老孟',
location: BannerLocation.topEnd,
color: Colors.blue,
textStyle: TextStyle(color: Colors.red),
)
1
2
3
4
5
6
2
3
4
5
6
效果如下:
设置child
参数,child显示在消息后面:
Banner(
message: '老孟',
child: Container(color: Colors.yellow,),
location: BannerLocation.topEnd,
)
1
2
3
4
5
2
3
4
5
# CheckedModeBanner
封装了Banner
,MaterialApp
使用此控件在右上角显示DEBUG
标签,源代码如下:
build(BuildContext context) {
Widget result = child;
assert(() {
result = Banner(
child: result,
message: 'DEBUG',
textDirection: TextDirection.ltr,
location: BannerLocation.topEnd,
);
return true;
}());
return result;
}
Widget
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
版权所有,禁止私自转发、克隆网站。