如何在Flutter中实现聊天气泡状的小部件 [英] How to implement a Chat bubble shaped widget in flutter

问题描述

我想设计一个聊天气泡形状的小部件，其中的一个角固定在其中，并且其高度应适应文本的线条?现在，我使用带有一些borderRadius的ClipRRect小部件.但是我想固定一个角落.有什么建议 ?

I want to design a widget of shape of a chat bubble where one corner is pinned and its height should adjust to the lines of the text? For now I'm using ClipRRect widget with some borderRadius. But I want one corner pinned. Any suggestions ?

更新

我知道可以使用堆栈来完成此操作，但是我正在寻找更好的解决方案，因为我必须在单个视图中多次使用它，并且使用多个堆栈可能会影响性能. (如果我错了，请在这里纠正我)

I know this can be done using a stack but I'm looking for a better solution since I have to use it many times in a single view and using many stacks might affect the performs. ( correct me here if I'm wrong )

推荐答案

适用于希望通过库完成此操作的人.您可以从pub.dev添加bubble: ^1.1.9+1(最新)软件包，并用Bubble包装您的消息.

For someone who want this get done with library. You can add bubble: ^1.1.9+1 (Take latest) package from pub.dev and wrap your message with Bubble.

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

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

Here right is boolean which tells the bubble is at right or left, Write your logic for that and add the style properties styleMe and styleSomebody inside your widget as shown below. Change style according to your theme.

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,
    );

这篇关于如何在Flutter中实现聊天气泡状的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！