添加到行时渲染框未布局

Question

我已经查看了很多关于此错误的答案，并且我不太确定哪个小部件宽度是问题所在。我理想地想要一个可以滚动并且相当易于管理的垂直表单。我的表单按我想要的方式工作，但是当我添加更多字段时，我将需要滚动。在为此做准备时，我还提前考虑并决定将我的标签和字段设为水平表单元素。在添加“field”方法之前，我有一个标签小部件和一个文本框小部件，我将它们直接放入表单中，但我决定将这两个小部件包装成一行，以节省一些屏幕空间。我尝试将它们包装在一个大小合适的盒子中，因为错误表明小部件的大小不确定。

\n\n

有人可以帮我弄这个吗？此外，是否有任何资源可以解释如何更好地解决此类小部件问题？是否有任何资源可以讨论我面临的问题？

\n\n

提前致谢

\n\n

import \'package:flutter/material.dart\';\nimport \'package:wedding_app/models/constants/colors.dart\';\nimport \'package:wedding_app/models/constants/styles.dart\';\nimport \'package:wedding_app/models/constants/utility.dart\';\nimport \'package:intl/intl.dart\';\n\nclass BudgetWidget extends StatefulWidget {\n  @override\n  _BudgetWidgetState createState() => _BudgetWidgetState();\n}\n// limo, flowers, wedding invites, save the dates, center pieces,\n\nclass _BudgetWidgetState extends State<BudgetWidget> {\n  _BudgetWidgetState({this.totalBudget});\n\n  var currencyFormat = NumberFormat.simpleCurrency();\n\n  double totalBudget = 0;\n  double currentExpenses = 0;\n  Map<String, double> expenses =\n      new Map.from({"venue": 0.0, "limo": 0.0, "flowers": 0.0});\n\n  @override\n  Widget build(BuildContext context) {\n    final colors = ApplicationColors();\n\n    var form = <Widget>[\n      Padding(\n        padding: EdgeInsets.only(top: BudgetingStyles.topPadding(context)),\n        child: Row(\n          mainAxisSize: MainAxisSize.max,\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Center(\n              child: Text(\n                totalBudget == null || totalBudget == 0\n                    ? "Your Budget"\n                    : currencyFormat.format(\n                        totalBudget - expenses.values.reduce((a, b) => a + b)),\n                style: TextStyle(\n                    fontFamily: "acme",\n                    fontSize: BudgetingStyles.headerFontSize(context),\n                    color: colors.black),\n              ),\n            ),\n          ],\n        ),\n      ),\n      textBox(\n        "Enter your budget",\n        BudgetingStyles.textBoxMargins(context),\n        BudgetingStyles.topPadding(context),\n        (String value) {\n          if (Utility.isNumeric(value)) {\n            setState(() {\n              totalBudget = double.parse(value);\n            });\n          } else if (totalBudget > 0 && value.length == 0) {\n            setState(() {\n              totalBudget = 0;\n            });\n          }\n        },\n      ),\n      Padding(\n        padding: EdgeInsets.only(top: BudgetingStyles.topPadding(context) * 2),\n        child: Text(\n          "Expenses",\n          style: TextStyle(\n              fontFamily: "acme",\n              fontSize: BudgetingStyles.headerFontSize(context)),\n        ),\n      ),\n      Padding(\n        padding: EdgeInsets.only(top: 3),\n        child: Divider(\n          color: colors.black,\n        ),\n      ),\n      field("Venue Cost", "Venue", "venue"),\n      field("Limo Cost", "Limo", "limo"),\n      field("Flowers Cost", "Flowers", "flowers")\n    ];\n\n    var innerContainer = Container(\n      color: colors.ivory,\n      child: Column(\n        mainAxisSize: MainAxisSize.max,\n        crossAxisAlignment: CrossAxisAlignment.center,\n        mainAxisAlignment: MainAxisAlignment.start,\n        children: form,\n      ),\n    );\n\n    return Scaffold(\n      body: innerContainer,\n    );\n  }\n\n// Why did wrapping it the label and field in a row, give a paint error\n  Widget field(String hintText, String labelText, String expenseKey) {\n    return Row(\n      mainAxisSize: MainAxisSize.max,\n      mainAxisAlignment: MainAxisAlignment.center,\n      crossAxisAlignment: CrossAxisAlignment.stretch,\n      children: <Widget>[\n        Container(\n          child: Padding(\n            padding: const EdgeInsets.only(top: 2.0),\n            child: Text(\n              labelText,\n              style: TextStyle(\n                  fontFamily: "acme",\n                  fontSize: BudgetingStyles.subHeaderFontSize(context)),\n            ),\n          ),\n        ),\n        textBox(\n          hintText,\n          BudgetingStyles.textBoxMargins(context),\n          BudgetingStyles.topPadding(context),\n          (String value) {\n            setState(\n              () {\n                expenses[expenseKey] =\n                    Utility.isNumeric(value) ? double.parse(value) : 0;\n              },\n            );\n          },\n        )\n      ],\n    );\n  }\n\n  Widget textBox(String hintText, double textboxPaddingWidth, double topPadding,\n      void onChangeHandler(String value)) {\n    return Container(\n      child: Padding(\n        padding: EdgeInsets.only(\n            left: textboxPaddingWidth,\n            right: textboxPaddingWidth,\n            top: topPadding),\n        child: TextField(\n            textAlign: TextAlign.center,\n            keyboardType: TextInputType.number,\n            decoration: InputDecoration(\n              hintText: hintText,\n            ),\n            onChanged: onChangeHandler),\n      ),\n    );\n  }\n}\n

\n\n

这是我能找到的最接近堆栈跟踪的内容

\n\n

The following RenderObject was being processed when the exception was fired:\nI/flutter (16757):   RenderFlex#a932f relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):   creator: Row \xe2\x86\x90 Column \xe2\x86\x90 DecoratedBox \xe2\x86\x90 Container \xe2\x86\x90 MediaQuery \xe2\x86\x90 LayoutId-[<_ScaffoldSlot.body>] \xe2\x86\x90\nI/flutter (16757):   CustomMultiChildLayout \xe2\x86\x90 AnimatedBuilder \xe2\x86\x90 DefaultTextStyle \xe2\x86\x90 AnimatedDefaultTextStyle \xe2\x86\x90\nI/flutter (16757):   _InkFeatures-[GlobalKey#bfdef ink renderer] \xe2\x86\x90 NotificationListener<LayoutChangedNotification> \xe2\x86\x90 \xe2\x8b\xaf\nI/flutter (16757):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)\nI/flutter (16757):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)\nI/flutter (16757):   size: MISSING\nI/flutter (16757):   direction: horizontal\nI/flutter (16757):   mainAxisAlignment: center\nI/flutter (16757):   mainAxisSize: max\nI/flutter (16757):   crossAxisAlignment: stretch\nI/flutter (16757):   textDirection: ltr\nI/flutter (16757):   verticalDirection: down\nI/flutter (16757): This RenderObject had the following descendants (showing up to depth 5):\nI/flutter (16757):   RenderPadding#b1255 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):     RenderParagraph#411ca NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):   RenderPadding#45b3e NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):     RenderSemanticsAnnotations#4c0e1 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):       RenderIgnorePointer#2e796 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):         RenderPointerListener#d6273 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757):           _RenderDecoration#df698 NEEDS-LAYOUT NEEDS-PAINT\nI/flutter (16757): \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nI/flutter (16757): Another exception was thrown: RenderBox was not laid out: RenderFlex#a932f relayoutBoundary=up3 NEEDS-PAINT\nI/flutter (16757): Another exception was thrown: RenderBox was not laid out: RenderFlex#edb16 relayoutBoundary=up2 NEEDS-PAINT\nI/flutter (16757): Another exception was thrown: RenderBox was not laid out: RenderDecoratedBox#ca6a1 relayoutBoundary=up1 NEEDS-PAINT\nI/flutter (16757): Another exception was thrown: RenderBox was not laid out: RenderDecoratedBox#ca6a1 relayoutBoundary=up1\n

\n

Answer 1

请尝试用以下内容替换字段小部件代码

    Widget field(String hintText, String labelText, String expenseKey) {
    return Expanded(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            child: Padding(
              padding: const EdgeInsets.only(top: 2.0),
              child: Text(
                labelText,
                style: TextStyle(
                    fontFamily: "acme",
                    fontSize: BudgetingStyles.subHeaderFontSize(context)),
              ),
            ),
          ),
          Expanded(
            child: textBox(
              hintText,
              BudgetingStyles.textBoxMargins(context),
              BudgetingStyles.topPadding(context),
                  (String value) {
                setState(
                      () {
                    expenses[expenseKey] =
                    Utility.isNumeric(value) ? double.parse(value) : 0;
                  },
                );
              },
            ),
          )
        ],
      ),
    );
  }

据我可以从您的代码中调查，您需要将Row和包装textBox起来Expanded，因此两个小部件都遵守约束。