Flutter类似Android 9-patch 图片的拉伸效果

使用属性

centerSlice: Rect.fromLTWH(21, 9, 10, 10)

属性详解

centerSlice 属性详解
centerSlice 是 Flutter 中 DecorationImage 的一个属性，它实现了类似于 Android 9-patch 图片的拉伸效果，允许图片在保持四个角和边框不变形的情况下，只拉伸中间部分

centerSlice: Rect.fromLTWH(21, 9, 10, 10)

这里的参数表示：

left: 21 - 从左边开始21像素处
top: 9 - 从顶部开始9像素处
width: 10 - 可拉伸区域宽度为10像素
height: 10 - 可拉伸区域高度为10像素

原理

截屏2025-03-25 09.39.23.png

实际应用

对于气泡背景这种场景，centerSlice 特别有用：

保持气泡的边缘和圆角不变形
只拉伸气泡的中间部分
可以让不同长度的文本都有合适的气泡背景

截屏2025-03-25 09.32.53.png

对于你的聊天气泡，centerSlice 的设置应该确保：

保留气泡边缘的圆角和装饰部分
只拉伸气泡的中部

如果你的 xxxx.png 气泡图片左右两侧各有21像素的边缘区域，顶部和底部各有9像素的边缘区域，那么当前设置 Rect.fromLTWH(21, 9, 10, 10) 是合适的。

但如果气泡图片的尺寸或边缘区域与此不符，你需要根据实际图片调整这些数值。例如，如果气泡图片尺寸为 60×40 像素，边缘应保持 15 像素不变，你可以设置为：

centerSlice: Rect.fromLTWH(15, 15, 30, 10)

代码部分

              Flexible(
                child: Container(
                  // 气泡容器
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    image: DecorationImage(
                      image: AssetImage(
                          "assets/images/common/prompt_background.png"),
                      centerSlice: Rect.fromLTWH(21, 9, 10, 10),
                    ),
                  ),
                  padding:
                      EdgeInsets.only(left: 21, right: 9, top: 9, bottom: 9),
                  child: Container(
                    child: Text(
                      element,
                      style: const TextStyle(
                        fontFamily: "PingFang SC",
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color: Color(0xff000000),
                      ),
                      textAlign: TextAlign.left,
                      softWrap: true,
                      overflow: TextOverflow.visible,
                    ),
                  ),
                ),
              ),