flutter - 正确布局列和扩展的小部件，没有有限的宽度

Question

我需要帮助来理解为什么Rows，Columns并且Expanded在这种布局中需要一个有限的宽度约束。

布局对我来说似乎很简单：两列应该等分设备总宽度，在每一列中必须有一个固定宽度的标签和一个应该采用剩余列宽的文本字段：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Column(
              children: [
                Row(children: [
                  Text('Field 1:'),
                  Expanded(
                    child: TextField(),
                  ),
                ]),
              ],
            ),
            Column(
              children: [
                Row(children: [
                  Text('Field 2:'),
                  Expanded(
                    child: TextField(),
                  ),
                ]),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

当然我得到这个错误：

    flutter: The following assertion was thrown during performLayout():
    flutter: RenderFlex children have non-zero flex but incoming width constraints are unbounded.
    flutter: When a row is in a parent that does not provide a finite width constraint, for example if it is in a
    flutter: horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a
    flutter: flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
    flutter: space in the horizontal direction.

[...]

避免设置固定宽度让列和扩展完成工作的最佳策略是什么？

编辑：

Column我在一个小部件中更改了我的代码包装小Expanded部件。完成了这项工作，这段代码没有抛出错误：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(children: [
                    Text('Field 1:'),
                    Expanded(
                      child: TextField(),
                    ),
                  ]),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Row(children: [
                    Text('Field 2:'),
                    Expanded(
                      child: TextField(),
                    ),
                  ]),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

Answer 1

抛出错误是因为TextField试图占据整个宽度。

按照这个答案TextField给出的解释，用Flexible作品包装。

import 'package:flutter/material.dart';

class SO62977964 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('SO 62977964'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Flexible(
                        child: Text('Field 1'),
                      ),
                      Flexible(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: 'Enter Field 1'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Flexible(
                        child: Text('Field 2'),
                      ),
                      Flexible(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: 'Enter Field 2'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}