首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在展开时更改ModalDrawer的大小,Jetpack Compose

Jetpack Compose 是一个用于构建 Android 用户界面的现代工具包,它基于 Kotlin 编程语言,并提供了一种声明性的方式来构建 UI。在 Jetpack Compose 中,可以使用 ModalDrawer 组件来创建一个模态侧边栏,并且可以通过更改其大小来进行定制。

要在展开时更改 ModalDrawer 的大小,可以使用 Modifier.fillMaxSize() 修饰符将 ModalDrawer 的大小设置为屏幕的最大尺寸。然后,可以使用 Modifier.fillMaxWidth() 或 Modifier.fillMaxHeight() 修饰符来更改 ModalDrawer 的宽度或高度。

例如,要在展开时将 ModalDrawer 的宽度设置为屏幕宽度的一半,可以使用以下代码:

代码语言:txt
复制
var isDrawerExpanded by remember { mutableStateOf(false) }

ModalDrawer(
    drawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled = isDrawerExpanded,
    drawerContent = {
        // 侧边栏内容
    },
    content = {
        // 主要内容
    }
) {
    // ...
    Button(
        onClick = { isDrawerExpanded = !isDrawerExpanded }
    ) {
        // 切换侧边栏展开/关闭按钮
    }
    // ...
}

在上面的示例中,通过使用 remember 来保持 ModalDrawer 是否展开的状态,并通过 rememberDrawerState() 来创建一个可控制的 drawerState。将 gesturesEnabled 参数设置为 isDrawerExpanded,以便在侧边栏展开时启用手势。通过点击按钮来切换 isDrawerExpanded 的值,从而控制侧边栏的展开和关闭。

此外,在 Jetpack Compose 中还有其他一些用于构建用户界面的组件和修饰符,可以根据实际需求进行使用和定制。详情可参考腾讯云的 Jetpack Compose 相关文档:Jetpack Compose

请注意,本回答中没有提及云计算品牌商,如需了解腾讯云的相关产品和服务,请访问腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为任意屏幕尺寸构建 Android 界面

这些新 API 还将消除设备横竖屏切换需要自定义逻辑需求,大多数情况下只需针对不同窗口大小类断点进行设计,应用就会适应正确布局和各种应用状态。...△ 基于高度窗口大小表示 总而言之,窗口大小出现,代表了 Android 自适应和响应式布局开发中一大进步,包括更新和优化指南、Jetpack WindowManager 中新 API...Jetpack Compose Jetpack Compose 2021 年 7 月发布了 1.0 版本后, Android 开发者社区产生了巨大反响,成千上万应用已经在生产环境中使用了 Compose...首先,我们获取当前窗口大小类,以及显示较小尺寸上 ModalDrawer,然后确保设置了 ModalDrawer 让其只响应该尺寸中手势。... JetNews 中我们首先获取窗口大小信息,较小和中等型宽度显示单窗口,而在展开型宽度显示列表/详情布局。

4.2K20

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

官方地址:https://developer.android.google.cn/jetpack/compose/mental-model 我这边也是根据官方文档,对重要部分和自己想法进行融合,来介绍什么是...当然了,我们只需要关注onCreate()中设置xml即可,由于布局是一次性加载,即生成View树过程是同步进行 1.2 compose UI 对与compose而言,每个可组合函数(组件)...compose中,每个可组合函数调用直至渲染完成,称之为重组 通过异步上树虽然带来了性能提升,但是管理方面变得困难,所以compose规定,每个可组合函数都是独立运行存在,可组合函数内部应该仅处理...compose,也可以查看官方文档-快速入门:https://developer.android.google.cn/jetpack/compose/setup 1.创建项目 我这边尝鲜使用MD3风格项目...ModalDrawer ModalDrawer仅仅是抽屉栏,同样只MD2中才有,需要DrawerState控制展开和收起: @Preview @Composable fun MyModalDrawer

5.9K30

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

今年Google/IO大会上,亮相了一个全新 Android 原生 UI 开发框架-Jetpack Compose, 与苹果SwiftIUI一样,Jetpack Compose是一个声明式UI...则负责其余工作-当状态发生改变,你UI将自动更新。...创建一个支持Jetpack Compose新应用 比起现有应用中接入Jetpack Compose ,创建一个支持Jetpack Compose 新项目则简单了许多,因为Android Studio...给Column添加样式 调用Column(),可以传递参数给Column()来配置Column大小、位置以及设置子元素排列方式。...原来安卓原生布局中,显示图片有相应控件ImageView,设置本地图片地址或者Bitmap就能展示,Jetpack Compose 中该如何显示图片呢?

6.3K20

Android | Compose 初上手

Compose 中,构建界面的时候,无需像之前那么构建 XML 布局,只需要调用 Jetpack Compose 函数来声明你想要元素,Compose 编译器就会自动帮你完成后面的工作。...组合函数 Jetpack Compose 是围绕可组合函数构建,这些函数就是要显示界面上元素,函数中只需要描述应用界面形状和数据依赖关系,而不用去关系界面的构建过程, 如果需要创建组合函数,只需要将...当 Compose 根据新输入重组,它仅调用可能已经更改函数或 lambad,而跳过其余函数或 lambda。通过跳过岂会为更改参数函数或者 lambda ,Compose 可以高效重组。...这可以动画第一帧,或者列表更新时候。但不管怎么样,界面都会显示出错误数量。因此 Compose 不支持这样写入操作。通过静止此类操作,我们允许框架更改线程以执行可组合 lambda。...此外,执行 Colum ,如果 names 未更改Compose 可能会旋转跳过 LazyColum 项。 同样,执行所有组合函数或者 lambda 都应该没有附带效应。

5.3K20

FAQ | 为大屏幕设备构建应用常见问题解答

多任务处理方面,大屏幕提供给用户更多空间进行多项操作,如果用户折叠设备上使用应用,开发者要考虑优化是当用户展开设备确保应用有良好连续性、良好界面显示效果和外观。...初期可以借助 Jetpack Compose 更轻松地构建自适应界面,未来开发周期中可以更轻松地进行维护和执行其他类似操作。除此以外,还可以使用兼容模式,但兼容模式并不能为用户提供理想体验。...所以强烈建议您优先选择使用 Jetpack Compose。...(Expanded height) 和展开宽度 (Expanded width),断点分别是 900dp+ 和 840dp+,更多屏幕尺寸相关大小可以参考下面的表: 与此同时,当考虑到可拆卸设备...使用 ConstraintLayout,您可以根据布局中视图之间空间关系指定每个视图位置和大小。这样一来,当屏幕尺寸改变,所有视图都可以一起移动和拉伸。

3.5K10

Jetpack Compose for Desktop: 里程碑1发布

深入详解 Jetpack Compose | 优化 UI 构建 中谷歌介绍了为什么要设计 Jetpack Compose 来完成原生 Android 开发,如今 Jetpack Compose for...该项目是基于 Google Jetpack ComposeJetpack Compose 一个用于 Android UI开发工具包,Compose for Desktop 可以让 Android...提供某些API可能仍会更改,当然 Gogole 也努力争取第一个稳定且可投入生产版本。...提供反馈意见 里程碑版本是开发者提供反馈最重要时间,因为它会促使 Google 能够稳定版本发布之前解决关键问题或包含其他功能,如果在使用 Compose for Desktop 遇到任何问题,或者发现桌面专用...compose-desktop 中,就可以找到有关 Compose for Desktop 讨论,#compose 中,也可以讨论涉及 Android 上 ComposeJetpack

4.6K30

从0上手Jetpack Compose,看这一篇就够了~

Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...我们是Activity中编写Java/Kotlin代码,XML中编写布局代码,这种方式是我们已经使用了很久方式,而Jetpack Compose完全抛弃了之前方式,新创造了一种“使用代码”编写页面的方式...在上面的图中我们看到,两个Text紧紧贴在一起了,XML布局中我们可以使用padding或者margin来解决这个问题,Compose中如何处理呢?以及我们如何为文字设置颜色、大小等样式呢?...这就需要使用ComposeModifier修饰符。 ComposeModifier修饰符 使用Compose修饰符可以更改大小、布局、外观与添加点击事件等。我们先来解决上面遗留问题。...Compose 是一个声明性界面框架。它描述界面特定状况下状态,而不是状态发生变化时移除界面组件或更改其可见性。调用重组并更新界面后,可组合项最终可能会进入或退出组合。

90731

详解 Android 12L|更好地适配大屏幕设备

为了 Android 12 及之后版本中打造更好分屏模式体验,我们正在协助用户,让所有应用在启动后自动进入分屏模式,无论这些应用是否声明为可调整大小。...使用 Compose 更加轻松地适应屏幕变化 通过 Jetpack Compose 可以更加轻松地针对大屏幕和多样化布局进行构建。...系统会处理其他事项,并根据您创建配置来确定展示方式。 Activity embedding 可以可折叠设备上流畅运行,随着设备折叠和展开轻松地堆叠和分开 Activity。...,帮助您设计、开发和测试可调整大小应用 UI。...△ 参考设备定义 布局验证 调整大屏幕 UI ,如果您不确定从哪里开始入手,您可以首先使用新工具来发现可能会对大屏幕设备造成影响潜在问题。

3.7K20

Jetpack Compose 使用前后对比

为了包含 Jetpack Compose 1.0.0-beta05 更新内容,这篇文章第一次发布后做出了更新。如果您希望查看 原始版本,请点击 这里。...本文中,我们将会回顾并对比一些关键指标,以了解 Compose 相对优势,其中包括: APK 大小、构建速度、代码行数。...: 我们使用了 APK Analyzer 报告 "APK file size" (而不是下载大小)。...APK 大小分析 将迁移后应用与接入 Compose应用做比较后,我们发现 APK 大小缩减了 **41%**,方法数减少了 **17%**。...使用了 Compose 后,我们发现 APK 大小缩减了 41%,方法数减少了 17% 这一数字表明,当您需要保留所有 View 类,以防出现需要在布局文件中使用它们情况,压缩工具作用十分有限。

1K30

Android Compose开发

入门 Jetpack Compose match_parent 相当于什么?...Developers 原创:写给初学者Jetpack Compose教程,基础控件和布局 原创:写给初学者Jetpack Compose教程,Modifier 原创:写给初学者Jetpack Compose...您可以使用修饰符来执行以下操作: 更改可组合项大小、布局、行为和外观 添加信息,如无障碍标签 处理用户输入 添加高级互动,如使元素可点击、可滚动、可拖动或可缩放 修饰符是标准 Kotlin 对象。...它会自动适当时间启动和取消协程,确保 Compose 组件生命周期内正确处理副作用。当组件被创建,LaunchedEffect 会启动协程,当组件被销毁,它会自动取消协程。...PagingConfig 对象用于配置分页行为和属性,其中包括: pageSize:每一页数据大小。 initialLoadSize:初始加载数据大小

29010

构建应用程序Docker镜像,如何管理和优化镜像大小

Docker作为一种轻量级容器技术,已经成为现代应用程序开发和部署重要工具。使用Docker,构建优化Docker镜像是非常重要,因为它可以显著影响应用程序性能和可伸缩性。...最小化依赖项:构建Docker镜像,应最小化依赖项。这意味着仅包括应用程序所需文件和库,而不是整个操作系统或其他不必要依赖项。这可以减小镜像大小,并且降低容器启动时间和资源消耗。...删除无用文件和目录:构建Docker镜像,开发人员应删除不必要文件和目录。这包括临时文件、日志和缓存等。这可以减小镜像大小,并且降低容器启动时间和资源消耗。...避免镜像中安装不必要软件包:构建Docker镜像,应避免安装不必要软件包。这可以减小镜像大小,并且降低容器启动时间和资源消耗。...使用多阶段构建:多阶段构建是一种优化Docker镜像大小有效方式。它允许开发人员不同构建阶段中执行不同操作,从而减小镜像大小

8810

Android Jetpack组件 Compose 使用介绍

Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....使用它,来感受声明式UI强大之处。 正文   Jetpack Compose是一个用于构建原生Android UI现代工具包。...,我尽可能说明详细一些,其实Compose出来已经有一段时间了,AS更新后,对于Compose开发更加友好,下面来创建一个项目吧。...然后我们修改项目名和包名,这里看到开发语言是Kotlin,而且是灰色不可更改,这说明如果你要使用Compose就必须要用Kotlin,这也是未来Android开发语言趋势,我相信现在还有很多是使用...② 大小设置 作为开发者要学会多尝试,比如我们再改一下这个图片参数,现在我们图片是没有设置大小,目前是默认大小,现在我们设置一下大小为60dp: ③ 图片设置 正方形图片不好看,下面我们改成圆

2.8K20

Jetpack Compose 现已支持 Material You | 2021 Android 开发者峰会

更多 Jetpack Compose 指南和文档 我们发布了大量关于 Jetpack Compose 技术分享,深入探讨了布局、动画和状态,展示了如何在 Wear OS、主屏幕微件 (widget)...最后我们举行了专题讨论会,并在会上回答了与 Jetpack Compose 和 Material 相关 大家 最关心问题。...Android Studio Bumblebee 工具更新 Android 开发者峰会上,Android Studio Bumblebee 已宣布进入 Beta 版,可为 Jetpack Compose...您可以迭代设计并引入新更改,安全地编辑生成代码。 Jetpack Compose 已推出稳定版本,供大家在生产环境中使用。...很高兴看到越来越多应用开始在生产环境中使用 Jetpack Compose,我们会继续构建我们功能路线图,让您可以使用 Compose 构建跨设备卓越应用。

2.7K30

谷歌大佬强势分享《Jetpack Compose 权威指南》,带你参透声明式UI终极奥义!

是的,这些东西我们依然 Compose 中运用,从而降低我们上手难度。...Android Jetpack 支持 Compose 刚刚发布时候,Android Jetpack很多其他库都第一间给予了 Compose 支持,从而丰富了 Compose 开发生态。...上跟 UI 不相关Compose 应该都是支持我写Hoo中,就使用了Paging、Navigation、ViewModel和LiveData等 Android Jetpack 库,再有协程和...谷歌官方Jetpack Compose 使用前后对比》 一文说道:Tivi应用在使用了 Compose 后,我们发现 APK 大小缩减了 41%,方法数减少了 17%。...另外, Compose 中不能轻松实现效果时候,借助于AndroidView,可以去调用Android原生View。

4.1K30

Jetpack Compose Beta 版现已发布!

在此 Beta 版中,Compose API 均已构建完成,并具备构建生产可用应用中所需全部功能。Beta 版也意味着其 API 已相对稳定,因此我们不会更改或移除 API。...Composable Android Emulator 上 Live Literals (实时文字) 适用于 Jetpack Compose 布局检查器 兼容现有应用 Jetpack Compose...您可以 Android 视图中嵌入 Compose UI,并在 Compose 中使用视图。我们 互操作性文档 中提供了多种应用策略。...Compose 会负责应用状态更改时更新您 UI,这样您无需操作界面就能使其转变为预期状态,省去了繁琐流程,并且可以避免出错。...我们期待收到您对应用中采用 Compose 反馈,您也可以 Kotlin Slack #compose 频道中参与讨论或在下方留言区和我们分享。

5.6K10
领券