Flutter - 帶 Appbar 和列表視圖的腳手架 - 與 Expanded 決裂

Question

我對腳手架有疑問。 我有一個帶有文本和按鈕的 AppBar。 主體托管一個 ListView.builder。 ListView 內部是一個容器和一些 TextButton Widget。

TextButton 的 Text 部分可以很寬，並導致出現警告欄。 所以，我用一個 Expanded 小部件來包裝它。

這會導致錯誤...

在 performLayout() 期間拋出以下斷言：RenderFlex 子級具有非零彈性但傳入寬度約束是無界的。

當一行位於不提供有限寬度約束的父項中時，例如，如果它位於水平可滾動項中，它將嘗試沿水平軸收縮包裝其子項。 在子項上設置 flex（例如使用 Expanded）表示子項將展開以填充水平方向的剩余空間。 這兩個指令是互斥的。 如果父母要收縮其孩子，則孩子不能同時展開以適合其父母。

考慮將 mainAxisSize 設置為 MainAxisSize.min 並使用 FlexFit.loose 適合靈活的孩子（使用 Flexible 而不是 Expanded）。 這將允許靈活的子級將自身調整到小於他們將被迫占據的無限剩余空間，然后將導致 RenderFlex 收縮包裹子級而不是擴展以適應父級提供的最大約束。

而且我的 AppBar 的內容也消失了，我不能再單擊后退箭頭。

這是構建頁面的腳手架...

late StateSetter _setState;

@override
Widget build(BuildContext context) {

  return buildSubFormPage();

}


Widget buildSubPage() {

  return StatefulBuilder(
      builder: (bContext, StateSetter setBState) {
        _setState = setBState;
        return Scaffold(
            appBar: new AppBar(
              title: new Text("My list of items"),
              actions: [
                Padding(
                  padding: EdgeInsets.only(
                      right: 20.0),
                  child: openSubFormItem(
                      widget.field, 0,
                      "+ Add new", null),
                )
              ],
            ),
            body: ListView.builder(
              padding: EdgeInsets.all(8.0),
              //shrinkWrap: true,
              itemCount: subFormItems.length,
              itemBuilder: (context, index) {
                return Container(
                  //width: screenWidth,
                  child: openSubFormItem(
                      widget.field, index, "Press Here",
                      subFormItems[index]),

                );
              },

            )

        );
      }
  );
}

這里主要是我的 openSubFormItem 小部件的內容。

按鈕文本的構建已被刪除，但您可以理解...

Widget openSubFormItem(PendigoFields field, int index, String buttonText, dynamic subFormItem) {

String outputText = "A long string of text, that will surely cause the warning bars if I can't make it wrap properly";

if (buttonText == "+ Add new") {
  outputText = buttonText;
}

return Container(
    //padding: EdgeInsets.all(4),
  //width: screenWidth - 30,
    child:
    TextButton(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        //mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Flexible(
          //   fit : FlexFit.loose,
          //   child: Text(outputText, style: TextStyle(color: Colors.black,
          //     fontSize: 15.0,
          //     fontWeight: FontWeight.bold,),),
          // ),

          Expanded(child: Text(outputText, style: TextStyle(color: Colors.black,
            fontSize: 15.0,
            fontWeight: FontWeight.bold,),),
          ),

          // Text(outputText, style: TextStyle(color: Colors.black,
          //   fontSize: 15.0,
          //   fontWeight: FontWeight.bold,),),

          // I also have an IconButton here, removed for clarity

       ]
      ),
    )
    decoration: buttonText == "Press Here" ? BoxDecoration(
      
      border: Border(
          bottom: BorderSide(color: Colors.purple[400]!)),
    )
        : null
);

}

如果文本太長，如何讓我的 AppBar 顯示 AppBar 內容（和按鈕）並允許我的 ListView 能夠換行文本？

Answer 1

錯誤說：unbounded width，這是因為TextButton的Row父級沒有指定寬度，使用Expanded時，它的Row或Column父級必須知道它的約束。

給 TextButton 一個寬度。

另外請注意，不要使用方法創建小部件，因為 flutter 團隊不建議這樣做，而是使用單獨的小部件。