Compose Material 主题颜色解释 ColorScheme

颜色
primaryThe primary color is the color displayed most frequently across your app’s screens and components.主色是在应用程序的屏幕和组件中最常显示的颜色。在整个应用程序的各个屏幕以及众多组件当中,出现频率最高、最常被用来展示的那种颜色,主导整体视觉风格的基础色调。
onPrimaryColor used for text and icons displayed on top of the primary color.用于显示在主色之上的文本和图标的颜色。是在主色作为底层颜色的基础上,用于呈现位于其上方的文本、图标等元素的颜色,确保视觉上的清晰展现。
primaryContainerThe preferred tonal color of containers.容器首选的色调颜色。是在各种容器元素上,比较优先被考虑选用的那种色调颜色,使容器在视觉上达到某种预期的效果。
onPrimaryContainerThe color (and state variants) that should be used for content on top of primaryContainer.应用于主色容器之上内容(以及状态变体)的颜色。针对主色容器这个特定的区域,放置在其上方的内容所适宜采用的颜色,同时会因不同状态而有颜色的变化。
inversePrimaryColor to be used as a "primary" color in places where the inverse color scheme is needed, such as the button on a SnackBar.在需要反色配色方案的地方(如小吃栏上的按钮)用作 “主色” 的颜色。在那些需要运用反色配色方案的场景中,比如小吃栏的按钮处,会将其当作主色来使用,主导该部分的视觉呈现。
secondaryThe secondary color provides more ways to accent and distinguish your product.辅色提供了更多突出和区分产品的方式。这种颜色能够辅助主色,从更多角度、以更多样的形式来突出产品的特点、对产品进行差异化呈现。
onSecondaryColor used for text and icons displayed on top of the secondary color.用于显示在辅色之上的文本和图标的颜色。当以辅色作为底层色彩时,用来显示在其上面的文本、图标等元素的颜色,让内容在该底色上清晰呈现。
secondaryContainerA tonal color to be used in containers.用于容器的一种色调颜色。就是可运用在容器元素上的一种具有特定色调的颜色,用于容器的视觉呈现方面。
onSecondaryContainerThe color (and state variants) that should be used for content on top of secondaryContainer.应用于辅色容器之上内容(以及状态 variants)的颜色。对于辅色容器之上的内容,需要采用的颜色,且会根据不同状态呈现出不同的颜色变体,以适配不同情况。
tertiaryThe tertiary color that can be used to balance primary and secondary colors, or bring heightened attention to an element such as an input field.可用于平衡主色和辅色,或用于让某个元素(如输入字段)更受关注的第三色。其作用一方面可以协调主色和辅色之间的视觉关系,另一方面也能让像输入字段这类特定元素更加醒目,吸引更多关注。
onTertiaryColor used for text and icons displayed on top of the tertiary color.用于显示在第三色之上的文本和图标的颜色。当以第三色作为底层颜色时,用于呈现位于其上方的文本、图标等元素的颜色,保障内容视觉上的清晰展现。
tertiaryContainerA tonal color to be used in containers.用于容器的一种色调颜色。是能够运用在容器上,具备特定色调的一种颜色,用于容器的视觉设计方面。
onTertiaryContainerThe color (and state variants) that should be used for content on top of tertiaryContainer.应用于第三色容器之上内容(以及状态 variants)的颜色。在第三色容器这个特定区域之上放置内容时所应采用的颜色,而且会依据不同状态出现相应的颜色变化情况。
backgroundThe background color that appears behind scrollable content.出现在可滚动内容背后的背景颜色。指的是当存在可滚动内容时,其后方所呈现出来的背景颜色,用于界定内容所处的背景视觉区域。
onBackgroundColor used for text and icons displayed on top of the background color.用于显示在背景色之上的文本和图标的颜色。就是在已经设定好的背景颜色之上,用来呈现文本以及图标等元素的颜色,使其能清晰被看到。
surfaceThe surface color that affect surfaces of components, such as cards, sheets, and menus.影响组件表面(如卡片、面板和菜单)的表面颜色。是那种会对像卡片、面板、菜单等组件的表面外观产生影响的颜色,决定这些组件表面视觉呈现效果。
onSurfaceColor used for text and icons displayed on top of the surface color.用于显示在表面色之上的文本和图标的颜色。在物体表面颜色之上,用于展示文本、图标等元素的颜色,使得这些元素能在该表面背景下凸显出来。
surfaceVariantAnother option for a color with similar uses of surface.具有与表面色类似用途的另一种颜色选项。是一种和表面色有着类似使用场景、发挥类似功能的颜色,可作为另一种替代选择。
onSurfaceVariantThe color (and state variants) that can be used for content on top of surface.可用于表面之上内容(以及状态 variants)的颜色。是可以运用在物体表面之上展示内容时的颜色,并且会根据内容所处的不同状态产生相应的颜色变化情况。
surfaceTintThis color will be used by components that apply tonal elevation and is applied on top of surface.此颜色将由应用色调抬升效果的组件使用,并应用在表面色之上。是会被那些具备色调抬升这类视觉效果应用的组件所采用的颜色,并且是叠加在常规表面色之上呈现的。
inverseSurfaceA color that contrasts sharply with surface.一种与表面色形成鲜明对比的颜色。和常规的表面颜色放在一起时,能产生很强烈、明显的视觉反差效果,便于突出区分。
inverseOnSurfaceA color that contrasts well with inverseSurface.一种与反色表面形成良好对比的颜色。该颜色与反色表面搭配在一起时,能够产生比较协调、明显区分的视觉对比效果。
errorThe error color is used to indicate errors in components, such as invalid text in a text field.错误色用于指示组件中的错误,例如文本字段中的无效文本。是专门用来提示组件出现错误情况的颜色,像文本框里输入了不符合要求的无效文本时,就会用此颜色凸显错误状态。
onErrorColor used for text and icons displayed on top of the error color.用于显示在错误色之上的文本和图标的颜色。当错误色作为底色时,此颜色用于展示处在错误色上面的文本和图标内容,保证可读性和辨识度。
errorContainerThe preferred tonal color of error containers.错误容器首选的色调颜色。是在用于承载错误相关内容的容器上,比较优先被选用的那种色调颜色,使其在视觉上能和错误相关元素适配。
onErrorContainerThe color (and state variants) that should be used for content on top of errorContainer.应用于错误容器之上内容(以及状态 variants)的颜色。在错误容器这个特定区域之上展示内容时所应采用的颜色,并且会根据不同状态有相应的颜色变化情况。
borderSubtle color used for boundaries.用于边界的柔和颜色。是那种用于体现边界部分,比较淡雅、不突兀的颜色,起到区分不同区域等作用。
borderVariantUtility color used for boundaries for decorative elements when strong contrast is not required.在不需要强烈对比时,用于装饰性元素边界的实用颜色。在装饰性元素周边起边界划分作用的颜色,当不需要形成很强烈的视觉反差时使用,注重实用性与装饰性的平衡。
scrimColor of a scrim that obscures content.用于遮挡内容的遮罩的颜色。是那种应用在遮罩上的颜色,其目的在于对部分内容起到遮挡、隐藏等视觉效果。
<think>好的,用户想了解Compose的进度条。首先,我需要确定他们指的是哪个框架的Compose,因为Jetpack ComposeCompose Multiplatform都可能涉及进度条的实现。根据常见情况,用户很可能是在问Android的Jetpack Compose。 接下来,我应该回顾Jetpack Compose中提供的进度条组件。记得有两种主要类型:线性进度条(LinearProgressIndicator)和圆形进度条(CircularProgressIndicator)。需要详细说明它们的用法和自定义选项。 用户可能需要基础的使用方法,所以先展示最简单的示例代码,比如不指定进度的情况,这样默认会显示不确定状态的进度条。然后,再展示如何通过progress参数控制具体进度值,比如0.5表示50%。 然后,自定义部分很重要。颜色、粗细、动画持续时间这些属性用户可能会经常调整。要提到Modifier的应用,比如设置宽度、高度或padding。颜色方面,可以使用color参数,而strokeWidth适用于圆形进度条的边框粗细。动画参数如animationSpec可以调整动画效果。 不确定状态的进度条需要特别说明,当progress参数不传时,组件会显示循环动画,表示正在加载但进度未知。这时候可能需要调整动画持续时间或其他视觉参数。 另外,用户可能想知道如何组合这些进度条到实际界面中,比如在加载数据时显示。可以建议结合状态管理,比如remember { mutableStateOf } 来控制显示或隐藏进度条。 需要检查是否有遗漏的部分,比如样式定制或与其他组件的结合使用。还要确保示例代码正确,符合Compose的最新语法,比如使用Material3的组件可能需要不同的导入,但通常用户可能还在用Material库,所以保持示例通用。 最后,确保回答结构清晰,分点说明,让用户能够逐步理解和应用。避免使用过于专业的术语,保持语言简洁易懂。同时提醒用户根据需求选择合适的进度条类型,并考虑用户体验,比如在长时间加载时提供反馈。</think>在 Jetpack Compose 中实现进度条,主要使用以下两个组件: 一、基础用法 1. 线性进度条 ```kotlin LinearProgressIndicator( modifier = Modifier .width(200.dp) .height(4.dp), progress = 0.5f, // 进度值 0-1 color = Color.Blue, trackColor = Color.LightGray ) ``` 2. 圆形进度条 ```kotlin CircularProgressIndicator( modifier = Modifier.size(48.dp), progress = 0.7f, strokeWidth = 4.dp, color = MaterialTheme.colorScheme.primary ) ``` 二、核心特性 1. 确定型进度(显示具体进度值) - 通过 `progress` 参数设置 0.0-1.0 的进度值 - 自动显示填充动画 2. 不确定型进度(加载状态) ```kotlin // 不设置 progress 参数即为不确定状态 CircularProgressIndicator() ``` 三、自定义配置 1. 动画控制 ```kotlin LinearProgressIndicator( progress = currentProgress, animationSpec = tween(1000) // 自定义动画时长 ) ``` 2. 样式组合 ```kotlin Box(modifier = Modifier.fillMaxSize()) { CircularProgressIndicator( modifier = Modifier.align(Alignment.Center), strokeCap = StrokeCap.Round ) } ``` 四、最佳实践建议 1. 在加载异步数据时配合使用: ```kotlin var isLoading by remember { mutableStateOf(true) } if (isLoading) { CircularProgressIndicator() } else { ContentView() } ``` 2. 推荐组合使用: - 全屏加载:居中显示大尺寸进度条 - 局部加载:在对应区域显示小型进度指示器 - 按钮加载:在按钮内嵌入微型进度指示 注意:Compose 1.3+ 推荐使用 Material3 组件库中的 `LinearProgressIndicator` 和 `CircularProgressIndicator`,它们默认支持动态颜色适配主题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值