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

问题描述

我想设计一个聊天气泡形状的小部件，其中一个角被固定并且它的高度应该适应文本的线条?现在我正在使用带有一些边框半径的 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 (Take latest) 包并用 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,
    );

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