Flutter中FilledButton.tonalIcon与FilledButton.icon的区别咨询

虽然两者的构造函数参数看起来完全一致，但本质是基于不同基础样式的带图标按钮，核心差异体现在视觉表现和设计用途上：

• 视觉样式差异

  • FilledButton.icon：继承自标准FilledButton，使用主题的colorScheme.primary作为背景色，文字和图标统一为onPrimary色，视觉对比度高，是典型的高权重填充按钮。
  • FilledButton.tonalIcon：继承自FilledButton.tonal，背景色采用colorScheme.secondaryContainer，文字和图标为onSecondaryContainer色，整体色调更柔和，对比度更低，视觉权重比标准填充按钮弱。

• 设计场景用途

  • FilledButton.icon：适用于页面中的核心操作，比如提交表单、确认交易、启动主流程等，需要快速吸引用户注意力的场景。
  • FilledButton.tonalIcon：适用于次要但有必要的操作，比如收藏、分享、添加到列表等，这类动作不需要抢占核心操作的视觉焦点，但仍需要清晰可辨。

• 代码示例对比

// 标准带图标填充按钮（核心操作）
FilledButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.check_circle),
  label: const Text('确认提交'),
),

// Tonal带图标填充按钮（次要操作）
FilledButton.tonalIcon(
  onPressed: () {},
  icon: const Icon(Icons.bookmark_add),
  label: const Text('收藏'),
),

• 底层逻辑
  两者的构造函数只是封装了图标与文字的横向布局逻辑，真正的样式差异来自它们继承的基础按钮：FilledButton.icon基于FilledButton，FilledButton.tonalIcon基于FilledButton.tonal，因此默认样式完全遵循各自基础按钮的设计规范。

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