user-interface - 限制 Flutter 中 Container 的最大宽度

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 有任何变化，但对于长文本，我希望它看起来像这样。

score 141 · Accepted Answer

您可以使用以下首选向容器小部件添加约束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
    )
  ],  
);
}

我希望这有帮助！

score 22 · Accepted Answer

使用ConstrainedBoxwith BoxConstraints maxWidth, 包裹在一个Flexible()小部件中。灵活的小部件还允许框调整大小以适应较小的屏幕。

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

score 10 · Accepted Answer

这需要在内部Row或ColumnWidget

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允许它的子级扩展到给定的约束/大小。

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

score 4 · Accepted Answer

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

使用maxWidth和minWidth价值来实现需求。

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

如果您希望仅显示一行文本，请注意maxLines可能有用的属性。

score 1 · Accepted Answer

这就是我修复它的方法

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

score 1 · Accepted Answer

也许在文本周围使用 Flexible 然后将 Flexible 包装在固定大小的容器中？只是一个想法。

score 0 · Accepted Answer

在我的情况下，我的解决方案是：包装在 Row 中并添加 Spacer（在评论气泡小部件中，我没有定义任何最大宽度。它的增长取决于文本。限制宽度添加填充到评论气泡。

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

score 0 · Accepted Answer

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

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

user-interface - 限制 Flutter 中 Container 的最大宽度

10 回答 10

Related

Reference