dart 如何使我的小部件不溢出并向下扩展长聊天消息?

osh3o9ms  于 2023-05-11  发布在  其他
关注(0)|答案(2)|浏览(97)

如何将这些聊天气泡限制在最大特定宽度(大约屏幕中间),并使长消息向下延伸,即换行文本?
聊天消息:
Lorem ipsum dolor sit amet,consectetur adipiscing elit.生活是痛苦的,是对自己的不尊重。然后再继续。Morbi et porttitor nisi.前庭是完整的,耳朵的声音是被诅咒的。你的烦恼随时都可能发生。智慧的智慧的智慧的智慧的智慧的智慧的智慧的智慧的智慧的智慧的智慧。在垫上取一份,垫上不取,中间不取。我们在这里生活。在我的生命中,你将不再是我的车,而是我的车。猫在吃东西的时候不睡觉。那时,舌头和酒肉都是自己的,孕妇的自由,永远是自己的。我的舌头不受温度的影响。整数是一个不需要痛苦的超现实的生命。不求完美,但求智慧。我爱你,我爱你,我爱你,我爱你。

验证码:

return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(flex: 10,
            child: Column(
              children: [
                Row(
                  children: [
                    Text(timestamp),
                  ],
                ),
                Container(
                  constraints: BoxConstraints(minWidth: 10, maxWidth: 200, minHeight: 15, maxHeight: 200),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(66, 135, 245, 100.0),
                    borderRadius: BorderRadius.circular(30)
                  ),
                  child: Row(
                    children: [
                      Text(text),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      );

问题图片(忽略“Hello World!“留言):

yr9zkbsy

yr9zkbsy1#

要使您的小部件不会溢出并向下扩展长聊天消息,您可以将Expanded小部件与Wrap小部件沿着使用。下面是代码的更新版本,其中包含了必要的更改:

return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Expanded(
      flex: 10,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text(timestamp),
            ],
          ),
          Container(
            constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              color: Color.fromRGBO(66, 135, 245, 100.0),
              borderRadius: BorderRadius.circular(30),
            ),
            child: Wrap(
              children: [
                Text(text),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

在此更新的代码中,聊天消息容器使用了Wrap小部件,而不是Row小部件。当文本超过BoxConstraints中指定的最大宽度时,Wrap小部件会自动换行。
我还将crossAxisAlignment: CrossAxisAlignment.start添加到Column小部件中,以将聊天消息和时间戳与容器的开头对齐。
此外,聊天消息容器的最大宽度使用MediaQuery.of(context).size.width * 0.5设置为屏幕宽度的50%。您可以根据需要调整此值以满足您的要求。
通过这些更改,长聊天消息将在指定的最大宽度内换行并向下延伸,从而防止溢出并保持聊天气泡的外观。
我希望这有助于解决这个问题。

35g0bw71

35g0bw712#

您需要使用Flexible或Expanded小部件 Package 消息文本,如下所示:

return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(flex: 10,
            child: Column(
              children: [
                Row(
                  children: [
                    Text(timestamp),
                  ],
                ),
                Container(
                  constraints: BoxConstraints(minWidth: 10, maxWidth: 200, minHeight: 15, maxHeight: 200),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(66, 135, 245, 100.0),
                    borderRadius: BorderRadius.circular(30)
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: Text(text),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      );

相关问题