容器文字换行 [英] Container text wrap

问题描述

我正在尝试创建聊天气泡，并且找到了我要修改的代码段.我已经走得很远了，但是无法使气泡包裹在文本周围.我确实找到了将文本包装在容器中而不使用在Flutter中固定宽度，并沿用了那里的想法，但是它们对我没有用.谁能提供一些见识?

I am trying to create chat bubbles, and have found a snippet that I am trying to modify. I have come pretty far but can't get the bubbles to wrap around the text. I did find Wrap text in container without using a fixed width in Flutter and followed the ideas there, but they didn't work for me. Can anyone provide some insight?

该图像显示了我用下面的代码得到的内容，但是如上所述，我希望气泡能包裹文本，除非需要，否则不要完全延伸到边缘.

The image shows what I'm getting with the below code, but as mentioned, I want the bubbles to wrap around the text and not fully extend to the edges unless required.

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

推荐答案

您可以将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,
    ),
  ],
);

这篇关于容器文字换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！