在 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）？ 這樣藍色框將變得與“加載”等小文本所需的寬度一樣寬，而對於長文本，它將擴展到 500 個單位的寬度，然后將文本換行？

長文本所需的輸出：

對於像加載這樣的小文本，我不希望 UI 有任何變化，但對於長文本，我希望它看起來像這樣。

Answer 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
    )
  ],  
);
}

我希望這有幫助！

Answer 2

使用ConstrainedBox和BoxConstraints maxWidth

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

Answer 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允許它的子項擴展到給定的約束/大小。

注意：如果孩子想要與其父級不同的大小，而父級沒有足夠的信息來對齊它，那么子級的大小可能會被忽略。

Answer 4

這是我用於長文本的簡單方法：

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

請注意maxLines屬性，如果您希望只顯示一行文本，該屬性可能會有所幫助。

Answer 5

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

使用maxWidth和minWidth值來達到要求。

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

Answer 6

對我來說，至少將 Constrained 框放在 IntrinsicWidth 中已經解決了問題。

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

Answer 7

也許在文本周圍使用彈性，然后將彈性包裝在固定大小的容器中？ 只是一個想法。

Answer 8

這就是我修復它的方式

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

Answer 9

我知道現在已經晚了，但將來可能有人會得到幫助。
我使用auto_size_text 插件來完成它：

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

Answer 10

在我的情況下，我的解決方案是這樣的：Wrapped in Row 並添加 Spacer（在評論氣泡小部件中，我沒有定義任何寬度或最大寬度。它的增長取決於文本。限制寬度添加填充到評論氣泡。

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

Answer 11

  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發生任何更改，但對於長文本，我希望它看起來像這樣。