FavoriteIconButton — 收藏

瀑布流卡片和列表行共用的心形收藏按钮。

基本用法

var isFav by remember { mutableStateOf(false) }

FavoriteIconButton(
    isFavorite = isFav,
    onToggle = { isFav = !isFav },
)

配色换成警示色：

FavoriteIconButton(
    isFavorite = isFav,
    onToggle = { isFav = !isFav },
    colors = FavoriteIconButtonDefaults.colors(
        selectedColor = MaterialTheme.colorScheme.error,
    ),
)

参数

参数	类型	默认值	说明
isFavorite	Boolean	—	当前是否已收藏，状态由调用方持有
onToggle	() -> Unit	—	点击回调。内部只发通知，不自己翻转状态
modifier	Modifier	Modifier	修饰符
colors	FavoriteIconButtonColors	FavoriteIconButtonDefaults.colors()	配色

FavoriteIconButtonColors

字段	默认值	说明
selectedColor	MaterialTheme.colorScheme.primary	已收藏时的心形颜色
unselectedColor	MaterialTheme.colorScheme.onSurfaceVariant	未收藏时的心形颜色

要点

• 它是受控组件。 onToggle 里必须自己翻转状态（isFav = !isFav），组件不会替你改 —— 不翻转的话点上去毫无反应，很容易误判成「点击没生效」。
• 触控区只有 28dp，比 48dp 的最小推荐触控区小不少。放进列表行或卡片里没问题（那些区域本身可点），但如果只有它可点，外面最好再包一层足够大的可点区域。
• 内层点击会被自己消费掉，不会穿透到外层卡片的 clickable。这是刻意的：卡片整体可点，心形是可点里的可点。
• 选中与未选中的字形是同一个（两态都取 Phosphor.Heart，也就是 Bold 字形），区别只在颜色。想要「实心 / 空心」两套字形，得用 Phosphor.Fill.Heart 和 Phosphor.Regular.Heart 自己组一个。
• contentDescription 会随状态变（"取消收藏" / "收藏"），无障碍读取已经是对的，不用额外补。
• 别用 modifier.size() 改尺寸：图标 16dp、容器 28dp、圆形裁剪三者是配套的。

说明

• 为什么抽成一个组件：瀑布流卡片和列表行都要它。两处各写一遍的后果是迟早有一处忘了跟着改（触控区、图标尺寸、选中色），而这两处本来就是同一个语义的同一个动作。
• 图标 16dp、外层容器 28dp：心形本身画得小，留一圈内边距让点击不必精确瞄准。
• 容器走 clip(CircleShape)，所以后续要加背景色或 ripple 时边角不用自己处理。