forms - 表单验证会破坏小部件的对齐方式

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 位置保持不变，因此它不再正确对齐，即使放置在相同的 Row 容器。

如何解决这个问题？你有什么想法吗？

Answer 1

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