围绕文本包装容器以用于聊天气泡

Question

我正在尝试创建聊天气泡并让它们环绕文本而不扩展到屏幕的另一端。我已经看到了有关如何执行此操作的其他线程，并尝试实现它，但没有一个有效。以下是我看到并尝试实施建议修复的线程：

Flutter- wrapping text

Container text wrap

Wrap text in container without using a fixed width in Flutter

目前，当我的容器中有背景时会发生这种情况：

我的代码：

Widget build(BuildContext context) {
return new SizeTransition(
    sizeFactor: new CurvedAnimation(
        parent: animationController.view,
        curve: Curves.easeOut),
    axisAlignment: 0.0, 
    child: new Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: (text[0]=='r') ? lightVioletBlue :mintgreen,
            width: 2.0,
            style: BorderStyle.solid,
          ),
          borderRadius:  BorderRadius.all(Radius.circular(20)),
          color: (text[0] == 'r') ? lightVioletBlue:mintgreen,
        ),
        margin: const EdgeInsets.symmetric(vertical: 10.0),
        child: new Row(           
          mainAxisSize: MainAxisSize.min,            
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.only(right: 16.0),
              child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                  ? new CircleAvatar(child: new Text(_otherName[0]))
                  : null
            ),
            new Expanded(
              child: new Column(
                  crossAxisAlignment: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                      ? CrossAxisAlignment.start
                      : CrossAxisAlignment.end,
                  children: <Widget>[
                    new Text((text[0] == 'r') ? _otherName : _name, //If first letter is an r, then it indicates it's a reply.
                        style: (text[0] == 'r') ? TextStyle(color: Colors.white) : Theme.of(context).textTheme.subhead),
                    new Container(
                      margin: const EdgeInsets.only(top: 5.0),
                      child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                          ? new Text(text.substring(1), style: TextStyle(color: Colors.white))
                          : new Text(text),
                    ),
                  ],
                ),                 
            ),
            new Container(
                margin: const EdgeInsets.only(left: 16.0),
                child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                    ? null
                    : new CircleAvatar(child: new Text(_name[0]))),
            ],
          ),
        ) //new
    );   

}

我尝试在父容器上添加约束，但这需要我创建一个固定大小（至少根据我自己对颤振的理解），并且容器仍然从左侧开始。因此，来自“Ken”的消息会出现在容器的右侧，但容器会出现在屏幕中间。

Answer 1

您可以将整个消息气泡包装在 Row 中，并将 Spacer() 添加为另一个孩子：

Row(
  children: <Widget>[ messageBubble, Spacer() ]
),

将它应用到您的代码中，我们会得到这样的结果（我还优化了一些其他代码）：

Widget build(BuildContext context) {
  bool isReply = (text[0] == r);
  String name = isReply ? _otherName : name;

  Widget profilePicture = Container(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: CircleAvatar(child: Text(name[0]))
  );

  Widget messageText = Column(
    crossAxisAlignment: isReply ? CrossAxisAlignment.start : CrossAxisAlignment.end,
    children: <Widget>[
      Text(name,
        style: isReply
          ? TextStyle(color: Colors.white)
          : Theme.of(context).textTheme.subhead
      ),
      SizedBox(height: 5),
      isReply ? Text(text.substring(1), style: TextStyle(color: Colors.white))
        : Text(text),
    ],
  );

  Widget messageBubble = SizeTransition(
    sizeFactor: CurvedAnimation(
      parent: animationController.view,
      curve: Curves.easeOut
    ),
    axisAlignment: 0, 
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: isReply ? lightVioletBlue : mintgreen,
          width: 2,
          style: BorderStyle.solid,
        ),
        borderRadius: BorderRadius.circular(20),
        color: isReply ? lightVioletBlue : mintgreen,
      ),
      margin: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        mainAxisSize: MainAxisSize.min,            
        children: isReply
          ? <Widget>[ profilePicture, messageText ]
          : <Widget>[ messageText, profilePicture ],
      ),
    ),
  );

  return Row(
    children: isReply
      ? <Widget>[ messageBubble, Spacer(), ]
      : <Widget>[ Spacer(), messageBubble ]
  );
}

另请注意，您不应将消息文本用作回复的区分因素（如果消息以小写 r 开头...？）