前言

在聊天類應(yīng)用中，通常用氣泡作為聊天內(nèi)容的背景色，比如微信的聊天背景，別人發(fā)過來的是白色的氣泡，自己發(fā)的是綠色的氣泡。

普通聊天氣泡

普通漸變填充

這個(gè)感覺也太丑了??????，本篇我們來一個(gè)高級(jí)的 —— 整個(gè)聊天窗口的氣泡顏色是漸變的，而且隨著滾動(dòng)還會(huì)變化！先看看實(shí)現(xiàn)的效果，這里有兩個(gè)效果：

• 整個(gè)窗口的聊天氣泡背景色是連續(xù)漸變的，而不是每個(gè)氣泡重復(fù)的漸變。

• 滾動(dòng)的時(shí)候，氣泡的背景色會(huì)隨著滾動(dòng)的位置變化。

  
  
  漸變氣泡背景效果

代碼實(shí)現(xiàn)

使用 Container 的 decoration 或 DecoratedBox 只能在渲染之前就確定好背景色，因此沒法在繪制過程中動(dòng)態(tài)改變氣泡的背景色，要?jiǎng)討B(tài)改變氣泡背景色就需要自己繪制背景，那就需要使用到 CustomPaint。

首先，我們來看如何繪制漸變背景色。畫筆 Paint 對(duì)象有個(gè)shader 屬性，可以配置繪制時(shí)的填充行為。來源可以是漸變填充的 Gradient 對(duì)象，或是圖片的 Image 對(duì)象。比如我們要用線性漸變填充，那就可以使用下面的代碼實(shí)現(xiàn)：

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

其中 createShader 函數(shù)就是用于將Gradient 轉(zhuǎn)換為 shader對(duì)象。這里需要傳一個(gè)矩形，即填充的矩形范圍，這個(gè)參數(shù)我們可以利用來實(shí)現(xiàn)整個(gè)窗口的漸變填充，比如滾動(dòng)的窗口我們可以設(shè)置為整個(gè)滾動(dòng)窗口的矩形，這樣填充范圍就可以從當(dāng)前氣泡繪制的擴(kuò)大到整個(gè)聊天窗口。

接下來是如何讓當(dāng)前氣泡的填充色跟隨滾動(dòng)位置變化而變化。這里需要做兩個(gè)操作：

• 獲取滾動(dòng)過程中氣泡在窗口的位置；
• 將填充色轉(zhuǎn)變到氣泡滾動(dòng)的位置。

獲取滾動(dòng)過程中氣泡在窗口的位置需要使用滾動(dòng)狀態(tài)的 ScrollableState 對(duì)象，這個(gè)可以通過 Scrollable.of(context)獲取，這個(gè)方法會(huì)從組件樹中最近的滾動(dòng)組件中獲取滾動(dòng)狀態(tài)對(duì)象，如果沒有找到滾動(dòng)組件的話則返回 null。ScrollableState中可以找到當(dāng)前渲染的滾動(dòng)組件的窗口矩形，有了這個(gè)矩形，我們就可以獲知?dú)馀菰跐L動(dòng)窗口的相對(duì)位置了，這個(gè)需要使用 localToGlobal 方法實(shí)現(xiàn)，代碼如下：

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

有了這個(gè)相對(duì)位置，那么我們就可以把全部漸變顏色填充找到當(dāng)前位置氣飽應(yīng)該要填充的顏色，這里需要使用到 LinearGradient 的一個(gè) transform 參數(shù)。transform是一個(gè) GradientTransform對(duì)象，實(shí)際是通過三維空間的轉(zhuǎn)變實(shí)現(xiàn)的。這里我們自定義一個(gè)GradientTransform類為 ScrollGradientTransform，覆蓋了GradientTransform的 transform 方法，實(shí)際只是實(shí)現(xiàn)了三維的平移而已：

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 參數(shù)：

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

這里取負(fù)號(hào)主要是往上滾的時(shí)候 origin.dy 是負(fù)數(shù)，為保持和設(shè)定的漸變色次序一樣，才加上了負(fù)號(hào)。當(dāng)然，如果是 橫向滾動(dòng)，就需要根據(jù)橫向的方向決定origin.dx要不要加負(fù)號(hào)了。
有了這個(gè)之后，我們只需要繪制一個(gè)圓角矩形就好了，實(shí)際CustomPaint 的 Painter 繪制代碼很簡(jiǎn)單，代碼如下：

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;
  }
}

完整代碼已經(jīng)提交到：繪圖相關(guān)代碼，文件名為：gradient_background_bubble.dart。

踩坑記錄

這里調(diào)試過程發(fā)現(xiàn)了一個(gè)小坑，就是首次加載的時(shí)候是有漸變的，結(jié)果滾動(dòng)后漸變效果消失了，當(dāng)時(shí)百思不得其解，折騰了好久。后面才想起來是列表性能優(yōu)化時(shí)的繪制緩存機(jī)制導(dǎo)致的，需要手動(dòng)設(shè)置 ListView 的addRepaintBoundaries為 false，以讓每次滾動(dòng)的時(shí)候不復(fù)用之前的繪制結(jié)果，當(dāng)然這樣會(huì)有些性能上的損失。

總結(jié)

本篇使用 CustomPaint，通過計(jì)算當(dāng)前繪制的氣泡在滾動(dòng)過程的中的相對(duì)位置實(shí)現(xiàn)了聊天氣泡整個(gè)窗口漸變的效果，而且氣泡會(huì)隨著滾動(dòng)位置不同的填充顏色也不同。相比之前的單一顏色的聊天氣泡來說，這種氣泡更加有趣，豐富多彩！實(shí)際上，對(duì)于本篇的漸變繪制我們可以理解為在窗口預(yù)先配置了漸變色，只是不會(huì)真的渲染，等到繪制氣泡的時(shí)候才把窗口的漸變色作為氣泡的背景色，于是就有了本篇的效果。