前言

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

上面這種是比較普通的，這篇我們玩點有趣的，讓聊天氣泡是漸變色的?？赡芎芏嗳藭X得漸變很簡單，給 Container 來個decoration或者使用 DecoratedBox，使用漸變填充色就可以了，比如下面這種效果： 這個感覺也太丑了，本篇我們來一個高級的 —— 整個聊天窗口的氣泡顏色是漸變的，而且隨著滾動還會變化！先看看實現(xiàn)的效果，這里有兩個效果：

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

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

代碼實現(xiàn)

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

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

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

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

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

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

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

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

有了這個相對位置，那么我們就可以把全部漸變顏色填充找到當(dāng)前位置氣飽應(yīng)該要填充的顏色，這里需要使用到 LinearGradient 的一個 transform 參數(shù)。transform是一個 GradientTransform對象，實際是通過三維空間的轉(zhuǎn)變實現(xiàn)的。這里我們自定義一個GradientTransform類為 ScrollGradientTransform，覆蓋了GradientTransform的 transform 方法，實際只是實現(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ù)號主要是往上滾的時候 origin.dy 是負(fù)數(shù)，為保持和設(shè)定的漸變色次序一樣，才加上了負(fù)號。當(dāng)然，如果是 橫向滾動，就需要根據(jù)橫向的方向決定origin.dx要不要加負(fù)號了。 有了這個之后，我們只需要繪制一個圓角矩形就好了，實際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;
  }
}

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

踩坑記錄

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

總結(jié)

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

以上就是Android實現(xiàn)好看的微信聊天氣泡效果的詳細(xì)內(nèi)容，更多關(guān)于Android聊天氣泡的資料請關(guān)注腳本之家其它相關(guān)文章！