flutter - 添加到行时未布置 Renderbox

Question

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

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

提前致谢

import 'package:flutter/material.dart';
import 'package:wedding_app/models/constants/colors.dart';
import 'package:wedding_app/models/constants/styles.dart';
import 'package:wedding_app/models/constants/utility.dart';
import 'package:intl/intl.dart';

class BudgetWidget extends StatefulWidget {
  @override
  _BudgetWidgetState createState() => _BudgetWidgetState();
}
// limo, flowers, wedding invites, save the dates, center pieces,

class _BudgetWidgetState extends State<BudgetWidget> {
  _BudgetWidgetState({this.totalBudget});

  var currencyFormat = NumberFormat.simpleCurrency();

  double totalBudget = 0;
  double currentExpenses = 0;
  Map<String, double> expenses =
      new Map.from({"venue": 0.0, "limo": 0.0, "flowers": 0.0});

  @override
  Widget build(BuildContext context) {
    final colors = ApplicationColors();

    var form = <Widget>[
      Padding(
        padding: EdgeInsets.only(top: BudgetingStyles.topPadding(context)),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              child: Text(
                totalBudget == null || totalBudget == 0
                    ? "Your Budget"
                    : currencyFormat.format(
                        totalBudget - expenses.values.reduce((a, b) => a + b)),
                style: TextStyle(
                    fontFamily: "acme",
                    fontSize: BudgetingStyles.headerFontSize(context),
                    color: colors.black),
              ),
            ),
          ],
        ),
      ),
      textBox(
        "Enter your budget",
        BudgetingStyles.textBoxMargins(context),
        BudgetingStyles.topPadding(context),
        (String value) {
          if (Utility.isNumeric(value)) {
            setState(() {
              totalBudget = double.parse(value);
            });
          } else if (totalBudget > 0 && value.length == 0) {
            setState(() {
              totalBudget = 0;
            });
          }
        },
      ),
      Padding(
        padding: EdgeInsets.only(top: BudgetingStyles.topPadding(context) * 2),
        child: Text(
          "Expenses",
          style: TextStyle(
              fontFamily: "acme",
              fontSize: BudgetingStyles.headerFontSize(context)),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(top: 3),
        child: Divider(
          color: colors.black,
        ),
      ),
      field("Venue Cost", "Venue", "venue"),
      field("Limo Cost", "Limo", "limo"),
      field("Flowers Cost", "Flowers", "flowers")
    ];

    var innerContainer = Container(
      color: colors.ivory,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: form,
      ),
    );

    return Scaffold(
      body: innerContainer,
    );
  }

// Why did wrapping it the label and field in a row, give a paint error
  Widget field(String hintText, String labelText, String expenseKey) {
    return 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)),
            ),
          ),
        ),
        textBox(
          hintText,
          BudgetingStyles.textBoxMargins(context),
          BudgetingStyles.topPadding(context),
          (String value) {
            setState(
              () {
                expenses[expenseKey] =
                    Utility.isNumeric(value) ? double.parse(value) : 0;
              },
            );
          },
        )
      ],
    );
  }

  Widget textBox(String hintText, double textboxPaddingWidth, double topPadding,
      void onChangeHandler(String value)) {
    return Container(
      child: Padding(
        padding: EdgeInsets.only(
            left: textboxPaddingWidth,
            right: textboxPaddingWidth,
            top: topPadding),
        child: TextField(
            textAlign: TextAlign.center,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: hintText,
            ),
            onChanged: onChangeHandler),
      ),
    );
  }
}

这是我能找到的最接近堆栈跟踪的东西

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

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

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