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

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试图占据整个宽度而引发错误。

按照上给出的解释，用 Flexible 包装 TextField 是可行的。

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

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

Correctly layout columns and expanded widgets without finite width

dart

flutter

flutter-desktop