Components 概览

Components 概览

Compose 中的组件被声明为 @Composable ，中文意思是可组成的/可合成，也为了与原来 xml 和 View（ViewGroup）做出区分。在使用过程中会体会到，使用 Compose 声明 UI 更像是在拼图。

Compose 提供了 Material Design 的实现，后者是一个用于创建数字界面的综合设计系统。我们可以使用可组合函数来实现 Material 组件。

下表中整理出目前 Compose 组件篇里的组件类别，在过程中根据 Compose 库的更新情况跟随着更新。

组件名	组件类	介绍
Scaffold	Scaffold	Scaffold 是 Compose UI 库中的一个重要组件，它提供了构建应用程序界面的基础结构和常见元素。
Buttons	Button ElevatedButton FilledTonalButton OutlinedButton TextButton	Button 是用户交互的关键元素，Button 允许自定义背景、文本颜色、点击事件等。此外，通过简单的 Kotlin 代码，你可以为按钮添加丰富的视觉效果和交互反馈。
Icon button	IconButton IconToggleButton FilledIconButton FilledIconToggleButton FilledTonalIconButton FilledTonalIconToggleButton OutlinedIconButton OutlinedIconToggleButton	IconButton 的作用是表示一个可点击的图标按钮，它通常用于触发特定的用户交互操作，如复制、粘贴、保存等。IconButton 具有一个最小触摸目标尺寸，以满足无障碍访问准则，并且可以在按钮内部居中显示图标。
Segmented button	SegmentedButton SingleChoiceSegmentedButtonRow MultiChoiceSegmentedButtonRow	Segmented Button（分段按钮）通常用作工具栏或导航栏的一部分，允许用户在几个选项之间进行单选切换。通过设置 allowMultiple 属性为 true，Segmented Button 也可以实现多选功能。这种按钮的设计旨在提供清晰、直观的界面元素，帮助用户轻松地切换或选择不同的功能或选项。
Cards	Card ElevatedCard OutlinedCard	提供了一个具有阴影和边距的容器，适用于展示内容块。Card 内部可以包含文本、图片或其他组件，并通过简单的属性设置来调整其外观。
Image	Image	Image 用于加载和显示图片。除了基本的图片加载功能，Image 还支持裁剪、缩放、颜色调整等高级特性。
Slider	Slider RangeSlider	Slider 用于实现滑动输入。组件提供了丰富的定制选项，以满足不同的设计需求。
Lists	ListItem	ListItem 的作用是在列表或滚动视图中表示单个项目或条目。它提供了一个标准的布局结构，包括左侧的图标、中间的内容以及右侧的操作项（如开关或图标按钮），以便快速构建一致且用户友好的列表项界面。通过自定义内容和布局，ListItem 可以适应各种不同类型的数据展示需求。
Progress indicators	LinearProgressIndicator CircularProgressIndicator	Progress Indicator 进度展示功能。组件提供了丰富的定制选项，以满足不同的设计需求。
Top app bar	TopAppBar CenterAlignedTopAppBar MediumTopAppBar LargeTopAppBar	AppBar（应用栏）用于展示应用的标题、导航图标及动作元素，以辅助用户导航。
Bottom app bar	BottomAppBar	AppBar（应用栏）用于展示应用的标题、导航图标及动作元素，以辅助用户导航。
Radio button	RadioButton	RadioButton 用于让用户从多个选项中选择一个，通常用于单选场景。
Floating Action Button	ExtendedFloatingActionButton FloatingActionButton SmallFloatingActionButton LargeFloatingActionButton	Floating Action Button（浮动操作按钮）是一个在界面中悬浮于内容之上的按钮，通常用于触发应用的主要或最常用的操作。
Chips	AssistChip ElevatedAssistChip FilterChip ElevatedFilterChip InputChip SuggestionChip ElevatedSuggestionChip	Chip 是一种小型、可点击的用户界面元素，通常用于表示标签、属性或分类，以便用户快速识别和选择相关信息。
Badge	Badge BadgedBox	Badge（徽标）是一种小部件，通常用于显示数字或文本，以标示与其关联的项目的新信息或状态。
Tooltip	PlainTooltip RichTooltip	Tooltip（提示框）是一种在用户界面元素附近显示简短文本信息的组件，用于解释或补充界面元素的功能和用途。
Checkbox	Checkbox TriStateCheckbox	Checkbox（复选框）允许用户通过单击来选中或取消选中某个选项，以表示他们的选择或偏好。
Dividers	HorizontalDivider VerticalDivider	Divider（分隔线）是一种用于在界面元素之间创建视觉分隔的组件，帮助组织和划分内容区域。
Menus	DropdownMenu DropdownMenuItem ExposedDropdownMenuBox	Menu（菜单）是一种可弹出或展开的组件，用于显示一系列操作选项供用户选择，通常在用户点击或长按某个元素时触发。
Text fields	TextField OutlinedTextField	TextField（文本输入框）是一种用于接收和编辑用户输入的文本组件，支持单行和多行文本输入，并允许设置多种属性和样式以满足不同的输入需求。
Dialog	BasicAlertDialog	Dialog（对话框）是一种用于向用户展示额外信息或进行交互操作的弹出窗口，可以包含标题、内容、按钮等元素，通常用于提示、确认、输入等操作。
Switch	Switch	Switch（开关）允许用户在两种状态之间切换，通常用于开启或关闭某个功能或设置。
Navigation Bar	NavigationBar NavigationBarItem	Navigation Bar（导航栏）是一种用于在应用或页面间进行导航的用户界面组件，通常展示在不同的屏幕底部，提供直观的导航选项供用户点击跳转。
Navigation Rail	NavigationRail NavigationRailItem	Navigation Rail（导航栏）是一个侧边导航组件，允许用户在应用程序的主要目的地之间移动。它通常用于显示三到七个应用程序目标，并且可以选择在标题内显示 FloatingActionButton 或徽标。每个目的地通常由一个图标和一个可选的文本标签表示。
Navigation Drawer	ModalNavigationDrawer ModalDrawerSheet PermanentNavigationDrawer PermanentDrawerSheet DismissibleNavigationDrawer DismissibleDrawerSheet NavigationDrawerItem	Navigation Drawer（导航抽屉）是一个从屏幕左边缘滑出的面板，用于显示应用的主要导航选项，提供用户在不同页面或功能间快速切换的便利。
Tabs	Tab LeadingIconTab PrimaryTabRow SecondaryTabRow TabRow ScrollableTabRow PrimaryIndicator SecondaryIndicator	Tabs（选项卡）用于将内容划分为多个部分，并通过点击不同的标签来切换显示不同的内容区域，帮助用户组织和浏览大量信息。
Snackbars	Snackbar	Snackbar 是一种轻量级的用户反馈机制，当操作成功、失败或有其他重要信息需要用户注意时，会在屏幕底部短暂地显示一条消息，并带有动画效果。它不会打断用户的当前操作，并且在一段时间后自动消失。
Bottom sheet	BottomSheetScaffold ModalBottomSheet	Bottom Sheet（底部表单）是一种从屏幕底部滑出的面板，通常用于展示附加内容或提供额外的操作选项，同时不会遮挡屏幕上的主要内容。
Search	SearchBar	它通常用于提供一个集成的搜索界面，让用户能够输入搜索查询并执行搜索操作。SearchBar 可能会包含文本输入框、清除按钮、语音输入按钮等功能，以简化搜索体验。这个组件的作用是提供一个用户友好的、一致性的搜索界面，并简化在 Compose 应用中实现搜索功能的过程。
Date Picker	DatePicker DatePickerDialog DateRangePicker	DatePicker 是一个允许用户选择日期的控件。它允许用户通过日历文本字段键入日期或使用下拉控件来选择日期，通常用于在用户界面上获取或设置日期信息。
Time pickers	TimePicker TimeInput	TimePicker 是一个允许用户选择时间的控件。它提供了用户友好的界面，让用户可以通过滚动或点击来选择小时、分钟和（可选的）秒，从而设定特定的时间。TimePicker 通常用于需要用户输入或确认时间的场景，如设置闹钟、日程安排等。
Swipe to Dismiss	SwipeToDismiss

上面表格中包含了大的组件类别，其中还有具体的组件类并未列举，下图是 Compose UI 库内组件类别及相关类的结构图。

后续的文章将结合上述表格和结构图中的组件类进行介绍，并给出示例及运行结果。