Flutter中如何让ElevatedButton内ListTile文本沿用按钮样式

要让ListTile的标题、副标题及图标颜色完全跟随ElevatedButton的文本样式（适配自定义主题），你需要手动从ElevatedButton的主题配置中提取样式，并应用到ListTile的子组件上，具体步骤如下：

1. 提取ElevatedButton的文本样式 #

从当前主题中获取ElevatedButton的默认文本样式，包含颜色、字体大小、字重等属性，确保和按钮文本完全一致：

// 获取ElevatedButton的文本样式，兼容未自定义主题的情况
final buttonTextStyle = Theme.of(context).elevatedButtonTheme.style?.textStyle?.resolve(const <MaterialState>{}) 
    ?? Theme.of(context).textTheme.labelLarge!;
// 副标题使用主文本样式的半透明版本，保持视觉层级
final subtitleStyle = buttonTextStyle.copyWith(
  color: buttonTextStyle.color?.withOpacity(0.7),
);

2. 应用样式到ListTile的子组件 #

将提取到的样式分别应用到title、subtitle和trailing图标上，替换原来的默认样式：

修改后的完整代码 #

return ElevatedButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  ),
  onPressed: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => screen(t),
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.symmetric(vertical: 4),
    child: ListTile(
      contentPadding: const EdgeInsets.all(0),
      leading: CircleAvatar(
        child: Icon(t.iconData),
      ),
      title: Text(
        t.toString().i18n,
        style: buttonTextStyle, // 应用按钮文本样式
      ),
      subtitle: Text(
        t.description,
        style: subtitleStyle, // 应用半透明的副标题样式
      ),
      trailing: Icon(
        Icons.arrow_forward_ios,
        color: buttonTextStyle.color, // 图标颜色与按钮文本同步
      ),
    ),
  ),
);

关键说明 #

• 使用MaterialStateProperty.resolve(const <MaterialState>{})获取按钮正常状态下的样式，确保和未点击时的按钮文本样式一致；
• 副标题通过withOpacity(0.7)降低透明度，保持和原生按钮文本的视觉层级差异；
• 图标颜色直接复用按钮文本颜色，保证整体视觉统一；
• 无需额外设置tileColor，因为ListTile作为ElevatedButton的child，会自动继承按钮的背景色。

内容的提问来源于stack exchange，提问作者Stéphane de Luca