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

Question

不知道如何摆脱这个错误（通常由 TextField 创建的 InputDecorator 不能具有无限的宽度。），但也使两个内部文本字段占据了整个列的宽度。

Column(mainAxisSize: MainAxisSize.min, children: [
                      Container(
                        margin: const EdgeInsets.only(left: 50, right: 50),
                        child: AutoCompleteTextView(
                          suggestionsApiFetchDelay: 300,
                          focusGained: () {},
                          onTapCallback: (_) async {

                          },
                          focusLost: () {

                          },
                          onValueChanged: (String text) {

                          },
                          controller: startEditingController,
                          suggestionStyle:
                              Theme.of(context).textTheme.bodyText2,
                          getSuggestionsMethod: getLocationSuggestionsList,
                          tfTextAlign: TextAlign.left,
                          tfStyle: TextStyle(
                            fontSize: 16,
                            color: Theme.of(context).textTheme.bodyText2.color,
                          ),
                          tfTextDecoration: InputDecoration(
                            contentPadding: EdgeInsets.only(top: 0, left: 8.0),
                            filled: true,
                            fillColor: Colors.white,
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.grey[800], width: 1.0),
                              borderRadius: BorderRadius.zero,
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.deepPurple[600], width: 1.0),
                              borderRadius: BorderRadius.zero,
                            ),
                            hintText: "Current Location",
                            labelText: 'Start',
                            labelStyle: kcarPurpleLabelStyle,
                          ),
                        ),
                      ),
                      Container(
                        margin:
                            const EdgeInsets.only(top: 5, left: 50, right: 50),
                        child: AutoCompleteTextView(
                          suggestionsApiFetchDelay: 300,
                          focusGained: () {},
                          onTapCallback: (_) async {

                          },
                          focusLost: () {

                          },
                          onValueChanged: (String text) {

                          },
                          controller: startEditingController,
                          suggestionStyle:
                              Theme.of(context).textTheme.bodyText2,
                          getSuggestionsMethod: getLocationSuggestionsList,
                          tfTextAlign: TextAlign.left,
                          tfStyle: TextStyle(
                            fontSize: 16,
                            color: Theme.of(context).textTheme.bodyText2.color,
                          ),
                          tfTextDecoration: InputDecoration(
                            contentPadding: EdgeInsets.only(top: 0, left: 8.0),
                            filled: true,
                            fillColor: Colors.white,
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.grey[800], width: 1.0),
                              borderRadius: BorderRadius.zero,
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.deepPurple[600], width: 1.0),
                              borderRadius: BorderRadius.zero,
                            ),
                            hintText: "Current Location",
                            labelText: 'Destination',
                            labelStyle: kcarPurpleLabelStyle,
                          ),
                        ),
                      )
                    ]),

Answer 1

接受的答案将解决您的问题，但列小部件的文档提供了有关问题发生原因的更多见解。

当 Column 布置其非弹性子级（那些周围既没有 Expanded 也没有灵活的子级）时，它会为它们提供无界约束，以便它们可以确定自己的尺寸（传递无界约束通常会向子级发出信号，表明它应该收缩包装）其内容）。这种情况下的解决方案通常是将内列包裹在 Expanded 中，以指示它应该占用外列的剩余空间，而不是允许占用它所需的任何空间量。

这是TextField小部件变体的一个问题，因为它们本质上没有定义的宽度。

将 TextField 包装在扩展或灵活的小部件中将解决该错误：

        Expanded(
          child: TextField(
            keyboardType: TextInputType.number,
          ),
        )

Answer 2

当 TextField 中有太多嵌套列时，我遇到了同样的错误。我通过使用 SizedBox 解决了这个问题，如下所示：

SizedBox(
   width: 60, 
   height: 60, 
   child: 
      TextField(),
);

来自 SizedBox 的文档：

具有指定尺寸的盒子。如果给定一个子部件，则此小部件会强制其子部件具有特定的宽度和/或高度（假设该小部件的父部件允许值）。如果宽度或高度为空，则此小部件将尝试调整自身大小以匹配子级在该维度中的大小。

Answer 3

保留您的列，但将每个文本字段包装在扩展小部件中。推理来自官方文档：

扩展 Row、Column 或 Flex 的子级以便子级填充可用空间的小部件。

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项扩展以填充沿主轴的可用空间（例如，水平用于行或垂直用于列）。如果扩展了多个子项，则根据弹性系数在它们之间分配可用空间。

来源：扩展类

Answer 4

如果是复杂的行列结构，额外的行和列将需要一个Expanded(). 否则，错误将持续存在。

return Row(
  children: [
    Expanded(child: // HERE ALSO
      Column(children: [
        Expanded(  // NOT ONLY HERE
         child:TextField()  
        )
      ])
    )
  ]
);

TabView在某些条件下，同样适用于 a ：

Expanded(child: TabBarView(children: []))