鸿蒙NEXT版仿微信聊天App的气泡背景

上一节我们实现了仿微信聊天页面的消息左右对齐方式，那么聊天消息的气泡背景也是很有必要的，不管聊天消息有多长有多高，气泡背景都能自动跟着拉长拉高，恰当地把消息内容都包裹在气泡中，如下图所示。

在安卓系统中，气泡背景通过点九图（也叫九宫格图片）实现，利用Android Studio特制的.9.png图片，安卓App能够根据实际宽高自动拉伸点九图的指定区域。但在鸿蒙系统中，不存在特制的点九图片格式，而是通过与点九图相同功能的API设置实现，详细说明如下。

1、前景图的气泡拉伸

对于Image组件，可以通过设置resizable属性来指定ResizableOptions，也就是图像拉伸时可调整大小的图像选项。ResizableOptions的参数slice中有top、left、bottom和right四个属性，分别代表图片上下左右四个方向拉伸时保持不变距离。

比如下面代码就设置了Image组件在上下左右四个方向的拉伸距离。

Image($r('app.media.startIcon')) 
  .resizable({ slice: { top: 10, left: 10, bottom: 50, right: 50 } })

2、固定大小的背景图气泡拉伸

由于点九图的拉伸效果经常用于气泡背景，因此可引入Stack容器，把添加了resizable的Image组件当做容器背景，把实际的展示内容作为容器前景，从而实现叠加了气泡背景的聊天消息效果。

比如下面代码就往Stack容器依次放入Image组件和Text组件，由此实现聊天消息的气泡背景。

Stack() {
  Image(this.imageNine).width('100%').height('100%')
    .objectFit(ImageFit.Fill)
    .resizable({ slice: { top: 5, left: 5, bottom: 5, right: 5 } })
  Text('九宫格图片背景').width('100%').height('100%')
    .fontSize(18).textAlign(TextAlign.Center)
}.width('100%').height(60)

3、不固定大小的背景图气泡拉伸

上面的第二种方法有个缺点，就是Stack容器的宽高大小必须确定，这样Image组件才知道该拉伸到多大；否则的话，Image组件的拉伸尺寸会对不上Text组件的宽高，就会导致气泡背景过大或者过小。

为了解决第二种方法的背景拉伸区域问题，就要采用这里的第三种拉伸办法，也就是直接拉伸Text组件的背景图。

举个例子，气泡背景通常是为了包容一段文本，也就是要装得下Text组件的内容。那么Text组件需要额外设置backgroundImage、backgroundImageSize和backgroundImageResizable三个属性，其中backgroundImage指定气泡背景的图片；backgroundImageSize指定背景的覆盖尺寸，对于气泡背景来说，这里的宽高都要填100%；backgroundImageResizable指定背景在上下左右四个方向的的拉伸距离，该属性相当于Image组件的resizable属性。

比如下面代码允许给Text组件通过背景图直接设置气泡相关属性：

Text('九宫格图片背景').width('100%').height(60)
  .fontSize(18).textAlign(TextAlign.Center)
  .backgroundImage(this.imageNine)
  .backgroundImageSize({width: '100%', height: '100%'})
  .backgroundImageResizable({ slice: { top: 5, left: 5, bottom: 5, right: 5 } })

采用上述第三种的背景图气泡拉伸方式，就能实现跟随文本内容尺寸而动态调整宽高的气泡背景效果了。

下一篇文章会介绍如何给仿微信聊天App集成第三方的SocketIO库。