本条目是一份面向 Jetpack Compose Material3 的设计与实现说明,主题是「透明芯片(FilterChip)的选中信号」。适用场景是把过滤芯片叠加在插画或图片之上时,未选中态使用实心填充会像一块板子盖在图上,因此需要让闲置态完全透明,同时又要让选中态清晰可辨。
主要能力与要点如下。
一、透明闲置态的配置。示例代码使用 ElevatedFilterChip,圆形 shape,containerColor 设为 Color.Transparent,selectedContainerColor 使用 MaterialTheme.colorScheme.primary;标签颜色未选中用 onSurfaceVariant、选中用 onPrimary;选中态边框设为 Color.Transparent,未选中态边框使用 outline。selected 绑定 isSelected,label 限制单行。示例中不加 leadingIcon。
二、阴影透出问题。elevation 会在容器后方绘制一层柔和的深色形状;当容器没有填充时,这层形状会直接透过容器可见,表现为沿轮廓的灰色环,看起来像光晕或第二层更模糊的边框。这一点无法从颜色配置中看出,修复点在 elevation 参数。
三、仅清零 elevation 不够。elevatedFilterChipElevation 接收六个值,每个都有独立的设计令牌回退:resting、pressed、focused 各为 level 1,hovered 为 level 2,dragged 为 level 4,disabled 为 level 0,对应 1dp、1dp、1dp、3dp、8dp、0dp。因此只传 elevation = 0.dp 时静止态干净,但手指一按或指针一悬停环就回来。文中指出截图通常在静止态拍摄,所以容易在评审中被误判为正确。解决办法是显式传入全部状态,或改用无阴影的非 elevated 芯片。
四、仅选中态显示前置图标会导致宽度变化。默认模式会在选中芯片中加入对勾,图标 18dp、旁边间距 8dp,选中瞬间芯片恰好变宽 26dp;在可横向滚动的行里,它后面的每个芯片都会在点击瞬间横移 26dp,而手指仍在屏幕上。把图标做成动画也无法解决重排,只是把宽度变化分摊到动画期间,唯一办法是不改变宽度。
五、用「有填充 vs 无填充」替代对勾。选中态使用实心角色色、闲置态完全透明时,对比已达到最强,第二信号只会增加成本;这种有/无填充的区分可经受色盲与灰度截图检验。如果保留任何闲置填充,该论证不再成立,就需要图标、边框粗细变化等非色彩信号。
六、边框与填充配对。选中态出现实心填充时应关闭边框,因为轮廓色是按背景而非按填充色选定的,选中芯片容易出现深色边缘。selectedBorderColor = Color.Transparent 需与 selectedContainerColor 成对修改。
七、颜色令牌配对。角色色如 primary 并非固定颜色,深色方案下为浅色调、浅色方案下为饱和色;手写白色标签会在其中一种方案下失效。应使用 onPrimary 这类与填充配对的 on 令牌。
八、交互尺寸取舍。提供未指定的最小交互组件尺寸会把框架保证的触摸目标一并移除,缺的部分需自行补回。
九、装饰性包裹层的独立表面。选中芯片若还有包裹层绘制的动画轮廓,该环绘制在芯片外部,与 selectedBorderColor 无关,可能出现两个轮廓并存,需在选中态决定保留哪一个。
十、验证方式。文中给出基于 javap 的命令:查看各 elevation 参数的回退令牌、令牌对应的级别(level 0/1/2/3/4/5 = 0/1/3/6/8/12 dp)、前置图标大小与间距,以及在自己代码树中搜索 elevatedFilterChipElevation 与 filterChipBorder 调用。观察结果:六个独立 getter 对应六个独立默认值;静止、按下、聚焦为 level 1,悬停为 level 2,拖拽为 level 4,禁用为 level 0;图标使宽度增加 26dp。手动验证要求分别在两种主题下长按未选中芯片观察光晕、在指针设备上悬停(3dp 情形最明显),并点击滚动行左侧芯片确认右侧芯片不移动。
限制与缺失:资料未提供该条目的收费、价格、平台支持范围或效果数据,暂未提供。