Question

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

这是我的小部件的构建方法，它根据我作为msg参数传递的内容来呈现此UI

加载文字
一些很长的文字

现在我面临的问题是我无法在不设置宽度的情况下将文本包装在此容器/蓝色框中，但是如果我设置了容器/蓝色框的宽度，那么不管它有多短，它将始终保持该宽度文字是。

现在有没有办法设置容器/蓝盒的maxWidth（比如说500）？这样，蓝框将变得像“正在加载”之类的小文本一样宽，对于长文本，它会一直扩展到达到500个单位的宽度，然后包装文本？

长文本的必需输出：

对于小文本（如加载），我不想在UI中进行任何更改，但对于长文本，我希望它看起来像这样。

Answer 1

将ConstrainedBox与BoxConstraints maxWidth

ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 150),
    child: Container(
        color : Colors.blue,
        child: Text('Your Text here'),
    ),
)

Answer 2

这是我用于长文本的简单方法：

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Container(
    child: Text(
      'Long string of text',
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
  ),
)

请注意maxLines属性，如果您只想显示一行文字，可能会有所帮助。

Answer 3

我就是这样解决的

Center(
    child: Container(
      child: this.child,
      width: 300,
      height: double.infinity,
    ),
  )

Answer 4

也许在文本周围使用柔性包装，然后将柔性包装包裹在固定大小的容器中？只是一个主意。

Answer 5

您可以使用首选maxWidth向容器窗口小部件添加约束，如下所示：

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

我希望这会有所帮助！

Answer 6

我知道来晚了，但是将来有人会得到帮助。
我使用了 auto_size_text插件来完成它：

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

Answer 7

在Constraints小部件中使用Container属性。

使用maxWidth和minWidth值达到要求。

 Container(
      constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5)),
      child: Text("")
    )

Answer 8

此代码必须位于Row或Column小部件中

1。行

  Row(
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

2。列

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

在两个示例中，它都是有效的，因为Column和Row允许子级扩展到给定的约束/大小。

注意：如果孩子想要的尺寸与父母的尺寸不同，而父母没有足够的信息来对齐它，那么孩子的尺寸可能会被忽略。

Answer 9

就我而言，我的解决方案是这样的：包裹在 Row 中并添加 Spacer（在评论气泡小部件中，我没有定义任何宽度或最大宽度。它的增长取决于文本。限制宽度为评论气泡添加填充。

return Row(
      children: [
          CommentBubble(
              chatText: snapshot.get('text'),
              sentAt: snapshot.get('sentAt'),
              sendBy: snapshot.get('sendBy'),
          ),
          Spacer(),
      ],
);

Answer 10

对我来说，至少将约束框放在 IntrinsicWidth 中已经解决了问题。

IntrinsicWidth(
  child: Container(
    constraints: BoxConstraints(maxWidth: 200),
    child: Row(
      children: [
       
      ],
    ),
  ),
);

Answer 11

将文本与“ \”连接起来，它将转到下一行

限制Flutter中容器的最大宽度

11 个答案: