Flutter SnackBar高度异常问题：如何将包含ListTile的默认SnackBar设置为指定高度

嘿，我懂你遇到的困扰——用ListTile当SnackBar的内容，结果它的高度快是预期的三倍，而且SnackBar又没直接设置高度的参数，查了半天也没找到靠谱的例子对吧？

问题根源 #

其实问题出在多层默认内边距和组件自带的最小高度上：

• ListTile本身就算设了dense: true，还是会有默认的上下内边距和最小高度；
• 你在外层套的Container虽然没设padding，但SnackBar自身对content有默认的内边距；
• 这几层的空间叠加起来，就导致整体高度远超预期了。

解决方案 #

我给你两种可行的调整方式，按需选就行：

方法1：优化ListTile的内边距，去掉多余嵌套

直接把外层的Container去掉，然后分别调整SnackBar和ListTile的内边距，把多余的空间挤掉：

void showSuccessSnackBar({BuildContext context, String message}) {
  Scaffold.of(context).showSnackBar(
    SnackBar(
      content: ListTile(
        leading: _successIcon(),
        dense: true,
        // 调整ListTile自身的内边距，减少上下空间
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),
        title: Text(
          message,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: HATheme.HOPAUT_PINK,
            fontWeight: FontWeight.bold
          ),
        ),
      ),
      behavior: SnackBarBehavior.floating,
      duration: Duration(seconds: 3),
      backgroundColor: Colors.white,
      // 去掉SnackBar自带的内边距，避免额外空间
      contentPadding: EdgeInsets.zero,
    )
  );
}

Widget _successIcon() {
  return Image.asset(
    'assets/icons/success.png',
    height: 30,
    width: 30,
  );
}

方法2：用Row替代ListTile，完全自定义布局

如果觉得ListTile的默认样式限制太多，干脆用Row自己拼内容，这样能100%控制高度和间距：

void showSuccessSnackBar({BuildContext context, String message}) {
  Scaffold.of(context).showSnackBar(
    SnackBar(
      content: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 让内容垂直居中
        children: [
          _successIcon(),
          SizedBox(width: 12), // 自定义图标和文字的间距
          Expanded(
            child: Text(
              message,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: HATheme.HOPAUT_PINK,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        ],
      ),
      behavior: SnackBarBehavior.floating,
      duration: Duration(seconds: 3),
      backgroundColor: Colors.white,
      // 自定义SnackBar的内边距，精准控制整体高度
      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    )
  );
}

Widget _successIcon() {
  return Image.asset(
    'assets/icons/success.png',
    height: 30,
    width: 30,
  );
}

小提示 #

如果用方法1还是觉得高度不对，可以微调ListTile的contentPadding里的vertical值，或者给ListTile加个minVerticalPadding: 0（不过这个属性是Flutter 2.5+才有的，注意版本）。

试试上面的方法，应该就能把SnackBar的高度调到你想要的样子啦！

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