Flutter TextField 阻止其他 Widget 显示？

Question

我正在尝试通过构建一个玩具示例来学习 Flutter。

每当我将

TextField

添加到这个基本示例中时，其他小部件都不会显示。 VS Code 中的布局资源管理器不再显示布局，并且我没有看到任何错误日志。

两个问题：

1）我如何调试我做错的事情？我想下次学习。

2）我做错了什么？

import 'package:flutter/material.dart';

class PageFive extends StatefulWidget
{
  const PageFive({super.key});

 @override
  State<StatefulWidget> createState()
  {
    return PageFiveState();
  } 
}

class PageFiveState extends State
{
  TextEditingController tfc = TextEditingController();
@override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.amber[200] ,
          appBar: AppBar(
            centerTitle: true,
            title: Text("This is light red"),
            backgroundColor: Colors.red[300]),
          body: Row (
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                children: [
                  Padding(padding: EdgeInsets.all(10)),
                  Text("one"),
                  Padding(padding: EdgeInsets.all(10)),
                  TextField( // If I comment out this widget, everything else shows up
                    controller: tfc,
                    onChanged: textFieldChangedCallback,
                    decoration: InputDecoration(
                      labelText: "This is the label",
                      border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
                      hintText: 'Write something here',
                    ),
                  ),
                Padding(padding: EdgeInsets.all(10)),
                Text("tfc.value.text"), // yes, I know to lose the quotes. This just made it easier to comment stuff out for now.
                ],
              ),
              Column(
                children: [
                  Padding(padding: EdgeInsets.all(10)),
                  Text("two"),
                ],
              ),
            ],
          ),
          ),
        ),
    );
  }

void textFieldChangedCallback(String newValue)
{
  setState(() {
  });
}

}

Answer 1

错误： 通常由 TextField 创建的 InputDecorator 不能具有无限宽度。

解决方案： 将两根柱子包裹在

Expanded

或

Flexible

内。

由于

TextField

会导致 Row 出现无界宽度问题，因此使用上述小部件包装 TextField 的父小部件（在本例中为 Column）应该可以解决该问题。

您可以只包装一个具有 TextField 的列，但包装另一列会使两个列的宽度相同。