讓你的 App 的聊天氣泡豐富多彩！

前言

在聊天類應用中，通常用氣泡作爲聊天內容的背景色，比如微信的聊天背景，別人發過來的是白色的氣泡，自己發的是綠色的氣泡。

上面這種是比較普通的，這篇我們玩點有趣的，讓聊天氣泡是漸變色的。可能很多人會覺得漸變很簡單，給 Container 來個decoration或者使用 DecoratedBox，使用漸變填充色就可以了，比如下面這種效果：

這個感覺也太醜了😂😂😂，本篇我們來一個高級的 —— 整個聊天窗口的氣泡顏色是漸變的，而且隨着滾動還會變化！先看看實現的效果，這裏有兩個效果：

• 整個窗口的聊天氣泡背景色是連續漸變的，而不是每個氣泡重複的漸變。

• 滾動的時候，氣泡的背景色會隨着滾動的位置變化。

  
  

代碼實現

使用 Container 的 decoration 或 DecoratedBox 只能在渲染之前就確定好背景色，因此沒法在繪製過程中動態改變氣泡的背景色，要動態改變氣泡背景色就需要自己繪製背景，那就需要使用到 CustomPaint。

首先，我們來看如何繪製漸變背景色。畫筆 Paint 對象有個shader 屬性，可以配置繪製時的填充行爲。來源可以是漸變填充的 Gradient 對象，或是圖片的 Image 對象。比如我們要用線性漸變填充，那就可以使用下面的代碼實現：

final paint = Paint()
  ..shader = LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: colors
  ).createShader(rect);

其中 createShader 函數就是用於將Gradient 轉換爲 shader對象。這裏需要傳一個矩形，即填充的矩形範圍，這個參數我們可以利用來實現整個窗口的漸變填充，比如滾動的窗口我們可以設置爲整個滾動窗口的矩形，這樣填充範圍就可以從當前氣泡繪製的擴大到整個聊天窗口。

接下來是如何讓當前氣泡的填充色跟隨滾動位置變化而變化。這裏需要做兩個操作：

• 獲取滾動過程中氣泡在窗口的位置；
• 將填充色轉變到氣泡滾動的位置。

獲取滾動過程中氣泡在窗口的位置需要使用滾動狀態的 ScrollableState 對象，這個可以通過 Scrollable.of(context)獲取，這個方法會從組件樹中最近的滾動組件中獲取滾動狀態對象，如果沒有找到滾動組件的話則返回 null。ScrollableState中可以找到當前渲染的滾動組件的窗口矩形，有了這個矩形，我們就可以獲知氣泡在滾動窗口的相對位置了，這個需要使用 localToGlobal 方法實現，代碼如下：

final scrollableBox =
        scrollableState.context.findRenderObject() as RenderBox;
final bubbleBox = context.findRenderObject() as RenderBox;
final origin =
    bubbleBox.localToGlobal(Offset.zero, ancestor: scrollableBox);

有了這個相對位置，那麼我們就可以把全部漸變顏色填充找到當前位置氣飽應該要填充的顏色，這裏需要使用到 LinearGradient 的一個 transform 參數。transform是一個 GradientTransform對象，實際是通過三維空間的轉變實現的。這裏我們自定義一個GradientTransform類爲 ScrollGradientTransform，覆蓋了GradientTransform的 transform 方法，實際只是實現了三維的平移而已：

class ScrollGradientTransform extends GradientTransform {
  const ScrollGradientTransform(this.dx, this.dy, this.dz);

  final double dx, dy, dz;

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()..translate(dx, dy, dz);
  }
  
  //...
}

然後我們將ScrollGradientTransform給 LinearGradient 的 transform 參數：

LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: colors,
  transform: ScrollGradientTransform(
    -origin.dx,
    -origin.dy,
    0.0,
),

這裏取負號主要是往上滾的時候 origin.dy 是負數，爲保持和設定的漸變色次序一樣，才加上了負號。當然，如果是 橫向滾動，就需要根據橫向的方向決定origin.dx要不要加負號了。
有了這個之後，我們只需要繪製一個圓角矩形就好了，實際CustomPaint 的 Painter 繪製代碼很簡單，代碼如下：

class BubbleBackgroundPainter extends CustomPainter {
  final List<Color> colors;
  final ScrollableState scrollableState;
  final BuildContext context;
  const BubbleBackgroundPainter({
    Key? key,
    required this.colors,
    required this.scrollableState,
    required this.context,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final scrollableBox =
        scrollableState.context.findRenderObject() as RenderBox;
    final bubbleBox = context.findRenderObject() as RenderBox;
    final origin =
        bubbleBox.localToGlobal(Offset.zero, ancestor: scrollableBox);

    final scrollableRect = Offset.zero & scrollableBox.size;
    final paint = Paint()
      ..shader = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: colors,
        transform: ScrollGradientTransform(
          -origin.dx,
          -origin.dy,
          0.0,
        ),
      ).createShader(scrollableRect);

    canvas.drawRRect(
        RRect.fromRectAndRadius(
          Offset.zero & size,
          Radius.circular(10.0),
        ),
        paint);
  }

  @override
  bool shouldRepaint(covariant BubbleBackgroundPainter oldDelegate) {
    return oldDelegate.scrollableState != scrollableState ||
        oldDelegate.context != context ||
        oldDelegate.colors != colors;
  }
}

完整代碼已經提交到：繪圖相關代碼，文件名爲：gradient_background_bubble.dart。

踩坑記錄

這裏調試過程發現了一個小坑，就是首次加載的時候是有漸變的，結果滾動後漸變效果消失了，當時百思不得其解，折騰了好久。後面纔想起來是列表性能優化時的繪製緩存機制導致的，需要手動設置 ListView 的addRepaintBoundaries爲 false，以讓每次滾動的時候不復用之前的繪製結果，當然這樣會有些性能上的損失。

總結

本篇使用 CustomPaint，通過計算當前繪製的氣泡在滾動過程的中的相對位置實現了聊天氣泡整個窗口漸變的效果，而且氣泡會隨着滾動位置不同的填充顏色也不同。相比之前的單一顏色的聊天氣泡來說，這種氣泡更加有趣，豐富多彩！實際上，對於本篇的漸變繪製我們可以理解爲在窗口預先配置了漸變色，只是不會真的渲染，等到繪製氣泡的時候才把窗口的漸變色作爲氣泡的背景色，於是就有了本篇的效果。