Flutter中centerSlice的一些应用

centerSlice的作用是把普通的图片设置成类似于安卓中的.9图，用于图片拉伸，比如聊天的气泡。

至于什么是.9图，自行百度

 

这里只讲一下我个人的一些使用，先上用到的图片

这里方块是气泡主体，三角是左上角的拼接，这里方块是48x48

 

先上代码跟效果图

  //气泡
  _bubbleBody() {
    return Container(
      alignment: Alignment.centerLeft,
      child: Stack(
        children: <Widget>[
          Container(
              margin: EdgeInsets.fromLTRB(40, 0, 0, 0),
              child: Image.asset('asset/images/sanjiao.png',
              width: 30,
                height: 18,
              )
          ),
          
          Container(
            margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
            decoration: BoxDecoration(
              image: DecorationImage(
              //  fit: BoxFit.fill,
              //  centerSlice: Rect.fromLTRB(19.0, 13.0, 27.0, 21.0),

                centerSlice: Rect.fromLTWH(19, 13, 8, 8),
                image: AssetImage('asset/images/icon_bubble.png',),

              ),
            ),
            constraints: BoxConstraints(minWidth: 48, maxWidth: 480, ),
            //调整文字的位置，要不然会跟image并排
            padding: EdgeInsets.fromLTRB(18.5, 3.0, 14.5, 20.0),
            child: Text('点XXXXXXXXXXXXXXXXXXXXXXXX\nXXXXXXXXX\nXXXXXXXXX\nXXXXXXXXX\nXXXXXXXXX',style: TextStyle(
                color: Colors.red,
                fontSize: 15.0
            ),),

          ),
        ],
      ),
    );
  }

 

 

参考：https://blog.csdn.net/HuberCui/article/details/94738601，设定centerslice。

上边的 Rect.fromLTWH(19, 13, 8, 8)与Rect.fromLTRB(19.0, 13.0, 27.0, 21.0)等价，在代码中Rect.fromLTWH会换算成Rect.fromLTRB

 

 

 centerSlice: Rect.fromLTWH(19, 13, 8, 8),

centerSlice.Left是指从png原点开始算，往右移动19.0，作为.9图矩形的X轴原点，

centerSlice.Top是指从png原点开始算，往下移动13.0，作为.9图矩形的Y轴原点，

centerSlice.Width是指.9矩形图的宽，

centerSlice.Height是指.9矩形图的高，

 

 

centerSlice: Rect.fromLTRB(19.0, 13.0, 27.0, 21.0),

centerSlice.Left是指从png原点开始算，往右移动19.0，作为.9图矩形的X轴原点，

centerSlice.Top是指从png原点开始算，往下移动13.0，作为.9图矩形的Y轴原点，

centerSlice.Right是指从png原点开始算，往右移动27.0，作为矩形图的右边坐标，

centerSlice.Left是指从png原点开始算，往右移动21.0，作为矩形的下边坐标