Flutter PopupMenuButton文本显示过短 内边距/占满宽度适配问题

问题原因 #

PopupMenuButton 组件默认自带内边距、最小交互尺寸约束，同时你使用的icon参数本身也有默认的尺寸限制，三个因素叠加导致你外层设置的0.225倍屏幕宽度没有被完全利用，文本可显示空间被大幅压缩，所以才会出现3个字符就触发省略号的问题。

解决方案 #

修改PopupMenuButton的相关配置，取消默认的多余约束，让文本可以占满分配的宽度，修改后的代码片段如下：

Container(
  width: Width * 0.225,
  child: Align(
    alignment: Alignment.topLeft,
    child: PopupMenuButton<String>(
      // 取消默认内边距
      padding: EdgeInsets.zero,
      // 取消默认最小尺寸约束
      constraints: BoxConstraints(minWidth: 0, minHeight: 0),
      // 改用child而非icon，避免图标组件的默认尺寸限制
      child: Container(
        // 占满父容器宽度
        width: double.infinity,
        child: Text(
          datashowThis[index]['data'][i]['serviceName'] != null ? datashowThis[index]['data'][i]['serviceName'] : '',
          textAlign: TextAlign.left,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          softWrap: false,
          style: TextStyle(color: textGreyColor, fontSize: 12, fontFamily: 'SegoeUI-SemiBold')
        ),
      ),
      onSelected: (choice) {},
      itemBuilder: (BuildContext context) {
        return [
          '${datashowThis[index]['data'][i]['serviceName']}'
        ].map((String choice) {
          return PopupMenuItem<String>(
            value: choice,
            child: Container(width: 100, child: Text(choice, style: TextStyle(color: kPrimaryColor, fontFamily: 'SegoeUI'))),
          );
        }).toList();
      },
    ),
  ),
),

如果需要保留点击水波纹效果的最小点击区域，可以按需给PopupMenuButton加少量垂直方向的padding，比如padding: EdgeInsets.symmetric(vertical: 4)，不会影响横向的文本显示宽度。

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