material3 中底部弹窗ModalBottomSheet

material3 中底部弹窗ModalBottomSheet

    • 相关源码
    • 错误示范
    • 正确操作

由于ModalBottomSheetLayout在material3中被抛弃,所以采用ModalBottomSheet

相关源码

/*** <a href="https://m3.material.io/components/bottom-sheets/overview" class="external" target="_blank">Material Design modal bottom sheet</a>.** Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile,* especially when offering a long list of action items, or when items require longer descriptions* and icons. Like dialogs, modal bottom sheets appear in front of app content, disabling all other* app functionality when they appear, and remaining on screen until confirmed, dismissed, or a* required action has been taken.** ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fdeveloper.android.com%2Fimages%2Freference%2Fandroidx%2Fcompose%2Fmaterial3%2Fbottom_sheet.png&pos_id=img-jRNm94tA-1714121659172)** A simple example of a modal bottom sheet looks like this:** @sample androidx.compose.material3.samples.ModalBottomSheetSample** @param onDismissRequest Executes when the user clicks outside of the bottom sheet, after sheet* animates to [Hidden].* @param modifier Optional [Modifier] for the bottom sheet.* @param sheetState The state of the bottom sheet.* @param shape The shape of the bottom sheet.* @param containerColor The color used for the background of this bottom sheet* @param contentColor The preferred color for content inside this bottom sheet. Defaults to either* the matching content color for [containerColor], or to the current [LocalContentColor] if* [containerColor] is not a color from the theme.* @param tonalElevation The tonal elevation of this bottom sheet.* @param scrimColor Color of the scrim that obscures content when the bottom sheet is open.* @param dragHandle Optional visual marker to swipe the bottom sheet.* @param windowInsets window insets to be passed to the bottom sheet window via [PaddingValues]* params.* @param content The content to be displayed inside the bottom sheet.*/
@Composable
@ExperimentalMaterial3Api
fun ModalBottomSheet(onDismissRequest: () -> Unit,modifier: Modifier = Modifier,sheetState: SheetState = rememberModalBottomSheetState(),shape: Shape = BottomSheetDefaults.ExpandedShape,containerColor: Color = BottomSheetDefaults.ContainerColor,contentColor: Color = contentColorFor(containerColor),tonalElevation: Dp = BottomSheetDefaults.Elevation,scrimColor: Color = BottomSheetDefaults.ScrimColor,dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,content: @Composable ColumnScope.() -> Unit,
) ....

错误示范

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview(showBackground = true, name = "TestImageShare", group = "test")
fun TestImageShare(){// 分享val sheetState = rememberModalBottomSheetState();val scope = rememberCoroutineScope()Row {Button(onClick = { scope.launch {  sheetState.show()} }) {Text(text = "打开底部弹出")}Button(onClick = { scope.launch {  sheetState.hide()} }) {Text(text = "关闭底部弹出")}}ModalBottomSheet(onDismissRequest = {scope.launch {  sheetState.hide()}},sheetState=sheetState){LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp),modifier = Modifier){item(1){Column(horizontalAlignment = Alignment.CenterHorizontally) {Image(painter =painterResource(id = R.drawable.test),alignment = Alignment.Center,contentScale = ContentScale.Crop,contentDescription = null,modifier = Modifier.height(80.dp).padding(5.dp))Text(text = "微信",color = Color.Black)}}}}}

加载ModalBottomSheet时候已经弹出,sheetState没有起到效果

在这里插入图片描述

正确操作

通过State来重新重组ui,实现点击开启,点击关闭的结果,
如果你在on遣散请求之外提供逻辑来删除表单,你必须额外处理预期的状态清理,才能使用sheetState.hide()进行清理

// 分享
val sheetState = rememberModalBottomSheetState();
var visible by remember {mutableStateOf(false)
}
Row {Button(onClick = {visible = !visible}) {Text(text = "打开底部弹出")}
}if (visible) {ModalBottomSheet(onDismissRequest = {visible = false},sheetState = sheetState) {Column(horizontalAlignment = Alignment.CenterHorizontally) {Image(painter =painterResource(id = R.drawable.test),alignment = Alignment.Center,contentScale = ContentScale.Crop,contentDescription = null,modifier = Modifier.height(80.dp).padding(5.dp))Text(text = "微信",color = Color.Black)}}
}

在这里插入图片描述

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

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

相关文章

2024中国航空航天暨无人机展诚邀全国相关商协会组团参展

2024中国航空航天暨无人机展诚邀全国相关商协会组团参展 2024中国航空航天暨无人机展览会诚邀全国各关联商会、协会&#xff0c;联盟、各专业会展公司、各级城市政府及关联产业园区、各关联网站报纸杂志及平台等组团参展 主办单位&#xff1a; 中国航空学会 重庆市南岸区人民…

JTAG访问xilinx FPGA的IDCODE

之前调试过xilinx的XVC&#xff08;Xilinx virtual cable&#xff09;&#xff0c;突然看到有人搞wifi-JTAG&#xff08;感兴趣可以参考https://github.com/kholia/xvc-esp8266&#xff09;&#xff0c;也挺有趣的。就突然想了解一下JTAG是如何运作的&#xff0c;例如器件识别&…

python怎么输出倒序

python怎么输出倒序&#xff1f;下面给大家介绍四种方法&#xff1a; 创建测试列表 >>> lst [1,2,3,4,5,6]方法1&#xff1a; >>> lst.reverse() #reverse()反转 >>> lst [6, 5, 4, 3, 2, 1] 方法2&#xff1a; >>> lst1 [i for i in …

网贷大数据黑名单要多久才能变正常?

网贷大数据黑名单是指个人在网贷平台申请贷款时&#xff0c;因为信用记录较差而被列入黑名单&#xff0c;无法获得贷款或者贷款额度受到限制的情况。网贷大数据黑名单的具体时间因个人信用状况、所属平台政策以及银行审核标准不同而异&#xff0c;一般来说&#xff0c;需要一定…

一站式服务:教你搭建AI知识库

在信息化高速发展的今天&#xff0c;知识管理已成为企业提升竞争力的重要因素。而AI知识库&#xff0c;作为知识管理的高级形态&#xff0c;被很多企业选择。那么&#xff0c;如何打造一款高效、智能的AI知识库呢&#xff1f;本文的一站式服务将为您一一解答。 一、明确需求与目…

C语言——贪吃蛇游戏的实现

目录 一. 贪吃蛇的介绍 二. Win32 API 1. 控制台程序 2. COORD 控制台屏幕上的坐标 3. GetStdHandle 4. GetConsoleCursorInfo CONSOLE_CURSOR_INFO 5. SetConsoleCursorInfo 6. SetConsoleCursorPosition 封装的SetPos函数 7. GetAsyncKeyState 宏定义KEY_PRESS 三…

Docker基础+虚拟化概念

目录 一、虚拟化简介 1、虚拟化概述 2、cpu的时间分片&#xff08;cpu虚拟化&#xff09; 3、cpu虚拟化性性能瓶颈 4、虚拟化工作 4.1虚拟机工作原理 4.2两大核心组件:QEMU、KVM 4.2.1QEMU&#xff1a; 4.2.2KVM&#xff1a; 5、虚拟化类型 ①全虚拟化&#xff1a; …

科普:嵌入式代码软件在环(SiL)测试的可靠性

关键词&#xff1a;嵌入式系统、软件在环&#xff08;SiL&#xff09;、测试、生命周期 01.简介 当前&#xff0c;嵌入式系统开发的大趋势为通过软件实现大量的硬件功能&#xff0c;这导致软件的复杂程度显著上升——代码开发成本和风险也成倍增加。复用已有系统中的软件组件…

函数模板与类模板初阶

如果要写一个交换函数&#xff0c;不同类型的话调用不同的交换函数&#xff0c;如果使用重载的话只能解决函数名相同但是会根据参数类型调用不同的函数。即使这样也依旧要写很多不同类型的swap交换函数 函数重载的交换函数 仔细观察会发现除了类型不同其他的函数结构什么的都一…

编程新手必看,Python3中继承知识点及语法学习总结(28)

1、继承 在Python 3中&#xff0c;继承是面向对象编程的一个核心概念&#xff0c;它允许我们创建一个新的类&#xff08;称为子类或派生类&#xff09;&#xff0c;该类继承另一个类&#xff08;称为父类或基类&#xff09;的属性和方法。通过这种方式&#xff0c;子类可以重用…

Linux下基本指令-掌握

目录 为什么要学命令行 Linux下基本指令-掌握 ls 指令 pwd命令 cd 指令 touch指令 mkdir指令&#xff08;重要&#xff09;&#xff1a; rmdir指令 && rm 指令&#xff08;重要&#xff09;&#xff1a; man指令&#xff08;重要&#xff09;&#xff1a; cp指…

ThingsBoard远程RPC调用设备

使用 RPC 功能 客户端 RPC 从设备发送客户端 RPC 平台处理客户端RPC 服务器端 RPC 服务器端RPC结构 发送服务器端RPC 使用 RPC 功能 ThingsBoard 允许您从服务器端应用程序向设备发送远程过程调用 (RPC)&#xff0c;反之亦然。基本上&#xff0c;此功能允许您向设备发送命…