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

Jetpack Compose扩展BottomSheetScaffold的BottomSheet只有在重新组合后才起作用

Jetpack Compose是一种现代化的UI工具包,用于在Android应用程序中构建原生界面。它通过声明式方式构建用户界面,简化了开发过程并提供了更好的性能和灵活性。

BottomSheetScaffold是Jetpack Compose中的一个布局组件,它提供了一个包含顶部应用栏和底部可滑动面板的布局结构。在默认情况下,BottomSheet不会自动显示,只有在重新组合(重新构建)之后,才会起作用。

BottomSheet在BottomSheetScaffold中可以通过使用底部面板控制器(BottomSheetState)来进行管理。底部面板控制器允许我们控制BottomSheet的状态,例如打开、关闭和中间状态。

具体而言,要使BottomSheet起作用,需要按照以下步骤进行操作:

  1. 创建一个底部面板控制器实例:
代码语言:txt
复制
val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)

这将创建一个底部面板控制器,并设置初始状态为折叠状态(Collapsed)。

  1. 在BottomSheetScaffold中使用bottomSheetState:
代码语言:txt
复制
BottomSheetScaffold(
    sheetContent = { /* 底部面板的内容 */ },
    scaffoldState = scaffoldState,
    sheetState = bottomSheetState
) {
    // 定义布局结构
    // 例如,顶部应用栏和主要内容
}

这将在BottomSheetScaffold中使用底部面板控制器。

  1. 定义底部面板的内容:
代码语言:txt
复制
@Composable
fun BottomSheetContent() {
    // 底部面板的内容
}

这是一个自定义的Composable函数,用于定义底部面板的具体内容。

  1. 在组合函数中使用BottomSheetContent:
代码语言:txt
复制
BottomSheetScaffold(
    sheetContent = { BottomSheetContent() },
    scaffoldState = scaffoldState,
    sheetState = bottomSheetState
) {
    // 定义布局结构
    // 例如,顶部应用栏和主要内容
}

通过将BottomSheetContent作为sheetContent参数传递给BottomSheetScaffold,底部面板的内容将被渲染并与底部面板控制器关联。

这样,当重新组合(重新构建)时,BottomSheet将根据底部面板控制器的状态进行相应的展示和隐藏。

尽管Jetpack Compose是一个相对较新的技术,但它已经在许多应用程序中得到了广泛的应用。它提供了更高效和灵活的开发方式,并且具有更好的性能和可维护性。

关于Jetpack Compose的更多信息和示例,请参考腾讯云的官方文档:

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

相关·内容

掌握 Jetpack Compose State,看这篇就够了

,不要错过 :-)Jetpack Compose状态State是什么 Jetpack 中,state表示一个和 UI 状态相关值。...remember {} 函数告诉 Compose,让 Compose 记住传给它值,这么做可以让 Compose 每次重新组合 UI 时候,不会每次都执行传给它这个 lambda 函数,导致重复执行...记住这一点(双关): Compose 里,我们无法控制我们 Compose 代码会被多频繁调用,也控制不了它执行次数。注意,上面这些讨论只有 Compose 函数中创建状态时候成立。...另外,改造Counter可组合项还需要调用者传入监听器,在按钮被点击时把点击事件通知给调用者。...通过修改状态更新可组合项目随着我们越多地使用 Compose 自带可组合项(如Scaffolds、BottomSheet、Drawer等),我们会意识到 Jetpack Compose 中状态是无处不在

7.7K111

一起看 IO | Android 开发工具最新更新

该功能可以帮助您在开发过程中发现并及时更新依赖,而不是等到 Play Console 上发布应用时去处理依赖问题。如需了解此新工具更多信息,请参阅 Android 开发者近期发布文章。...接下来为大家介绍 Android Studio Dolphin 中重要功能更新和改进: Jetpack Compose Compose Animation Coordination (Compose...图片 △ 多重预览注解 布局检查器中 Compose 重新组合计数 - 布局检查器中查看 Compose 应用重新组合计数。重新组合计数和跳过计数可配置显示组件树和属性窗格中。...△ 由 Gradle 管理设备 接下来介绍 Android Studio Electric Eel 中主要新功能和优化: Jetpack Compose 实时编辑 - Android Studio...图片 △ 屏幕镜像功能 回顾一下,Android Studio Dolphin Beta 中基本达到稳定版品质新特性: Jetpack Compose Compose 动画组合 Compose 多重预览注解

9K40
  • Compose Desktop体验

    Jetpack Compose 使用更少代码、强大工具和直观 Kotlin API 简化并加快了 Android 上界面开发。... kotlin 选项中找到 JetBrains Compose ,选择 Desktop uses Kotlin。 创建完成等待 gradle 依赖下载。 但是在这里会出现问题,运行时报下面的错。...基本使用控件使用可以参考 androidx.compose[4] 文档。 针对桌面做了一些扩展,比如鼠标,键盘事件,系统原生通知,系统托盘菜单。...打包 msi build\compose\binaries\main\msi\Hello World-0.1.0.msi。 一个简单 Hello World 大小 40 mb 左右。...总结 目前来说,项目还有很多 bug,毕竟 Alpha,而且官方文档也有错误。例如打包这一块,很多问题需要自己摸索。 例如中文输入法输入情况下报错。

    4.3K40

    Android Compose开发

    好处 Compose 编译不是转化为原生 Android 上 View 去显示,而是依赖于平台Canvas ,在这点上和 Flutter 有点相似,简单地说可以理解为 Compose 是全新一套...入门 Jetpack Compose match_parent 相当于什么?...Developers 原创:写给初学者Jetpack Compose教程,基础控件和布局 原创:写给初学者Jetpack Compose教程,Modifier 原创:写给初学者Jetpack Compose...: @Composable () -> Unit) 方法只有一个 content 参数,而这个参数是一个添加了 @Composable 注解匿名函数,也就是说,在其中我们可以正常使用 compose...BottomEnd)) 注意:这里有2个 padding padding Compose 中,确实没有margin修饰符,只有padding修饰符。

    29510

    我参加了Jetpack Compose开发挑战赛

    接下来四周时间里,Google每周都将发起一个挑战项目,以帮助开发者能够更加熟练地使用Jetpack Compose来构建出色应用。...Jetpack Compose这个库虽然我之前也算是有些了解,但现在几乎约等于完全不懂。因为我在学习Jetpack Compose时候,它还属于非常非常早期版本,API极其不稳定。...不管是使用Jetpack Compose,还是使用传统写法去实现,首先你必须要拥有用于展示数据行。...至于具体代码我就不贴出来了,因为基本都是Jetpack Compose相关代码,而我本篇文章中是不准备讲解Jetpack Compose。...可以看到,一个小狗列表界面,以及每只小狗详细信息界面都有了,另外我们还可以通过点击按钮来领养小狗。 虽然代码已经写完了,但是我提交代码时意识到,Google挑战赛项目并没有那么容易。

    92120

    Compose 线上分享会内容

    Compose 与一些开发者沟通过程中发现,有很多开发者并不知道怎么接入 Compose,有的可能尝试接入了,但会报各种奇奇怪怪编译错误,如果在工程接入这块就发生问题了的话,这简直就是还没入门就劝退...也有的开发者以为需要 AGP 7.0 以上才能使用 Compose,对于目前现存老工程无法接入。但到底是哪个版本开始支持,还是有很多人不清楚。... task 只 AGP 7.0 版本支持,7.0 以下 AGP 跑 Compose项目时,享受不到 Baseline Profiles 带来优化 五、Compose 与 AGP(android-gradle-plugin...兼容性对应关系[17] 5.2 Compose AGP 不同版本表现 AGP 4.2.0 以下不支持正式版本 Compose。...不过话也说回来,Jetpack Compose 容器依然是一个 ViewGroup,没有脱离原生 View 体系,我觉得,问题应该不会太大,最多就是代码使用不当,重组作用域扩大,导致页面卡顿,但这种开发期间是可以通过调试和监控可发现

    1.2K10

    为什么除了 Flutter 之外,我们还需要另一个跨平台开发框架?

    不久前,谷歌正式推出Jetpack Compose 1.0 版本。...近日,JetBrains 在此基础上发布了 Compose Multiplatform Alpha 版本,旨在将 Compose 扩展到桌面和 Web 端。...我们希望通过本文帮助大家进一步了解 Compose 跨平台能力,以及 JetBrains 将 Compose 从 Android 扩展到这些其他平台背后主要驱动力是什么。...基于 Jetpack Compose 1.0 由谷歌打造 Jetpack Compose 是一款用于 Android 应用程序之内构建用户界面的官方框架,上周刚刚发布 1.0 版本。...尽管刚迎来 1.0,但谷歌表示“目前 Play Store 中已经有超过 2000 款应用程序使用 Compose——更重要是,就连 Play Store 这款应用本身也使用 Compose。”

    1.7K40

    谷歌社区说|聊聊Compose跨平台与KMM

    安装好插件,打开Android Studio我们可以直接创建支持KMM项目。 创建时候会让我们填写模块信息 创建好项目,生成项目目录结构是这个样子。...除此之外,对Android开发开发来说,最友好消息是从去年10月份开始Jetpack也开始支持跨平台了,不过当前Jetpack支持跨平台组件只有三个:Annotations、Collections、...与原生UI互操作性 使用Jetpack Compose开发Android时候,有些场景下我们可能需要让Jetpack Compose与XML 嵌套使用,那么跨平台中肯定也会存在这种场景,iOS...没有使用过Jetpack Compose 对于没有使用过Jetpack Compose这部分人来说,其实我是可以完全理解,一些组件支持,比如地图、WebView等可能还需要一定时间,毕竟现在使用...已经使用Kotlin,我建议可以学习下Jetpack Compose,一来这是一个趋势,二来它会扩展跨平台技能。如果你想在未来几年内仍然从事Android开发,我觉得是没有理由拒绝

    84510

    Jetpack Compose Alpha 版现已发布!

    图片 作者 / Google 产品总监 Karen Ng Jetpack Compose 是一个现代化 UI 工具包,旨在帮助开发者通过原生平台 API 简单快捷地全 Android 平台构建精美应用...Jetpack Hello World Jetpack Compose: Alpha 版现已发布 Jetpack Compose Alpha 版本 提供了用于构建成熟 Android 应用所需功能...借助 Compose 布局预览,您可以预览 Compose 组件,而无需将应用部署到设备或模拟器。开发应用时,您预览会更新,以帮助您更快地检查变更。...要创建布局预览,请编写一个不使用任何参数 Composable 函数,并添加: @Preview annotation 完成应用构建,预览功能 UI 会出现在 Android Studio  ...学习计划,了解包括 新增 Codelab 和扩展文档更多 Compose 资源。

    4.1K30

    Jetpack-Compose 学习笔记(五)—— State 状态是个啥?又是新概念?

    log 是这样: 可见每次输入之后,都会触发 Composable 函数重新绘制,每次都会重新初始化 inputStr 这个状态,而初始值都是一样,所以看起来就好像输入不起作用。...需要注意点: remember 虽然会将数据或对象存储组合项中,但当调用 remember 可组合项从组合树中移除,它会忘记该数据或对象。...自治”; 可共享: 提升状态可以与多个可组合项共享; 可拦截: 无状态可组合项调用方可以更改状态之前决定忽略或者修改事件; 解耦: 无状态可组合项状态可以存储在任何位置,如 ViewModel...改为 rememberSaveable 切换输入内容可以保存下来而不会被重置。...参考文献 官方文档——Jetpack Compose 中使用状态 https://developer.android.google.cn/codelabs/jetpack-compose-state

    2.1K30

    Jetpack Glance Alpha 版现已推出

    作者 / 开发者关系工程师 Marcel Pintó Biescas,@marxallski Android 12 改进 了一项被许多 Android 用户视为关键功能 - App Widgets,改进...现在,我们发布了 Jetpack Glance 第一个 Alpha 版,让 Widgets 构建过程变得更加轻松,该版本是建立 Jetpack Compose 运行时 (Runtime) 之上新框架...Glance 提供了新式声明性 Kotlin API,其类似于您在 Jetpack Compose 中使用 API,能够帮助您用更少代码构建更美观自适应 App Widgets。...也可以最新 稳定版 Android Studio 中使用 Glance,但首先需要按照 Jetpack Compose 文档 中步骤进行设置,因为 Glance 依赖于 Compose 运行时 (...此外,您还可以查看 AndroidX 代码库中进阶示例。 编写您自己插件,您可以扩展 Android Gradle Plugin 并根据您项目需求自定义您构建!

    83310

    为什么除了Flutter之外,我们还需要另一个跨平台开发框架?

    编译|核子可乐、燕珊 不久前,谷歌正式推出 Jetpack Compose 1.0 版本。...近日,JetBrains 在此基础上发布了 Compose Multiplatform Alpha 版本,旨在将 Compose 扩展到桌面和 Web 端。...我们希望通过本文帮助大家进一步了解 Compose 跨平台能力,以及 JetBrains 将 Compose 从 Android 扩展到这些其他平台背后主要驱动力是什么。...基于 Jetpack Compose 1.0 由谷歌打造 Jetpack Compose 是一款用于 Android 应用程序之内构建用户界面的官方框架,上周刚刚发布 1.0 版本。...尽管刚迎来 1.0,但谷歌表示“目前 Play Store 中已经有超过 2000 款应用程序使用 Compose——更重要是,就连 Play Store 这款应用本身也使用 Compose。”

    1.1K20

    Jetpack Compose开篇 之 HelloWorld

    Jetpack Compose是什么 Jetpack Compose 是用于构建原生 Android 界面的新工具包。...我们是Activity中编写Java/Kotlin代码,xml中编写布局代码,这种方式是我们已经使用了很久方式,而Jetpack Compose完全抛弃了之前方式,新创造了一种“使用代码”编写页面的方式...,你就可以去学习并且用在公司业务中,如果你不看好公司发展或者不想转行,那么只有删库跑路了~ 而Compose是Google近两年大动作之一,如果你想坚持Android开发道路上,那么学习或了解Compose...Jetpack Compose HelloWorld 新建项目 使用Compose我们需要下载Android studio4.2最新预览版本,我们可以直接新建一个Compose项目,也可以已有项目中添加配置...项目配置 新建成功,我们首先来看一下build.gradle中几个比较特殊配置,这也是我们已经项目中添加Compose所需要配置 defaultConfig { minSdkVersion

    1.9K20

    Jetpack Compose下拉刷新

    前言 Jetpack Compose光下拉刷新,官方就提供了三种不同方式,使用依赖也不相同,特别的混乱。 所以在网络上看到示例可能找不到依赖就是这个原因。...其中 swiperefresh 被废弃了 PullToRefreshContainer 需要更改依赖 PullRefresh 目前还没发布 也就是说只有前两种可以使用,如果不嫌弃代码中有废弃红线标记,...material3是标准库,能保证各个平台上迁移代码,而material3-android是仅支持安卓库,一些Android上新添加组件会先在material3-android上发布,稳定可能再在...Material 1.3.0 支持 但是1.3.0 还没正式发布。...https://developer.android.google.cn/jetpack/androidx/releases/compose-material3?

    52010

    【建议收藏】Jetpack Compose编程知识全汇总 (含详细实例讲解)

    以下三种方式可初步体验: 尝试使用Jetpack Compose 示例应用 创建支持Jetpack Compose 新应用 现有项目中支持Jetpack Compose 基于现状,我主要介绍第三种方式...#### @Compose 所有关于构建View方法都必须添加@Compose注解可以。...`widthDp: Int`: Compose中渲染最大宽度,单位为dp。 8. `heightDp: Int`: Compose中渲染最大高度,单位为dp。...- 状态提升是一种编程模式,在这种模式下,通过将可组合项中内部状态替换为参数和事件,将状态移至可组合项调用方。 - 状态提升过程可让您将单向数据流扩展到无状态可组合项。...Jetpack Compose应用1 开始前准备 创建DEMO 遇到问题 [1240] 2. Jetpack Compose应用2 3.

    6.3K60

    写给初学者Jetpack Compose教程,用derivedStateOf提升性能

    虽然我进度很慢,但这个系列教程还没有停更。 书接上篇Compose文章,写给初学者Jetpack Compose教程,Lazy Layout。...我 写给初学者Jetpack Compose教程,使用State让界面动起来 这篇文章中有详细介绍State用法。 那么上述代码中,clickCount就是一个State变量。...不同是,derivedStateOf接收一个表达式,只有当这个表达式中条件发生变化了,那么算是State值发生了变化,这时才会触发重组。...最后MainLayout()函数中将以上两个函数都包含进去,并加了一个布尔变量,只有firstVisibleItemIndex为0,也就是列表中第一个子项元素可见时候,Fab按钮显示。...,只有当这个表达式中条件发生变化了,算是State值发生了变化,这时才会触发重组。

    17000

    深度解析 Jetpack Compose 布局

    Jetpack Compose 是用于构建原生 Android 界面的新工具包。...接下来,我们来看看 Compose 布局模型 是如何实现这些目标的。 Jetpack Compose 可将状态转换为界面,这个过程分为三步: 组合、布局、绘制。...从前文中我们知道,尺寸信息直到布局阶段可用,也就是说,这些信息一般无法组合阶段用来决定要显示内容。...您需要掌握一个原则: 只要可组合项或修饰符参数可能频繁发生更改,都应当保持谨慎,因为这种情况可能导致过度组合。只有更改显示内容时,需要重组,更改显示位置或显示方式则不需要这么做。...如需了解更多,请查阅以下列出资源: Jetpack Compose 使用入门文档 Jetpack Compose 学习路线图 Jetpack Compose 相关示例

    2.1K30
    领券