表单验证会破坏小部件对齐答案

【问题标题】：Form validation breaks widgets alignment表单验证会破坏小部件对齐
【发布时间】：2021-11-08 12:13:14
【问题描述】：

我已经使用 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 容器中。

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

【问题讨论】：

为什么不在 textformfield 中添加这个图标？
首先，我想要可见的错误信息，其次 - 它是默认的验证布局，是否可以更改它？

标签： forms flutter validation flutter-layout alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：