Flutter中DropdownButton密集模式下如何缩小选项间距？

你设置DropdownButton的isDense: true只会缩小按钮本身的内边距，下拉选项的内边距是由DropdownMenuItem或其内部默认的ListTile样式控制的，可通过以下两种方法调整：

方法1：直接给DropdownMenuItem设置padding #

给每个DropdownMenuItem添加padding属性，自定义内边距大小，精准控制单个选项的间距：

DropdownButton<String>(
  value: 'one',
  isDense: true,
  onChanged: (String? value) => print('on change'),
  items: ['one', 'two', 'three'].map<DropdownMenuItem<String>>(
    (value) {
      return DropdownMenuItem<String>(
        value: value,
        padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0), // 自定义选项内边距
        child: Text(value, style: TextStyle(fontSize: 5)),
      );
    },
  ).toList(),
)

方法2：用ListTileTheme统一控制所有选项 #

下拉菜单的选项默认基于ListTile组件渲染，通过ListTileTheme包裹DropdownButton，可以全局修改所有选项的内边距，无需逐个设置DropdownMenuItem：

ListTileTheme(
  contentPadding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0), // 统一设置选项内边距
  child: DropdownButton<String>(
    value: 'one',
    isDense: true,
    onChanged: (String? value) => print('on change'),
    items: ['one', 'two', 'three'].map<DropdownMenuItem<String>>(
      (value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value, style: TextStyle(fontSize: 5)),
        );
      },
    ).toList(),
  ),
)

两种方法都能有效缩小下拉选项之间的间距，单个选项调整用方法1，全局统一调整用方法2。

内容的提问来源于stack exchange，提问作者atreeon