Flutter

Question

我对脚手架有疑问。我有一个带有文本和按钮的 AppBar。正文承载 ListView.builder。 ListView 内部是一个容器和一些 TextButton Widgets。

TextButton 的 Text 部分可以很宽，并导致出现警告栏。所以，我用一个 Expanded widget 来包装它。

这会导致错误...

The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming width constraints are unbounded.

When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction. These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

而且我的 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 团队不推荐这样做，而是使用单独的小部件。

Flutter - 带有 Appbar 和列表视图的脚手架 - 与 Expanded 决裂

Flutter - Scaffold with Appbar and listview - breaking with Expanded