Flutter DropdownButtonFormField 图标未正确对齐答案

【问题标题】：Flutter DropdownButtonFormField icon doesn't align properlyFlutter DropdownButtonFormField 图标未正确对齐
【发布时间】：2022-10-17 17:01:38
【问题描述】：

早上好，我正在尝试将 DropDown 的箭头图标与提示文本对齐，但我不明白为什么渲染引擎将它定位在下面这么远。

我尝试将 InputDecoration 的 contentPadding 属性设置为 EdgeInsets.zero 并且它似乎有效。但是，它破坏了 DropDown 的 focusBorder。此外，我不明白填充附加到什么元素。

class WorkpieceFilterBox extends StatefulWidget {
  const WorkpieceFilterBox({
    Key? key,
  }) : super(key: key);

  @override
  State<WorkpieceFilterBox> createState() => _WorkpieceFilterBoxState();
}

class _WorkpieceFilterBoxState extends State<WorkpieceFilterBox> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 135,
      child: _buildStatusField(),
    );
  }

  Widget _buildStatusField() {
    return DropdownButtonFormField<String>(
      icon: const Icon(
        Icons.expand_more,
        size: 30.0,
        color: Color(0xFF2E2E2E),
      ),
      hint: const Text(
        'Status',
        style: TextStyle(
          fontSize: 18.0,
          fontWeight: FontWeight.w500,
          color: Color(0xFFA6A6A6),
        ),
      ),
      decoration: const InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.transparent,
            width: 2.5,
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(27.0),
            bottomLeft: Radius.circular(27.0),
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(
            color: Color(0xFFFF7321),
            width: 2.5,
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(27.0),
            bottomLeft: Radius.circular(27.0),
          ),
        ),
      ),
      items: const [
        DropdownMenuItem(child: Text("Hello there")),
      ],
      onChanged: (String? value) => print(value),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

DropdownButton 是 material.io 上的材质组件。这意味着 Flutter 将每一个样式都硬编码到默认样式中，就像它在本网站上定义的那样。看来，通过强制这个小部件进入一定的高度：

return SizedBox(
      height: 55.0,
      child: Stack(...

你打破了这个小部件的预建样式。我已经用高度 50 对其进行了测试以证明这一点：

在这里，您可以看到为什么在材质组件上设置高度不是一个好主意。

说得够多了，解决方案是什么：从 SizedBox 中删除高度以及材质组件给出的任何样式：

return DropdownButtonFormField<String>(
      icon: const Icon(
        Icons.expand_more,
        //size: 30.0,
        color: Color(0xFF2E2E2E),
      ),
      hint: const Text(
        'Status',
        style: TextStyle(
          //fontSize: 18.0,
          //fontWeight: FontWeight.w500,
          color: Color(0xFFA6A6A6),
        ),
      ),

现在我知道这会破坏你的 UI，但这就是 Flutter 的工作原理。要么您完全采用 Material Design，否则您将度过一段非常糟糕的时光。

【讨论】：

【解决方案2】：

试试我为你写的这个示例代码。

我的代码：

        DropdownButtonHideUnderline(
          child: DropdownButtonFormField<String>(
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
            ),
            icon: const Icon(
              Icons.expand_circle_down, // Custom icon goes here.
            ),
            iconSize: 30, // Icon height goes here.
            hint: const Text('Choose item'),
            value: _dropDownValue,
            items: _dropDownList
                .map(
                  (label) => DropdownMenuItem(
                value: label,
                child: Text(
                  label.toString(),
                ),
              ),
            )
                .toList(),
            onChanged: (value) {
              _dropDownValue = (value ?? _dropDownList[0]);
              setState(() {});
            },
          ),
        ),

【讨论】：