logo标签列表

Flutter中如何限制容器的最大宽度

user-interfaceflutterflutter-layoutword-wrapflutter-container
107
  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. 加载文本 enter image description here
  2. 一些很长的文本 enter image description here

现在，我面临的问题是无法在没有设置容器/蓝色框的宽度的情况下包装此容器/蓝色框中的文本，但如果我设置容器/蓝色框的宽度，则无论文本长度如何，该容器/蓝色框始终保持相同的宽度。

现在是否有一种方法可以设置容器/蓝色框的最大宽度（例如，设为500）？这样，对于像“Loading”这样的短文本，蓝色框将变得与所需宽度一样，而对于长文本，它将扩展到达到500个单位的宽度，然后将换行文本？

长文本的所需输出：

对于像loading这样的小文本，我不想改变UI，但对于长文本，我希望它看起来像这样。 enter image description here

10个回答
215

您可以通过设置 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
    )
  ],  
);
}
51

使用带有BoxConstraints maxWidth的ConstrainedBox，并包装在一个Flexible()组件中。Flexible组件允许盒子在较小的屏幕上调整大小。

Flexible(
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 150),
    child: Container(
      color : Colors.blue,
      child: Text('Your Text here'),
    ),
  ),
),
2
我刚试了一下，问题是如果屏幕不够大，它会溢出屏幕。 - Roc Boronat
4
好的！只需将这个ConstrainerBox放在Flexible中即可：·) - Roc Boronat
在某些情况下，例如当ConstrainedBox位于具有多个扩展元素的行内时，Flexible解决方案将无法起作用。我所做的是通过检查MediaQuery.of(context).size.width < 150，如果满足条件，则返回不带ConstrainedBox的小部件。 - Adnan
14
< p >这需要放在Row或Column小部件中< /p >

1. Row

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

2. 列(Column)

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

在这两个示例中，它们都能正常工作，因为Column和Row允许其子组件扩展到其给定的限制/大小。

注意：如果子元素想要与其父元素有不同的大小，并且父元素没有足够的信息对齐它，则可能会忽略子元素的大小。

6

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

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

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

至少对我而言，将"Constrained box"放在"IntrinsicWidth"中已经解决了问题。

IntrinsicWidth(
  child: Container(
    constraints: BoxConstraints(maxWidth: 200),
    child: Row(
      children: [
       
      ],
    ),
  ),
);
Flutter建议避免在可能的情况下使用IntrinsicWidth和IntrinsicHeight，因为构建成本过高。 - Matias de Andrea
很好的建议。它允许对齐组件而不使容器填充最大尺寸。 - Granson
4

这是我如何解决它的方法。

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

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

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

 Container(
      constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5)),
      child: Text("")
    )
1
也许可以在文本周围使用Flexible，然后将Flexible包裹在固定大小的容器中？这只是一个想法。
我不想给容器固定的大小，因为容器提供了蓝色背景，如果我给它一个固定的大小，即使我显示“加载”消息，蓝色容器也不会缩小以适应短文本。 - Nishant Desai
0
在我的情况下，我的解决方案是这样的： 将其包装在Row中并添加Spacer（在评论气泡小部件中，我没有定义任何宽度或最大宽度。它根据文本而增长。 为了限制宽度，向评论气泡添加填充。
return Row(
      children: [
          CommentBubble(
              chatText: snapshot.get('text'),
              sentAt: snapshot.get('sentAt'),
              sendBy: snapshot.get('sendBy'),
          ),
          Spacer(),
      ],
);
0

我知道已经晚了，但是也许将来有人会从中获得帮助。
为了完成这个任务，我使用了auto_size_text插件：

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接