1.上边和左边是拉伸区域,右边和下边是填充区域
2.fromLTRB/fromLTWH设置区域
3.fromLTRB设置区域,说的不是很清晰
4.centerSlice的理解
拉伸区域:可以单纯的理解为对某块像素进行拉伸,那块像素自然就变得很大了,为满足内容需要的空间,就会不断拉伸那一块地方,让内容放得下
内容填充区域:即内容可以显示的地方
本文地址:https://blog.csdn.net/qq_40785165/article/details/120116188,转载需附上此链接
学而不化,非学也。
大家好,我是小黑,一个还没秃头的程序员~~~
最近想做一个Flutter版的简易聊天交友软件,可以当成是自己的Flutter实战经验,说到聊天软件肯定涉及聊天气泡,原生中的气泡背景一般都直接使用.9图,那么Flutter中如何实现缩放背景呢,这就是这次要介绍的centerSlice组件了,效果如下:
以下是我找的背景(113x48)
话不多说直接上代码:
ConstrainedBox(
//没有下面的最小高度的话,当只有一行文字的时候.9图片无法显示
constraints: BoxConstraints(minHeight: 50),
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
decoration: BoxDecoration(
image: DecorationImage(
centerSlice: Rect.fromLTRB(20, 20, 38, 38),
image: AssetImage(
'assets/images/bg_message_right.png',
),
)),
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200),
child: Text(
"${messageBeanData.messageContent}",
),
)),
)
注意:
这里的气泡背景是作为Container的背景展示的,在Container外层需要再套一层ConstrainedBox,并设置最小高度minHeight,否则当当只有一行文字的时候背景图片无法显示,并报以下错误:
centerSlice was used with a BoxFit that does not guarantee that the image is fully visible
Failed assertion: line 465 pos 12: 'sourceSize == inputSize'
可以使用fromLTRB/fromLTWH设置.9图片区域,计算方法不同而已
Rect.fromLTRB(this.left, this.top, this.right, this.bottom):四个参数即区域四个方向的长度,距离都是以原图左上角(0,0)作为原点进行相对计算的
Rect.fromLTWH(double left, double top, double width, double height):前两个参数代表.9图左上的点坐标,后面两个参数分别代表区域的宽和高,这样划分出来的区域即.9图的区域了
centerSlice: const Rect.fromLTRB(60, 27, 85, 53),
四个数值,就是伸缩区域的 top、left、right、button。
应该可以简单的理解:centerSlice是设置拉伸的区域 ,四个角就不会被拉伸了
还有一个关键的点,设置点九后不显示
我的理解是,你设置了中间的这个正方形拉伸区域,那你的内容,高度最起码要超过正方形的低边高度,可以设置最小高度,宽度最起码要超过正方形的右边宽度,也可以设置最小宽度,这时候才能正常拉伸。也就是说你的内容高度要大于35,内容宽度要大于35