Flutter：在同一行中对齐 TextFormField 和 DropdownButtonFormField

Question

在我的表单中，我在同一行中有一个 TextFormField 和 DropdownButtonFormField。如果我为该行设置 CrossAxisAlignment.end ，对齐通常会起作用，但一旦验证仅触发其中一个字段，它就会完全中断。

我尝试使用 CrossAxisAlignment.baseline ，最接近的结果是使用 TextBaseline.alphabetic ，但是两个字段之间仍然存在一些细微差别（验证之前和之后）

这是我的代码。如何在验证前后对齐这两个字段？

Form(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
              child: TextFormField(
              autofillHints: const [AutofillHints.telephoneNumber],
              decoration: InputDecoration(
                labelText: 'Phone',
                floatingLabelStyle:
                    const TextStyle(color: Color(0x99000000)),
              ),
              initialValue: model.phone,
              keyboardType: TextInputType.phone,
              onSaved: (value) {
                model.phone = value;
              },
              validator: (value) {
                return (value == null || value.isEmpty) ? "Required field" : null;
              },
            )
          ),
          const SizedBox(width: 10),
          Expanded(
            child: DropdownButtonFormField<int>(
                decoration: InputDecoration(
                  labelText: 'Participants',
                  floatingLabelStyle:
                    const TextStyle(color: Color(0x99000000)),
                ),
                items: model.participantsList(),
              onChanged: (value) {
                  model.participants = value;
              },
            )
          ),
        ],
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Notes',
          floatingLabelStyle:
              const TextStyle(color: Color(0x99000000)),
        ),
        onSaved: (value) {
          model.notes = value;
        },
        textCapitalization: TextCapitalization.sentences,
      ),
    ],
  ),
);

Answer 1

为此，您可以使用另一个代表错误消息的小部件。 这是更新的代码：

//Update this errorString in validation 
String errorString = "";

Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Expanded(
                child: TextFormField(
                  autofillHints: const [AutofillHints.telephoneNumber],
                  decoration: const InputDecoration(
                    labelText: 'Phone',
                    floatingLabelStyle: TextStyle(color: Color(0x99000000)),
                  ),
                  keyboardType: TextInputType.phone,
                  onSaved: (value) {
                    // Save the value to your model
                  },
                  validator: (value) {
                    setState(() {
                      errorString = value == null || value.isEmpty
                          ? "Required field"
                          : "";
                    });
                    return null;
                  },
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: DropdownButtonFormField<int>(
                  decoration: const InputDecoration(
                    labelText: 'Participants',
                    floatingLabelStyle: TextStyle(color: Color(0x99000000)),
                  ),
                  items: const [], // Replace with your actual list of items
                  onChanged: (value) {
                    // Save the value to your model
                  },
                ),
              ),
            ],
          ),
//Here, to show your error. Add textStyle and other properties based on your requirement.
          Align(alignment: Alignment.centerLeft, child: Text(errorString)),
          TextFormField(
            decoration: const InputDecoration(
              labelText: 'Notes',
              floatingLabelStyle: TextStyle(color: Color(0x99000000)),
            ),
            onSaved: (value) {
              // Save the value to your model
            },
            textCapitalization: TextCapitalization.sentences,
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // Trigger validation before saving data
              if (_formKey.currentState?.validate() ?? false) {
                _formKey.currentState?.save();
                // Save your form data here
              }
            },
            child: const Text('Save'),
          ),
        ],
      ),
    )