如何在flutter中实现聊天气泡形状的小部件

Question

我想设计一个聊天气泡形状的小部件，其中一个角被固定，并且其高度应该根据文本行进行调整？现在我正在使用带有一些 borderRadius 的 ClipRRect 小部件。但我想固定一个角。有什么建议 ？

更新

我知道这可以使用堆栈来完成，但我正在寻找更好的解决方案，因为我必须在单个视图中多次使用它，并且使用许多堆栈可能会影响执行。（如果我错了请纠正我）

Answer 1

对于那些想要通过图书馆完成此任务的人。您可以从 pub.dev 添加bubble: ^1.1.9+1（获取最新）包并用 Bubble 包装您的消息。

Bubble(
style: right ? styleMe : styleSomebody,
//Your message content child here...
)

这right是布尔值，它告诉气泡在右侧还是左侧，为此编写逻辑并添加样式属性styleMe并styleSomebody在小部件内添加样式属性，如下所示。根据您的主题更改样式。

double pixelRatio = MediaQuery.of(context).devicePixelRatio;
double px = 1 / pixelRatio;

 BubbleStyle styleSomebody = BubbleStyle(
      nip: BubbleNip.leftTop,
      color: Colors.white,
      elevation: 1 * px,
      margin: BubbleEdges.only(top: 8.0, right: 50.0),
      alignment: Alignment.topLeft,
    );

    BubbleStyle styleMe = BubbleStyle(
      nip: BubbleNip.rightTop,
      color: Colors.grey,
      elevation: 1 * px,
      margin: BubbleEdges.only(top: 8.0, left: 50.0),
      alignment: Alignment.topRight,
    );

Answer 2

抱歉，我无法向您展示它的代码，但我可以提出一个如果您正确实现它可能会起作用的想法。假设您使用的 WidgetClipRect名为MyChatBubbleRect。现在，制作另一个使用CustomPainter绘制三角形的小部件，我们称之为MyChatBubbleTriangle，当然用与聊天气泡相同的颜色填充它，但您可以最初使用不同的颜色进行调试。现在我们有了两个小部件，我们可以将它们堆叠在一起，并在MyChatBubbleTriangle. 像这样的东西：

Stack(
  children : [
     MyChatBubbleRect(), // Maybe decrease the width a bit
     Positioned(
        top: 0,
        right: 0,
        child: MyChatBubbleTriangle()
     )
  ]
)

这只是我认为你可以追求的一个想法。抱歉无法提供正确的源代码。