表单验证打破了小部件对齐

Question

我已经使用 Flutter 实现了简单的表单，并且还实现了带有消息的表单验证。旁边有 TextFormField 和 IconButton

Row(
                children: [
                  Expanded(
                    child: TextFormField(
                      key: Key('new_event_address'),
                      autofocus: false,
                      initialValue: widget.address,
                      decoration: InputDecoration(
                        hintText: "",
                        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
                        focusedBorder: OutlineInputBorder(
                          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
                          borderRadius: BorderRadius.circular(5.0),
                        ),
                      ),
                      onSaved: (value) => setState(() => _address = value),
                      validator: (val) => val.length == 0 ? CustomResources.strings["add_event_validation_address_required"] : null,
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(right: 5)),
                  IconButton(
                    icon: const Icon(Icons.add_location_outlined),
                    onPressed: () {},
                  )
                ],
              )

它看起来应该如此 - 带有图标按钮的文本字段：

但是当发生验证错误时，图标按钮未正确对齐：

我认为那是因为 TextFormField 更改了它的位置以显示验证错误消息，但是 IconButton 位置保持不变，所以它不再正确对齐，即使放置在相同的 [=15] =]容器。

如何解决？你有什么想法吗？

Answer 1

在您的行中添加 mainAxisAlignment: MainAxisAlignment.start, 并在图标的填充上播放。

Answer 2

您只能在 Row 中添加 crossAxisAlignment: CrossAxisAlignment.start,。它看起来像这样：

表单验证打破了小部件对齐

Form validation breaks widgets alignment

forms

validation

alignment

flutter

flutter-layout