Jetpack Compose中适应性布局的新API

Jetpack Compose中适应性布局的新API

针对大屏幕优化的新组合件。
使用新的Material适应性布局,为手机、可折叠设备和平板电脑构建应用程序变得更加简单!市场上各种不同尺寸的Android设备的存在挑战了构建应用程序时对屏幕尺寸的通常假设。开发者不应该假设屏幕是平面的,也不应该假设应用程序启动的屏幕就是当前显示的屏幕。相反,开发者应该根据当前运行的设备来调整应用程序,以便对用户更有用。
一张桌子上摆满了大小不同的近20台Android设备
Android设备有各种尺寸的屏幕。

https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes

Jetpack Compose简化了动态UI设计和组件复用,为视图和XML布局文件提供了现代化的用户界面开发替代方案。此外,窗口大小类定义了特定的显示尺寸,您可以基于这些尺寸做出决策,例如在屏幕上显示一个窗格还是两个窗格。在我们的CanonicalLayouts GitHub存储库中,您可以看到如何实现这一点的示例。

https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts

Material适应性布局

对于大多数应用程序来说,处理不同窗口大小的规则可能是相同的。例如,在某些特定的窗口大小下,同时显示两个窗格或切换到导航栏是有意义的。但是大多数应用程序不需要个别定义这种行为。我们希望为您简化这些布局决策,同时为自定义设计和行为提供灵活性。
为此,我们发布了新的Material适应性布局的首个alpha版本。我们首先关注的组合件是ListDetailPaneScaffoldNavigationSuiteScaffold

列表-详细布局

ListDetailPaneScaffold是一个组合件,它接受一个用于列表的组合件和一个用于详细信息的组合件,并处理是否一次显示一个还是并排显示两个的所有逻辑。
要使用ListDetailPaneScaffold,请在您的应用程序模块的build.gradle文件中包含以下新依赖项:

androidx.compose.material3:material3-adaptive

使用rememberListDetailPaneScaffoldState存储scaffold的状态,存储当前选定的项目(如果有),然后使用您的组合件调用ListDetailPaneScaffold

//SampleListDetailPaneScaffold.kt
// Copyright 2023 Google LLC. SPDX-License-Identifier: Apache-2.0
val state = rememberListDetailPaneScaffoldState()
var selectedItem: MyItem? by rememberSaveable { mutableStateOf(null) }ListDetailPaneScaffold(scaffoldState = state,listPane = {MyList(onItemClick = { id -> // Set current itemselectedItem = id // Display the details panestate.navigateTo(ListDetailPaneScaffoldRole.Detail)})},detailPane = {// Show the details pane content if selected item is availableselectedItem?.let { item ->MyDetails(item)}},
)

当应用程序启动或发生配置更改(例如旋转设备或切换到分屏模式)时,代码会自动处理是否显示一个窗格或两个窗格。

左侧的较大窗口同时显示列表窗格和详细信息窗格,而右侧的较小窗口仅显示列表窗格。

使用ListDetailPaneScaffold意味着正确数量的窗格、窗格大小甚至间距都将自动处理

有关使用ListDetailPaneScaffold的更多详细信息,请参见构建列表-详细布局。
注意:我们尚未集成navigation-compose库支持,但已纳入我们的路线图中。

导航栏或导航栏

NavigationSuiteScaffold会自动为您的应用程序使用最适合的顶级导航UI,以最大程度地提高可达性。根据应用程序当前的窗口大小,UI在底部导航栏和侧面导航栏之间切换。
要使用NavigationSuiteScaffold,请在您的应用程序的build.gradle文件中包含以下新依赖项:
androidx.compose.material3:material3-adaptive-navigation-suite

然后创建您的导航UI:

//SampleNavigationSuiteScaffold.kt
// Copyright 2023 Google LLC. SPDX-License-Identifier: Apache-2.0
var selectedItem by rememberSaveable { mutableIntStateOf(0) }
val navItems = listOf("Songs", "Artists", "Playlists")
val navSuiteType = NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(currentWindowAdaptiveInfo())NavigationSuiteScaffold(navigationSuiteItems = {navItems.forEachIndexed { index, navItem ->item(icon = { Icon(Icons.Filled.Favorite, contentDescription = navItem) },label = { Text(navItem) },selected = selectedItem == index,onClick = { selectedItem = index })}}
) {// Screen content.Text(modifier = Modifier.padding(16.dp),text = "Current NavigationSuiteType: $navSuiteType")
}

NavigationSuiteScaffold自动根据窗口尺寸切换导航UI

如果您正在使用标准的Scaffold来仅显示底部导航栏和内容,您可以完全用NavigationSuiteScaffold替换scaffold。如果您正在使用scaffold来显示其他元素,如顶部应用栏、浮动操作按钮或底部工作表,您可以将scaffold移入NavigationSuiteScaffold的内容lambda中。

下一步

这个Material适应性布局的alpha版本还有很多工作要做。我们正在积极改进组件并添加新组件。同时,我们也在努力将那些不是特定于Material的更一般的适应性组件从material3-adaptive库中拆分出来。
与此同时,我们非常希望听到您的意见。通过在您的应用程序中使用ListDetailPaneScaffoldNavigationSuiteScaffold添加自适应布局,并通过提交bug或功能请求来告诉我们您的想法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/225501.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习的复习笔记4-岭回归与多项式回归

一、岭回归 在简单的线性回归中,一味追求平方误差最小化,R2值尽可能大,可能会受到噪声的严重干扰。噪声,即偶发的错误的值。 如图,若为满足所有点的拟合(虚线),表面上看R2值小&…

Vue中的过滤器了解吗?过滤器的应用场景有哪些?

​🌈个人主页:前端青山 🔥系列专栏:Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-filter过滤器 目录 一、是什么 二、如何用 定义filter 小结: 三、应用场景 四…

操作系统CLOCK算法

操作系统时钟(CLOCK)置换算法_时钟置换算法-CSDN博客 前七步相同 第八步的时候 发现页面在内存中 标记位变成1 但是指针不需要移动。

【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件

思路 JS-DLL-WINCC-PLC之间进行交互,思路,先用Visual Studio创建一个C#的DLL控件,然后这个控件里面嵌入浏览器组件,实现JS与DLL通信,然后DLL放入到WINCC里面的图形编辑器中,实现DLL与WINCC的通信。然后PLC与…

asp.net mvc游戏门户网站

c#asp.net mvc 说明文档 运行前附加数据库.mdf(或sql生成数据库) 主要技术: 基于asp.net mvc架构和sql server数据库,并采用EF实体模型开发三层架构BLL DAL 功能模块: 前端展示首页 新闻公告 英雄档案 视频图片 管理…

Python基础语法之学习type()函数

Python基础语法之学习type函数 一、代码二、效果 查看数据类型或者说查看变量存储的数据类型 一、代码 print(type("文本")) print(type(666)) print(type(3.14))二、效果 梦想是生活的指南针,坚持追逐梦想,终将抵达成功的彼岸。不要害怕失败…

JSP 条件动作标签之if标签详解

好 上文 JSP JSTL引入依赖并演示基础使用我们导入了 JSTL的JAR 并 演示了 IF标签的基础使用 本文 我们来说说 平时开发的常用标签 这里 我们需要先强调一下 常用标签 操作的全部都是域对象 首先 我们来看 条件动作标签 条件动作标签的特点是 依赖于某些域对象值 控制页面输出…

自动化接口测试:Pytest让你轻松搞定!了解一般流程及方法

首先我们要明确,通常所接口测试其实就属于功能测试,主要校验接口是否实现预定的功能,虽然有些情况下可能还需要对接口进行性能测试、安全性测试。 在学习接口自动化测试之前,我们先来了解手工接口测试怎样进行。 URL组成 为了更…

定时器与线程池

文章目录 定时器定时器的工作原理定时器的使用实现定时器 线程池线程池存的优点线程池的使用线程池的原理工厂模式ThreadPoolExecutor类 实现线程池 定时器 定时器也是软件开发中的一个重要组件,我们可以将一个任务交给定时器,约定好时间到了定时器就执…

纯干货篇,用Stable diffusion制作广告的保姆级教程

今天就想给大家演示一般如何使用Stable diffusion为你的产品添加场景,秒变广告大片。 掌握这个技能,你可以随意将产品添加不同的场景,节约复杂的拍摄布景和拍摄成本。 话不多说,接下来是详细讲解演示流程 首先选出一张你的产品图…

解决方案:新版WPS-右键粘贴值到可见单元格没有了

WPS筛序后复制,并且粘贴到可见单元格 (如果直接粘贴数据会乱掉) 旧版WPS,右键就能出现 但是新版WPS不是在这里(方法1) 新版WPS(方法2) 视频详细教程链接:解决方案&…

抽象工厂模式-C语言实现

说明&#xff1a; 均由 chatgpt生成&#xff0c;实例可以看出无法运行&#xff0c;仅供参考~ 抽象工厂模式&#xff1a; 代码实现&#xff1a; #include <stdio.h>// 定义抽象产品接口 typedef struct {void (*operation)(); } AbstractProductA;typedef struct {voi…