文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jetpack Compose之 在Compose中使用Navigation导航

前言 大约在一年半前，我发布了Compose的第一篇文章 Jetpack Compose开篇 之 HelloWorld，连我自己也没想到，这一年半的时间中我竟再也没有看过Compose..., 如今Compose...已经发布了稳定版本，还没学会Compose让我的头发又白了许多~ 使用Navigation在Compose中导航 如果你之前不喜欢Android提倡的”单Activity“应用，那么在Compose中相信你会慢慢习惯的...接下来我们来看，如何使用navigation来进行页面导航呢？...1的监听事件中使用占位符传参即可，代码如下所示： {     Text(text = "这是页面1")     Spacer(modifier = Modifier.height(20.dp))     ...总结 除此之外，Navigation  在Compose中还支持深层链接等，关于Compose的更多用法，欢迎持续关注我~

2K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Android Compose开发

    好处 Compose 编译后不是转化为原生的 Android 上的 View 去显示，而是依赖于平台的Canvas ，在这点上和 Flutter 有点相似，简单地说可以理解为 Compose 是全新的一套...教程，使用State让界面动起来 原创：写给初学者的Jetpack Compose教程，Lazy Layout Composable 告诉编译器：此函数旨在将数据转换为界面。...这些可组合项只会呈现屏幕上显示的元素，因此，对于较长的列表，使用它们会非常高效。...padding 在元素周围留出空间。 fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。 size() 指定元素的首选宽度和高度。...它控制了视图在屏幕上的显示顺序。具有较高 zIndex 值的视图将显示在具有较低 zIndex 值的视图之上。 默认情况下，视图的 zIndex 值为0。

    36310

    高效动画实现原理-Jetpack Compose 初探索

    一、简介 Jetpack Compose是Google推出的用于构建原生界面的新Android 工具包，它可简化并加快 Android上的界面开发。...三、Jetpack Compose动画 Jetpack Compose提供了一些功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。...下文将会对Jetpack Compose Animations的常用方法进行介绍。...Compose 已将动画简化到只需在我们的可组合函数中创建声明性代码的程度，只需编写希望 UI 动画的方式，其余部分由 Compose 管理。...Jetpack Compose提供的声明式UI工具包，能做到使用更少的代码实现更多的功能，且代码的可读性和逻辑性也大大提高了。 作者：vivo互联网游戏客户端团队-Ke Jie

    2.2K20

    安卓软件开发：Jetpack Compose 和 Material 3 实现高级登录页面（Kotlin）

    本项目使用 Compose、Material 3和 Kotlin 语言，实现一个登录页面。...项目 下载依赖项添加完成后，保证该项目设置了使用Jetpack Compose，通过配置 MainActivity以Compose语糖风格绑定启动UI： @Composable fun MainScreen...四、学习笔记 我加深了对 Jetpack Compose 的理解，还掌握了如何在实际项目中灵活使用状态管理和组件解耦。...五、总结和展望 通过本篇文章的实践，我体验到了 Jetpack Compose 的强大好处是Jetpack Compose声明式编程带来的直观、简化的 UI 构建、灵活的状态管理，以及 Material...相信 Jetpack Compose 在未来几年成为 Android UI 开发的主流工具，希望这篇文章能对大家有所帮助！！

    773183

    安卓软件开发：学习Jetpack Compose实现Navigation组件App

    3.3 布局和组件的灵活使用 Jetpack Compose 提供了丰富的 UI 组件和布局工具，但由于它是声明式的，我们必须思考如何将 UI 组件与状态管理紧密结合。...四、学习笔记 4.1 掌握Jetpack Compose的基础 在项目开发初期，首先需要学习 Jetpack Compose 的基本语法和使用方式。...4.3 Jetpack Navigation 的使用 Navigation 组件Compose 提供了页面管理功能。通过 NavController，轻松实现页面跳转，在页面之间传递参数。...五、总结 通过这个简单的Demo，讲解了 Jetpack Compose 和 Jetpack Navigation 的使用方法，理解了声明式 UI 开发的优势。...展望未来，Jetpack Compose 很快要成为安卓开发的主流，它的声明式开发模式使 UI 和业务逻辑分离得很彻底。这次Demo开发让我很熟悉如何在实际App中使用Compose的上手方法。

    40682

    Row本身是不支持滚动，如何实现滚动

    (rememberScrollState())) { } Modifier.horizontalScroll() 水平滚动 Modifier.verticalScroll() 垂直滚动 注意:compose...似乎不支持一个水平滚动嵌套垂直滚动(或垂直滚动中嵌套水平滚动),所以相应布局需要合理设计 此外,提及下,如果想使用像ListView或RecyclerView那样的列表组件,在Compose中可以使用LazyRow...verticalArrangement 垂直方向排列 horizontalAlignmentment 水平方向对齐 Spacer Spacer,直接翻译的话,应该是空格,其主要就是充当margin的作用...= null, elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习...border 边框,使用详见Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation

    1.8K30

    安卓软件开发：使用Jetpack Compose和M3的轮播图和列表App-上篇

    在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现使用Jetpack Compose、M3和Kotlin开发轮播图和列表功能。...一、项目背景 这个应用中常见的 UI 需求是轮播图、列表和弹窗，使用 Jetpack Compose 和 M3 的组件，可以快速、高效编码现代化的 UI。...在首页的 HomeScreen 中使用了 LazyRow 来实现横向滚动的轮播图，还展示了如何使用 M3 的组件创建卡片样式的分类项，自定义颜色、样式和阴影效果。...• Row: 把文字和图标水平排列，在两端留有一定的间距，视觉上很整齐。...Jetpack Compose 和 M3 实现了常见的轮播图、列表和弹窗功能，展示了如何高效构建现代化 UI 界面，希望这篇文章帮助大家更好理解 Compose 的强大。

    679111

    安卓软件开发：使用Jetpack Compose和Room开发NimWishApp-上篇

    在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现使用Jetpack Compose和Room开发NimWishApp的案例。...一、项目背景在Demo中，采用了最新的Jetpack ComposeM3技术栈，结合了Room数据库实现数据的持久化存储，提供了一个从UI层到数据层的完整解决方案，展示了从0到1的开发。...二、项目开发2.1 项目配置首先要配置依赖项，用Jetpack Compose、Room数据库等技术，依赖库的配置如下：dependencies { implementation "androidx.compose.ui...FontWeight.ExtraBold) Text(text = wish.description) } }}2.3 添加/编辑功能（AddEditDetailView）可以通过点击主页上的按钮进入添加.../编辑心愿的界面，使用OutlinedTextField处理用户输入，核心代码如下：@Composablefun AddEditDetailView( id: Long, viewModel

    40880

    Jetpack Glance Alpha 版现已推出

    现在，我们发布了 Jetpack Glance 的第一个 Alpha 版，让 Widgets 的构建过程变得更加轻松，该版本是建立在 Jetpack Compose 运行时 (Runtime) 之上的新框架...Glance 提供了新式声明性 Kotlin API，其类似于您在 Jetpack Compose 中使用的 API，能够帮助您用更少的代码构建更美观的自适应 App Widgets。...△ Glance 结构示意图 这意味着 Glance 需要 启用 Compose，且依赖于运行时 (Runtime)、图形 (Graphics) 和单元界面 Compose 层，但它与其他现有的 Jetpack...可以查看 在 Android 12 中构建新式 Android App Widgets 视频了解更多详细信息。 Glance 使用入门 您可以在 GitHub 上查看 示例，以便快速入门。...也可以在最新的 稳定版 Android Studio 中使用 Glance，但首先需要按照 Jetpack Compose 文档 中的步骤进行设置，因为 Glance 依赖于 Compose 运行时 (

    84210

    原创|Android Jetpack Compose 最全上手指南

    Android Studio 4.0.png 使用Jetpack Compose 来开始你的开发工作有2种方式： 将Jetpack Compose 添加到现有项目 创建一个支持Jetpack Compose...将Jetpack Compose 添加到现有项目 如果你想在现有的项目中使用Jetpack Compose，你需要配置一些必须的设置和依赖： （1）gradle 配置 在app目录下的build.gradle...创建一个支持Jetpack Compose的新应用 比起在现有应用中接入Jetpack Compose ,创建一个支持Jetpack Compose 的新项目则简单了许多，因为Android Studio...添加间距Spacer 我们看到，图片和文本之间没有间距，传统布局中，我们可以添加Margin属性，设置间距，在Jetpack Compose 中，我们可以使用HeightSpacer()和WidthSpacer...六、Compose 布局实时预览 从Android Studio 4.0 开始，提供了在IDE中预览composable函数的功能，不用像以前那样，要先下载一个模拟器，然后将app状态模拟器上，运行app

    6.4K20

    Flutter系列之Flex布局详解

    Flutter 是 Google 推出的跨平台 UI 框架，可以快速地在 Android 和 IOS 上构建高质量的应用程序，其主要特点是 Flutter 具有快速开发的能力、富有表现力和灵活的 Ui...； loose：不强制填充可利用空间，Widget自身大小。...对比效果如下： Expanded和Flexible Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间，如果多个 Widget 都使用了 Expanded 组件...Spacer 用来调节 Widget 之间的间距，会占据所有的剩余空间，因此 MainAxisAlignment 的设置将无效，Spacer 的属性 flex 用于设置剩余空间的分配权重，默认值为 1...，表示占据所有剩余空间，如果两个以上 Spacer 则按照 flex 分配剩余空间，代码参考如下： class RowSamplePage1 extends StatelessWidget {

    1.5K10

    Android | Compose 初上手

    简介 Jetpack Compose 是用于构建原生 Andorid 界面的新工具包，Compose 使用了更少的代码，强大的工具和直观的 Kotlin Api 简化并且加快了 Android 上界面的开发...在 Compose 中，在构建界面的时候，无需在像之前那么构建 XML 布局，只需要调用 Jetpack Compose 函数来声明你想要的的元素，Compose 编译器就会自动帮你完成后面的工作。...在开始使用 Compose 之前，你需要重新搭建环境，可参考**官方文档** 注解 @Compose 所有的组合函数都必须添加 @Compose 注解才可以。...组合函数 Jetpack Compose 是围绕可组合函数构建的，这些函数就是要显示在界面上的元素，在函数中只需要描述应用界面形状和数据依赖关系，而不用去关系界面的构建过程， 如果需要创建组合函数，只需要将...和原生的一样，需要空白区域时可以使用 Spacer ，使用方式如下： Spacer(modifier = Modifier.height(100.dp)) 复制代码 Surface 对内容进行装饰，例如设置背景

    5.4K20

    Android Jetpack组件 Compose 使用介绍

    Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....排列效果 3. gradle 二、布局 ① 布局填充 ② 大小设置 ③ 图片设置 ④ 空间占位 三、列表 ① 显示列表 ② item点击事件 四、源码 前言   一直以来，在Android 中构建UI页面是一个很耗时的操作...使用它，来感受声明式UI的强大之处。 正文   Jetpack Compose是一个用于构建原生Android UI的现代工具包。...Jetpack Compose 通过更少的代码、强大的工具和直观的 Kotlin API 简化并加速了 Android 上的 UI 开发。   听起来好像老牛逼了！！！...④ 空间占位 有时候为了美观，我们会设置两个控件之间有一定的距离，常规的边距和填充都可以做到，这里我们介绍一个空间占位，就拿这两个Text来说，我希望它们之间有一点距离，怎么做呢？

    2.9K20

    Jetpack-Compose 学习笔记（二）—— Compose 布局你学会了么？

    shape 指定的形状上填充颜色。...所以一般是使用 LazyColumn 来展示列表数据，LazyColumn 开始时并不会把所有的列表数据都加载进内存，它会先将展示在屏幕上的列表数据加载进内存，当滑动查看更多列表数据时，才会将这些数据加载到内存中...当然，ConstraintLayout 确实可以解决 View 体系中多层嵌套的问题，那么在 Compose 中也可以使用吗？ 答案是肯定的。...不受约束； fillToConstraints：布局大小将展开填充由布局约束所限制的空间。...也就是说，这个属性是先看看布局约束所限制的空间有多大，然后再将该子元素填充到这个有约束的空间中； preferredValue：布局大小是一个固定值，并受布局约束的影响； value：布局大小是一个固定值

    3.3K31

    使用 Jetpack 卡片库在 Wear OS by Google 谷歌上创建自定义卡片

    作者 / Jolanda Verhoef，开发者关系工程师 我们 在 2019 年推出了卡片，从那时起，该功能便成为 Wear OS by Google 谷歌智能手表上最实用的功能之一。...卡片访问速度快，使用便捷，且设计为可滑动访问，用户可直接在手腕上了解所需资讯及待办事项。同时，卡片也可以让用户控制想了解的信息和操作。 我们很高兴宣布 Jetpack 卡片库 将推出 Alpha 版。...开发者可以使用该库在 Wear OS 智能手表上创建自定义卡片。我们将在今年晚些时候推出相应的 Wear OS 平台更新，届时用户便能使用此类自定义卡片。...image.png 开始构建 卡片使用 Android Studio 构建，是 Wear OS 应用的一部分。...Jetpack 卡片库已推出 Alpha 版，期待收到 您的反馈，帮助我们改进 API。乐享编码！

    81620

    compose--初入compose、资源获取、标准控件与布局

    ()中设置xml即可，由于布局是一次性加载的，即生成View树的过程是同步进行的 1.2 compose UI 对与compose而言，每个可组合函数(组件)的调用可能发生在与调用方不同的线程上，即每个组件添加至...compose，也可以查看官方文档-快速入门：https://developer.android.google.cn/jetpack/compose/setup 1.创建项目 我这边尝鲜使用MD3风格的项目...在xml中，我们常常会使用资源id获取到资源文件，比如：color、drawable、string等，在compose中，通过以下函数获取，这些函数都位于androidx.compose.ui.res...推荐使用md主题设置dimen，用的也不多 四、标准控件 compose本身内置了一些组件，官方说法所有组件都是可组合函数，这边仅仅是便于传统开发理解，分成控件和布局来介绍，这些内置可组合函数分散在各个不同的库组内.../jetpack/compose/text 1.1 基本使用 所有compose函数都要由@Composable注解，并且每个可组合函数都是可以重用的组件： @Composable @Preview fun

    6.4K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券