VoidHope的博客

Card是用于显示带有圆角和可选阴影的矩形内容容器。它通常用于构建用户界面，并可以包含标题、文本、图像、按钮等元素，表示界面上的可交互元素，我们称它是 “卡片”。Card出上面列出的 3 中场景，还有其较多的场景可以使用卡片组件，这里不再一一列出。Compose UI 库中定义了 3 种样式的卡片组件。分别是 Filled Card，Elevated Card，Outlined Card。3 种卡片的设计准则是一致的。它们执行后的样式有所区别。默认情况下，Card。

FAB 是最具突出效果的悬浮按钮，出现在屏幕右下角。通常位于屏幕右下角，具有显著的圆形形状和浮动的定位，用于呈现应用程序的主要操作或常用操作，例如开始一个新的任务、分享内容、启动一个动作等。Compose UI 库中，FAB 的样式有 4 种。下面看下不同类型的 FAB 大小效果。

Checkbox和都是用于用户交互的常用组件，但它们的功能和用途有所不同。Checkbox是一个可以勾选或取消勾选的复选框，用户可以选择多个选项。它通常用于表示一系列可选项目，用户可以根据自己的需要选择任意数量的选项。在 Android Compose 的视觉呈现上，Checkbox可能具有特定的样式和动画效果，以符合 Material Design 或其他设计规范。则是一个单选按钮，它表示一组互斥的选项。在一组中，用户只能选择其中一个选项，一旦选中某个按钮，其他按钮会自动取消选中状态。

单选和多选都有其各自的优点和缺点。**单选**它的外观简洁直观，在选项较少的情况下，单选的分段式按钮占用空间小，且操作体验很好。但若选项较多（多于 5 个可选项）或复杂交互的情况下，使用单选分段式按钮就显得不够友好。**多选**它允许用户选择多个选项，适用于需要复杂筛选或配置的场景。当每个按钮被点击独立选中时，可以提供清晰的视觉反馈。与单选相比，多选的实现可能更复杂，需要处理更多的状态和交互逻辑。

5 中类型的Button在渲染的效果上不尽相同，因此对于它们的使用描述总结如下。Button即：它是一个基础组件，通过不同的参数和子组件来创建特定的视觉效果和行为。在需要使用通用按钮，并且希望通过自定义来实现特殊外观或行为时，开发者直接使用Button。：它通常用于突出显示主要的操作或强调一个重要的交互点。它的背景色通常与品牌的主题色或强调色相一致，以便吸引用户的注意力。当用户看到一个填充按钮时，他们通常会认为这是页面上的一个主要行动点。：它是一个带有描边的按钮，但没有填充色。

是一种比较特殊的应用栏，通常显示在屏幕的底部。它为用户提供了一个便捷的方式来访问应用的主要导航和功能。位于屏幕的底部。它适用于需要在屏幕上方显示主要内容的应用，如视频播放器、地图应用或阅读器等场景。上的项可以是图标或文本。这样允许用户快速访问应用的不同部分或执行特定操作。可与 FAB 协同工作。FAB 是一个突出的悬浮按钮，通常用于执行应用中最主要的操作，如创建新内容或开始新的任务。与ScaffoldScaffold提供了一个基本的布局结构，包括顶部应用栏、底部应用栏和内容区域。通过可以将。

前面文章介绍了 Small 类型的TopAppBar。下来介绍 Medium 和 Large 类型的。

AppBar 主要由2类，顶部 AppBar和底部 AppBar。顶部 AppBar 包含了 4 中类型：TopAppBar下面会逐个介绍 AppBar 的类型及给出示例。

Scaffold脚手架组件是一个核心组件，它为开发者提供了一个标准的、可定制的应用界面框架。包含了应用界面的基础元素，如状态栏、导航栏、顶部应用栏（TopAppBar）等。通过Scaffold，开发者可以轻松地为应用添加这些常见组件，并对其进行自定义。

中文意思是可组成的/可合成，也为了与原来 xml 和 View（ViewGroup）做出区分。Compose 提供了 Material Design 的实现，后者是一个用于创建数字界面的综合设计系统。上面表格中包含了大的组件类别，其中还有具体的组件类并未列举，下图是 Compose UI 库内组件类别及相关类的结构图。下表中整理出目前 Compose 组件篇里的组件类别，在过程中根据 Compose 库的更新情况跟随着更新。后续的文章将结合上述表格和结构图中的组件类进行介绍，并给出示例及运行结果。

通过基于 Kotlin 的声明式UI、高效的智能重组机制、响应式编程与数据流以及布局与测量的结合，Compose 为开发者提供了更高效、更灵活的UI构建方式。与传统的视图系统不同，Compose 通过声明式的方式描述 UI，这意味着我们只需要告诉系统我们想要的 UI 状态，而不需要关心如何实现渲染和更新。每个可组合函数都可以返回一个UI元素，该元素可以是基本的绘图元素（如文本、形状等），也可以是更复杂的布局容器（如行、列、网格等）。当状态发生变化时，Compose 会自动触发重组过程，更新相关的UI组件。