如何降低DropDownButtonFormField的高度，让里面的文字在颤动中不会脱离中间？

Question

当我为 DropDownButtonFormField 的父容器设置高度时，当高度为 55 时没有问题，但是当高度小于（42）某个限制时，其中的文本看起来像这样。

如图所示，猫不再位于容器中间。 这是我的代码：

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 40,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: const Color(0xFF616161),
      width: 0.65,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Padding(
    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
    child: DropdownButtonFormField(
      enableFeedback: true,
      menuMaxHeight: 200,
      icon: Icon(Icons.keyboard_arrow_down_rounded),
      iconSize: 21,
      alignment: Alignment.center,
      // decoration: InputDecoration.collapsed(hintText: ''),
      decoration: InputDecoration(
        border: InputBorder.none,
        prefixIcon: Icon(Icons.location_on_rounded),
      ),
      dropdownColor: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(8)),
      elevation: 2,
      // isExpanded: true,
      value: cityValue,
      onChanged: (String? newValue) {
        setState(() {
          cityValue = newValue!;
        });
      },
      items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style:
                TextStyle(fontSize: 15, color: Color(0xff707070)),
          ),
        );
      }).toList(),
    ),
  ),
),

图标在中间，但不是文本。 我使用了 Offset，但是图标变得混乱了。

Answer 1

默认图标大小为 24，因此您需要最小高度 48 才能正常查看。最好不要强迫它有一定的高度。您可以删除高度 40 以获得更好的用户体验。

现在假设你喜欢固定高度，在这种情况下，你需要自己维护填充。

decoration: InputDecoration(
  border: InputBorder.none,
  contentPadding: EdgeInsets.only(top: 6), //this one
  prefixIcon: Icon(Icons.location_on_rounded),
),

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 40,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: const Color(0xFF616161),
      width: 0.65,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Padding(
    padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
    child: DropdownButtonFormField(
      enableFeedback: true,
      menuMaxHeight: 200,
      icon: Icon(Icons.keyboard_arrow_down_rounded),
      iconSize: 20,
      alignment: Alignment.center,
      // decoration: InputDecoration.collapsed(hintText: ''),
      decoration: InputDecoration(
        border: InputBorder.none,
        contentPadding: EdgeInsets.only(top: 6), //this one
        prefixIcon: Icon(Icons.location_on_rounded),
      ),
      dropdownColor: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(8)),
      elevation: 2,

      onChanged: (String? newValue) {},
      items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style:
                TextStyle(fontSize: 15, color: Color(0xff707070)),
          ),
        );
      }).toList(),
    ),
  ),
),

Answer 2

一个快速解决方案是在

contentPadding

中添加

InputDecoration

。

contentPadding: EdgeInsets.symmetric(vertical: 7),

Answer 3

使用以下代码尝试

InputDecoration

  DropdownButtonFormField(
          decoration: const InputDecoration(
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(4)),
              borderSide: BorderSide(width: 1, color: Colors.grey),
            ),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 10.0,
              vertical: 3.0,
            ),
            border: OutlineInputBorder(),
            prefixIcon: Icon(
              Icons.location_on_rounded,
              color: Colors.grey,
            ),
          ),
          dropdownColor: Colors.white,
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          ),
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          onChanged: (value) => {
            cityValue = value!,
          },
          items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
              .map(
                (e) => DropdownMenuItem(
                  value: e,
                  child: Text(e),
                ),
              )
              .toList(),
        ),

您的结果屏幕->

Answer 4

水平和垂直填充都会看起来不错

InputDecoration

放置这条线

contentPadding: EdgeInsets.symmetric(vertical: 7,horizontal: 10),