限制Flutter中容器的最大宽度

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

1. 载入文字
2. 一些很长的文字

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

现在有一种方法可以设置容器/蓝盒的maxWidth（比如说500）？这样蓝框将变得像“ Loading”之类的小文本一样宽，而长文本则可以扩展到达到500个单位的宽度，然后包装文本？

长文本的必需输出：

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

Answer 1

使用ConstrainedBox与BoxConstraints maxWidth

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

Answer 2

您可以使用以下首选方法向Container Widget添加约束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 3

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

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

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

Answer 4

对我来说至少将 Constrained 框放入 IntrinsicWidth 已经解决了问题。

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

Answer 5

这需要在里面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 6

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