容器文本换行答案

【问题标题】：Container text wrap容器文本换行
【发布时间】：2019-06-29 08:45:57
【问题描述】：

我正在尝试创建聊天气泡，并找到了我正在尝试修改的 sn-p。我已经走了很远，但无法让气泡环绕文本。我确实找到了Wrap text in container without using a fixed width in Flutter 并遵循了那里的想法，但它们对我不起作用。谁能提供一些见解？

图像显示了我使用以下代码得到的结果，但如上所述，我希望气泡环绕文本，除非需要，否则不会完全延伸到边缘。

class Bubble extends StatelessWidget {
  Bubble(
      {this.author, this.message, this.time, this.delivered, this.isEmployee});
  final String message, time, author;
  final delivered, isEmployee;
  @override
  Widget build(BuildContext context) {
    final rowAlignment =
        isEmployee ? MainAxisAlignment.start : MainAxisAlignment.end;
    final bg =
        isEmployee ? Colors.greenAccent.shade100 : Colors.blueAccent.shade100;
    final align =
        isEmployee ? CrossAxisAlignment.start : CrossAxisAlignment.end;
    final icon = delivered ? Icons.done_all : Icons.done;
    final radius = isEmployee
        ? BorderRadius.only(
            topRight: Radius.circular(5.0),
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(5.0),
          )
        : BorderRadius.only(
            topLeft: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
            bottomRight: Radius.circular(10.0),
          );
    return Column(
      crossAxisAlignment: align,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.all(3.0),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  blurRadius: .5,
                  spreadRadius: 1.0,
                  color: Colors.black.withOpacity(.12))
            ],
            color: bg,
            borderRadius: radius,
          ),
          child: Column(
            crossAxisAlignment: align,
            children: <Widget>[
              Text(author, style: TextStyle(fontWeight: FontWeight.bold)),
              Text(message),
              Row(mainAxisAlignment: rowAlignment, children: <Widget>[
                Text(time,
                    style: TextStyle(
                      color: Colors.black38,
                      fontSize: 10.0,
                    )),
                SizedBox(width: 3.0),
                Icon(
                  icon,
                  size: 12.0,
                  color: Colors.black38,
                )
              ])
            ],
          ),
        )
      ],
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

将您的第一个 Column 包装在 FittedBox 小部件中。

FittedBox(
      fit: BoxFit.contain,
      child: Column(
       ....

【讨论】：

试过了，但没有正常工作，由于某种原因，第一个气泡非常小，其余的非常大。

【解决方案2】：

您可以将Row 上的mainAxisSize 设置为ManAxisSize.min

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: rowAlignment,
  children: <Widget>[
    Text(
      time,
      style: TextStyle(
        color: Colors.black38,
        fontSize: 10.0,
      ),
    ),
    SizedBox(width: 3.0),
    Icon(
      icon,
      size: 12.0,
      color: Colors.black38,
    ),
  ],
);

【讨论】：