Flutter .9图

Flutter 点九图

1.这里的气泡背景是作为Container的背景展示的，在Container外层需要再套一层ConstrainedBox，并设置最小高度minHeight，否则当当只有一行文字的时候背景图片无法显示，并报以下错误：
2.可以使用fromLTRB/fromLTWH设置.9图片区域，计算方法不同而已
3.Rect.fromLTRB(this.left, this.top, this.right, this.bottom):四个参数即区域四个方向的长度，距离都是以原图左上角（0，0）作为原点进行相对计算的
4.Rect.fromLTWH(double left, double top, double width, double height)：前两个参数代表.9图左上的点坐标，后面两个参数分别代表区域的宽和高，这样划分出来的区域即.9图的区域了

Container(
  padding: EdgeInsets.only(left: 16, top: 12, right: 36, bottom: 12),
    decoration: const BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.fill,
        centerSlice: Rect.fromLTRB(16, 12, 110, 58),
        image: AssetImage('assets/images/area_ar_tour/comment_bg.png')
      )
    ),
    child: ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 82, maxWidth: Get.width * 0.55),
      child: Column(
        children: [
          Text('景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称景区名称', style: TextStyle(
          color: Color(0xFF000000),
          fontSize: 14
        )),          
      ],
    ),
  )
)