Flutter 在不使用 DropDownButtonFormField 的情况下验证 DropDownButton

Question

我正在尝试使用 dropDownButton 而不是 dropDownButtonFormField，因为我运行在 dropDownButtonFormField 小部件中发现了很多错误。一个问题是，在 dropDownButtonFormField 中，用于打开项目的可点击区域仅位于提示文本之上，而不是其下方的 cm，在我的案例中创建了糟糕的用户体验。第二个问题是，在 dropDownButtonFormField 中，如果一个项目是一个长文本并且用户在它显示在下拉列表的主要部分时按下它，文本不会创建一个新行以便用户可以看到文本，同样的事情dropDownButton 小部件不会发生这种情况。我使用 dropDownButtonFormField 只是为了使用验证器。这是使用 DropDownButton 小部件。

这是在使用长文本时使用 dropDownButtonFormField 小部件。

Center locationDropDown() {
    return Center(
      child: Container(
        margin: const EdgeInsets.all(10),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
          borderRadius: BorderRadius.circular(12),
        ),
        child: DropdownButtonFormField<String>(
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Please select a location';
            }
            return null;
          },
          decoration: const InputDecoration(
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.transparent),
            ),
          ),
          value: chooseLocation,
          hint: const Text('Select a location'),
          isExpanded: true,
          items: workingData!.map((some) {
            return DropdownMenuItem(
              child: Text(
                some.name + ' (${some.location})',
              ),
              value: some.id,
            );
          }).toList(),
          onChanged: (String? displayedValue) {
            setState(
              () {
                chooseLocation = displayedValue!;
              },
            );
          },
        ),
      ),
    );
  }

Answer 1

isDense: false,

在 DropdownButtonFormField.

中添加 isDense 值 false

Flutter 在不使用 DropDownButtonFormField 的情况下验证 DropDownButton

Flutter Validate DropDownButton without using DropDownButtonFormField

dart

flutter

flutter-dependencies

flutter-layout