Flutter中自定义气泡框效果的实现

在用户界面的设计中，气泡框（Bubble）是一种非常有效的视觉工具，它可以用来突出显示信息或提示用户。气泡框广泛应用于聊天应用、通知提示等场景。在 Flutter 中，虽然有很多现成的气泡框组件，但如果你想要更多的自定义控制，使用 CustomPainter 是一个非常好的选择。在这篇博客中，我们将介绍如何使用 CustomPainter 自定义绘制气泡框，并将其应用到 Flutter 中。
具体效果如下：

绘制气泡框

绘制气泡框
我们首先需要创建一个自定义的 CustomPainter 来绘制气泡框。以下是一个简单的 BubblePainter 类，它使用 Path 和 Paint 来绘制气泡框及其箭头。

import 'package:flutter/material.dart';

class BubblePainter extends CustomPainter {
final Color bubbleColor;
final Color borderColor;
final double arrowSize;

BubblePainter({
required this.bubbleColor,
required this.borderColor,
required this.arrowSize,
});

@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = bubbleColor
..style = PaintingStyle.fill;

final borderPaint = Paint()
  ..color = borderColor
  ..style = PaintingStyle.stroke
  ..strokeWidth = 1.0;

final path = Path()
  ..moveTo(10, 0)
  ..lineTo(size.width - 6, 0)
  ..quadraticBezierTo(size.width, 0, size.width, 6)
  ..lineTo(size.width, size.height - 6)
  ..quadraticBezierTo(size.width, size.height, size.width - 6, size.height)
  ..lineTo(6, size.height)
  ..quadraticBezierTo(0, size.height, 0, size.height - 6)
  ..lineTo(0, 14)
  ..lineTo(-arrowSize, 14 - (arrowSize / 2))
  ..lineTo(0, 14 - arrowSize)
  ..quadraticBezierTo(0, 0, 6, 0)
  ..close();

canvas.drawPath(path, paint);
canvas.drawPath(path, borderPaint);

}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
在 BubblePainter 类中，我们定义了气泡框的颜色、边框颜色和箭头大小。paint 方法负责绘制气泡框的实际内容。我们使用 Path 类绘制气泡框的形状，并通过 Paint 类设置绘制的颜色和样式。

创建自定义气泡组件
接下来，我们创建一个 CustomBubble 组件，将 BubblePainter 应用到 Flutter 的 CustomPaint 小部件中，并为气泡框添加文本内容。

class CustomBubble extends StatelessWidget {
final String text;
final TextStyle style;
final Color bubbleColor;
final Color borderColor;
final double arrowSize;

const CustomBubble(
{required this.text,
required this.style,
required this.bubbleColor,
required this.borderColor,
required this.arrowSize});

@override
Widget build(BuildContext context) {
return CustomPaint(
painter: BubblePainter(
bubbleColor: bubbleColor,
borderColor: borderColor,
arrowSize: arrowSize),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 4),
child: Text(
text,
style: style,
),
),
);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
使用自定义气泡框
在实际应用中，你可以像下面这样使用 CustomBubble 组件：

        CustomBubble(text: 'Hello Flutter',
            style: TextStyle(
              fontSize: 12
            ),
            bubbleColor: Colors.white,
            borderColor: Colors.red,
            arrowSize: 8)

1
2
3
4
5
6
7
以上代码创建了一个白色背景、红色边框的气泡框，文本内容为 “Hello Flutter”，箭头的大小为 8。

扩展和定制
以上示例提供了一种实现气泡框效果的方法，但你可以根据需要进行更多的定制和扩展。比如，你可以调整箭头的位置、改变气泡框的形状或添加渐变色效果。通过修改 BubblePainter 类中的绘制逻辑，你可以实现更加复杂和个性化的气泡框效果。

总结
通过使用 Flutter 的 CustomPainter，你可以灵活地创建自定义气泡框，并在应用中实现各种视觉效果。这种方法不仅可以用于聊天应用，还可以在提示框、通知等场景中发挥作用。希望这篇博客能帮助你理解如何使用 CustomPainter 绘制气泡框，并鼓励你在项目中应用和扩展这一技术。