flutter 点九设置

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

猜你喜欢