Jetpack Compose 学习

Jetpack Compose 学习

Jetpack Compose 学习

在实际项目开发中，使用 Jetpack Compose 来写 UI 界面，生产力能得到极大的飞跃，而且声明式 UI 将会是今后的主流，编写风格和 Flutter、Vue 以及 iOS 的 Swift UI 极为相似，但作为安卓开发， Jetpack Compose 是最贴近原生的

等 23 人订阅共31篇文章创建于2024-03-27

Jetpack Compose 的环境配置

新建工程首先，使用 Android studio 新建一个安卓开发的项目, 在 App 级的 build.gradle.kts 加入以下配置 gradle 配置及声明依赖项 Compose 与

1年前
317
点赞
评论

Jetpack Compose 的环境配置

Jetpack Compose 文本 Text

显示文本显示文字的最基本方法是使用以 String 作为参数的 Text 可组合项：显示资源中的文字我们建议您使用字符串资源，而不是对 Text 值进行硬编码，因为使用字符串资源时您可以与 An

1年前
844
1
评论

Jetpack Compose 文本 Text

Jetpack Compose 布局

Column 是垂直方向布局，类似于 LinearLayout 里的 orientation = vertical 同样，使用 Row 可将多个项水平地放置在屏幕上, 类似于 LinearLayout

1年前
133
点赞
评论

Jetpack Compose 布局

Jetpack Compose 修饰符

借助修饰符，您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作：更改可组合项的大小、布局、行为和外观添加信息，如无障碍标签处理用户输入添加高级互动，如使元素可点击、可滚动、可拖动或可缩放

1年前
332
点赞
评论

Jetpack Compose 修饰符

Jetpack Compose 组件 - 悬浮按钮

悬浮操作按钮 (FAB) 是一种高强调度按钮，可让用户在应用中执行主要操作。它能促使用户执行单一且集中的操作，这是用户可能采取的最常见路径，通常固定在屏幕右下角。请考虑以下三个可能会使用 FAB 的

1年前
219
点赞
评论

Jetpack Compose 组件 - 悬浮按钮

Jetpack Compose 组件 - 滑块

借助 [Slider]可组合项，用户可以从一系列值中进行选择。您可以使用滑块来让用户执行以下操作：调整使用一系列值（例如音量和亮度）的设置。过滤图表中的数据，例如设置价格范围。用户输入，例如在评

1年前
634
1
评论

Jetpack Compose 组件 - 滑块

Jetpack Compose 组件 - Button

按钮是基本组件，可让用户触发定义的操作。按钮有五种类型。下表介绍了五种按钮类型的外观以及应使用它们的位置。实心按钮填充的按钮组件使用基本的 [Button] 可组合项。默认情况下，它填充的是纯色。

1年前
92
点赞
评论

Jetpack Compose 组件 - Button

Jetpack Compose 组件 - Card

[Card] 可组合项充当界面的 Material Design 容器。卡片通常只会呈现一段连贯的内容基本实现方法 Card 的行为与 Compose 中其他容器非常相似。您可以通过调用其中的其他可

1年前
383
点赞
评论

Jetpack Compose 组件 - Card

Jetpack Compose 点击涟漪效果的添加

只要在组件里添加两个属性 interactionSource, indication，这样点击时就有涟漪效果

1年前
354
点赞
评论

Jetpack Compose 点击涟漪效果的添加

Jetpack Compose 条状标签

Chip 组件是一个紧凑的互动式界面元素。它表示复杂的实体，如联系人或标签，通常带有图标和标签。该消息可以是勾选、可关闭或可点击辅助条状标签过滤条件块输入条状标签您可以使用 [InputChi

1年前
723
2
评论

Jetpack Compose 条状标签

Jetpack Compose FlowRow

[FlowRow] 是与 Row 和 Column 类似的可组合项，但不同之处在于，当容器空间不足时，项会流向下一行。这会创建多个行或列。您也可以通过设置 maxItemsInEachRow 或 ma

1年前
1.3k
3
评论

Jetpack Compose FlowRow

Jetpack Compose 中的 ConstraintLayout

[ConstraintLayout] 是一种布局，让您可以相对于屏幕上的其他可组合项来放置可组合项。它是一种实用的替代方案，可代替使用多个已嵌套的 Row、Column、Box 和[其他自定义布局元素

1年前
1.1k
4
评论

Jetpack Compose 中的 ConstraintLayout

Jetpack Compose 抽屉式导航栏

抽屉式导航栏组件是一种滑入式菜单，可让用户导航到应用的各个部分。用户可以通过从侧面滑动或点按菜单图标来激活它。请考虑以下三个实现抽屉式导航栏的用例：内容整理：让用户能够在不同类别（例如新闻或博客应

1年前
347
点赞
评论

Jetpack Compose 抽屉式导航栏

Jetpack Compose 对话框

[Dialog] 组件会在主应用内容上方的一层显示弹出消息或请求用户输入。它可以打造干扰性界面体验，以吸引用户的注意力。对话框的用例如下：确认用户操作，例如删除文件时。请求用户输入，例如在待办事

1年前
342
3
评论

Jetpack Compose 对话框

Jetpack Compose 进度条

确定指示符确定性指示符可准确反映操作完成的程度。请使用 [LinearProgressIndicator] 或 [CircularProgressIndicator] 可组合项，并为 progres

1年前
382
1
评论

Jetpack Compose 进度条

Jetpack Compose 底部动作条

如果您要实现[底部动作条]，可以使用 [ModalBottomSheet] 可组合项。您可以使用 content 槽，该槽使用 [ColumnScope] 将工作表内容可组合项的布局设为一列：您可

1年前
275
点赞
评论

Jetpack Compose 底部动作条

Jetpack Compose 快捷信息栏 SnackbarHost

[信息条组件] 用作在屏幕底部显示的简短通知。它可提供有关操作或操作的反馈，而不会中断用户体验。信息条会在几秒钟后消失。用户还可以使用操作（例如点按按钮）将其关闭。请考虑以下三个可能会使用信息提示控

1年前
985
1
评论

Jetpack Compose 快捷信息栏 SnackbarHost

Jetpack Compose 分页器 Pager

如需以左右或上下方式浏览内容，您可以分别使用 [HorizontalPager] 和 [VerticalPager] 可组合项。这些可组合项的功能与视图系统中的 [ViewPager] 类似。默认情况

1年前
311
点赞
评论

Jetpack Compose 分页器 Pager

Jetpack Compose 列表

延迟列表系统会对所有列表项进行组合和布局，无论它们是否可见，因此如果您需要显示大量列表项（或长度未知的列表），则使用 [Column] 等布局可能会导致性能问题。 Compose 提供了一组组件，这

1年前
374
2
评论

Jetpack Compose 列表

Jetpack Compose 动画（动画修饰符和可组合项）

内置动画可组合项使用 AnimatedVisibility 为出现和消失添加动画效果默认情况下，内容以淡入和扩大的方式出现，以淡出和缩小的方式消失。您可以通过指定 [EnterTransition

1年前
370
2
评论

Jetpack Compose 动画（动画修饰符和可组合项）