FlexibleBottomSheet 使用指南

FlexibleBottomSheet 使用指南

FlexibleBottomSheet 🐬 Advanced Jetpack Compose bottom sheet for segmented sizing and non-modal type, similar to Google Maps. 项目地址: https://gitcode.com/gh_mirrors/fl/FlexibleBottomSheet

项目介绍

FlexibleBottomSheet 是一个高级的 Jetpack Compose 跨平台底部抽屉组件，它支持分段大小调整、非模态类型，并允许在类似 Google Maps 的方式下在抽屉后面进行交互。此库提供了高度可定制性，包括指定抽屉大小、监控抽屉状态及更多自定义选项。

项目快速启动

添加依赖

首先，在你的 Android 项目的 build.gradle 文件中的 dependencies 部分添加以下依赖：

dependencies {
    implementation("com.github.skydoves:flexible-bottomsheet-material:<最新版本>")
}

对于 Kotlin 多平台项目，在相应的 build.gradle.kts 文件中加入：

sourceSets {
    val commonMain by getting
    dependencies {
        implementation("com.github.skydoves.flexible-bottomsheet-material:<最新版本>")
    }
}

请替换 <最新版本> 为你实际查询到的 FlexibleBottomSheet 最新稳定版。

基本使用

在你的 Compose 构建函数中，可以像下面这样快速实现一个基本的 FlexibleBottomSheet：

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.skydoves.flexiblebottomsheet.FlexibleBottomSheet
import com.skydoves.flexiblebottomsheet.rememberFlexibleBottomSheetState

@Composable
fun BasicFlexibleBottomSheet(onDismissRequest: () -> Unit) {
    FlexibleBottomSheet(
        onDismissRequest = onDismissRequest,
        sheetState = rememberFlexibleBottomSheetState(isModal = true),
        containerColor = Color.Black
    ) {
        Text(
            modifier = Modifier.fillMaxWidth().padding(8.dp),
            text = "这是灵活的底部抽屉",
            textAlign = TextAlign.Center,
            color = Color.White
        )
    }
}

应用案例和最佳实践

为了展示 FlexibileBottomSheet 的灵活性，你可以根据抽屉的状态动态改变内容或UI行为。例如，调整文本大小以适应不同的展开状态：

var currentSheetState by remember { mutableStateOf(FlexibleSheetValue.IntermediatelyExpanded) }
...
 FlexibleBottomSheet(
        ...
        onTargetChanges = { sheetState ->
            currentSheetState = sheetState
        },
        ...
    ) {
        Text(
            ...,
            fontSize = when (currentSheetState) {
                FlexibleSheetValue.FullyExpanded -> 28.sp
                FlexibleSheetValue.IntermediatelyExpanded -> 20.sp
                else -> 12.sp
            }
        )
    }

典型生态项目集成

虽然 FlexibleBottomSheet 自身是一个独立的库，但其在整合到现代Android应用程序时，尤其是那些利用Jetpack Compose构建界面的应用中，可以轻松地与Compose生态系统中的其他组件（如LazyColumn、LazyRow等）结合，提供无缝的滚动体验和嵌套滚动支持。例如，当你的底部抽屉包含长列表时，可以直接将其内部的内容设定为可滚动的，确保用户能够在一个流畅的界面中交互。

FlexibleBottomSheet的这种设计让它非常适配于那些需要多层级交互和动态内容展示的场景，比如地图应用中的地点详情查看、音乐播放器的歌曲列表扩展等，提升了用户体验的同时保持了代码的简洁性和维护性。

---

以上就是关于 FlexibleBottomSheet 的简要指南，通过这些步骤，开发者能够迅速将这个功能丰富的底部抽屉集成到他们的应用中，享受高度定制化的交互体验。记得根据实际情况调整依赖版本和具体实现细节，确保与项目的其余部分兼容无误。

FlexibleBottomSheet 🐬 Advanced Jetpack Compose bottom sheet for segmented sizing and non-modal type, similar to Google Maps. 项目地址: https://gitcode.com/gh_mirrors/fl/FlexibleBottomSheet