在行和列中显示文本字段问题 - Flutter

Question

我希望文本字段根据屏幕宽度位于行或列小部件中。一行中的文本字段需要位于另一个小部件中，例如扩展以限制其宽度，这样它们就不会出现任何错误。但是当它们位于“列”小部件中时，它们就会消失并且必须删除“扩展”小部件。

我使用 Flex 小部件根据宽度更改方向。我想过创建两个独立的小部件，但它不干净。这是当方向垂直时女巫工作的代码：

Flex(
            direction: MediaQuery.sizeOf(context).width < 500
                ? Axis.vertical
                : Axis.horizontal,
            // direction: Axis.vertical,
            children: [
              TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'name',
                  floatingLabelAlignment: FloatingLabelAlignment.start,
                  isDense: true,
                ),
                textAlign: TextAlign.right,
                controller: costomerNameCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'phone',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerPhoneCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'email',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerEmailCon,
              ),
            ],
          )

有什么办法可以处理吗？

Answer 1

我相信这是 Flex 或 Row 小部件的常见问题：通常由 TextField 创建的 InputDecorator 不能具有无限宽度。子部件不应该被赋予无限的宽度。尝试将 mainAxisSize 更改为

min

，因为默认值为

max

，并且

max

会强制子项占用尽可能多的空间。

Flex(
            direction: MediaQuery.sizeOf(context).width < 500
                ? Axis.vertical
                : Axis.horizontal,
            // direction: Axis.vertical,
            mainAxisSize: MainAxisSize.min, // add this
            children: [
              TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'name',
                  floatingLabelAlignment: FloatingLabelAlignment.start,
                  isDense: true,
                ),
                textAlign: TextAlign.right,
                controller: costomerNameCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'phone',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerPhoneCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'email',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerEmailCon,
              ),
            ],
          )

现在文本字段将在右侧溢出。因此最好将每个组件包装在一个灵活的小部件中以限制屏幕尺寸：

Flex(
              direction: MediaQuery.sizeOf(context).width < 500
                ? Axis.vertical
                : Axis.horizontal,
              mainAxisSize: MainAxisSize.min,
      children: [
              Flexible(child: TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'name',
                  floatingLabelAlignment: FloatingLabelAlignment.start,
                  isDense: true,
                ),
                textAlign: TextAlign.right,
                controller: costomerNameCon,
              ),),
              const SizedBox(
                width: 10,
              ),
              Flexible(child: TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'phone',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerPhoneCon,
              )),
              const SizedBox(
                width: 10,
              ),
              Flexible(child: TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'email',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: costomerEmailCon,
              )),
            ],
      
            )