在 Flutter 的列中插入一行答案

【问题标题】：Insert a Row inside a Column in Flutter在 Flutter 的列中插入一行
【发布时间】：2019-08-09 23:46:10
【问题描述】：

我的 UI 屏幕基本上是使用 Column Widget 呈现的，并且在这个小部件中，我插入了所有其他 UI 组件。其中之一恰好是 Row （由 2 个文本字段组成）。这是行小部件：

var phoneNumber = new Row(
  children: <Widget>[
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: countryCodePicker,
    ),
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: mobileNumber,
    ),
  ],
);

主 UI 屏幕是：

     return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
                customerName,
                emailAddress,
//                new Container(
//                  child: deliveryOptionRow,
//                ),
                mobileNumber,
                countryCodePicker,
                templateMessagesDropDown,
                templateMessageTextField,
                sendGoogleReview,
              ],
            )
    );

当我将行添加到列时，我看到了这个异常

     The following RenderObject was being processed when the exception was fired:
flutter:   _RenderListTile#06b03 relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: _ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← Listener ← _GestureSemantics ←
flutter:   RawGestureDetector ← GestureDetector ← InkWell ← ListTile ← ListTileTheme ← ⋯
flutter:   parentData: offset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(unconstrained)
flutter:   size: MISSING
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter:   _RenderRadio#302a4 relayoutBoundary=up12 NEEDS-PAINT
flutter:   RenderParagraph#58a45 NEEDS-LAYOUT NEEDS-PAINT

在主 UI 屏幕中添加行的最佳方式是什么。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

如果您的Row 包含TextField 或TextFormField 或任何其他试图增长到无穷大的小部件，您需要为其提供固有宽度。您可以通过多种方式做到这一点：

使用Expanded：

Row(
  children: [
    Expanded(
      child: TextField(), // <-- Wrapped in Expanded.
    ),
  ],
)

使用Flexible：

Row(
  children: [
    Flexible(
      child: TextField(), // <-- Wrapped in Flexible.
    ),
  ],
)

提供固定宽度：

Row(
  children: [
    SizedBox(
      width: 200, // <-- Fixed width.
      child: TextField(),
    ),
  ],
)

【讨论】：

【解决方案2】：

这应该可以解决您的问题，

var phoneNumber = new Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Expanded(
      child: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: countryCodePicker,
      ),
    ),
    Expanded(
      child: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: mobileNumber,
      ),
    ),
  ],
);

希望对你有帮助！

【讨论】：

非常感谢。我没有意识到我必须将 Row 子小部件放在 Expanded 而不是整个 Row 内。
我不明白为什么当原始代码不起作用时它会起作用。谁能解释一下？
当我们连续有 2 个子小部件时，在行中展开是无用的。它将两个子小部件的宽度相等，而两个子小部件应左对齐，没有任何不必要的空白。除了扩展和固定宽度还有其他建议吗？请分享您的建议。谢谢。