限制 Flutter 中 Container 的最大宽度

Posted 2023-02-23

【中文标题】限制 Flutter 中 Container 的最大宽度

【英文标题】：Limit max width of Container in Flutter

【发布时间】：2019-08-06 16:36:17

【问题描述】：

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

【参考方案1】：

您可以使用首选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
    )
  ],  
);

我希望这会有所帮助！

【参考方案2】：

将ConstrainedBox 与BoxConstraints maxWidth 一起使用，封装在Flexible() 小部件中。灵活的小部件还允许框调整大小以适应较小的屏幕。

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

【讨论】：

我刚试了一下，问题是如果屏幕不够大，会溢出屏幕。

已修复！只需将这个 ConstrainerBox 放入一个 Flexible :·)

【参考方案3】：

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

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

【参考方案4】：

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

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

注意maxLines 属性，如果您希望只显示一行文本，它可能会有所帮助。

【参考方案5】：

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

使用maxWidth & minWidth 值来达到要求。

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

【参考方案6】：

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

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

【参考方案7】：

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

【讨论】：

我不想给容器提供固定大小，因为容器是提供蓝色背景的容器，如果我给它一个固定大小，那么即使我显示“加载”消息也是蓝色的容器不会缩小以适应短文本。

【参考方案8】：

我就是这样解决的

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

【参考方案9】：

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

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

【参考方案10】：

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

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