kotlin 在BottomSheetScaffold中使用时,Jetpack合成浮动操作按钮部分隐藏

amrnrhlw  于 2022-12-13  发布在  Kotlin
关注(0)|答案(3)|浏览(151)

在底部工作表折叠模式下,FAB的一半被隐藏。下面是代码。如果我只使用Scaffold,这个问题就不会出现。

class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScaffTestTheme {
                val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
                    bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
                )
                val scope = rememberCoroutineScope()

                BottomSheetScaffold(
                    scaffoldState = bottomSheetScaffoldState,
                    sheetContent = {
                        Text("Hello", modifier = Modifier.padding(20.dp))
                    },
                    sheetPeekHeight = 0.dp,
                    floatingActionButton = {
                        FloatingActionButton(onClick = {}) {
                            Icon(Icons.Filled.Add, contentDescription = "Add")
                        }
                    }
                ) {
                    TextButton(onClick = {
                        scope.launch {
                            if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                                bottomSheetScaffoldState.bottomSheetState.expand()
                            } else {
                                bottomSheetScaffoldState.bottomSheetState.collapse()
                            }
                        }
                    }) {
                        Text("Toggle")
                    }
                }
            }
        }
    }
}

我是这样看的:

7gcisfzg

7gcisfzg1#

@srvy我也遇到过和你一样的问题,经过一些研究和查看BottomSheetScaffold的组件,我已经设法找到了解决方案。
在BottomSheetScaffold中添加以下参数:

  • 图纸高程= 0.dp
  • 图纸透视高度= 40.dp(默认值为56.dp)
  • 工作表背景颜色=颜色.透明

您可以编辑sheetPeekHeight来改变FloatingActionButton的距离,其他两个则不行。在您的程式码中,它看起来会像这样:

BottomSheetScaffold(
    sheetElevation = 0.dp,
    sheetPeekHeight = 40.dp,
    sheetBackgroundColor = Color.Transparent,
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = {
       Text("Hello", modifier = Modifier.padding(20.dp))
    },
    sheetPeekHeight = 0.dp,
    floatingActionButton = {
       FloatingActionButton(onClick = {}) {
          Icon(Icons.Filled.Add, contentDescription = "Add")
       }
    }
)
h5qlskok

h5qlskok2#

看起来BottomSheetScaffold的设计总是让工作表的一部分可见,而FAB部分覆盖它。这不是我想要的行为,也不是你想要的。可以使用BottomDrawerModal,但我不希望它是模态的。
我使用了一个自定义的布局来奠定晶圆厂一半的高度以上的脚手架奠定了它。

val floatingActionButton = FloatingActionButton(onClick = {}) {
    Icon(Icons.Filled.Add, contentDescription = "Add")
}

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = {
        Text("Hello", modifier = Modifier.padding(20.dp))
    },
    sheetPeekHeight = 0.dp,
    floatingActionButton = {
        Layout(content = floatingActionButton) { measurables, constraints ->
            val placeable = measurables.first().measure(constraints)

            layout(placeable.width, placeable.height) {
                placeable.placeRelative(0, -placeable.height / 2)
            }
        }
    }

) {
    TextButton(onClick = {
        scope.launch {
            if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                bottomSheetScaffoldState.bottomSheetState.expand()
            } else {
                bottomSheetScaffoldState.bottomSheetState.collapse()
            }
        }
    }) {
        Text("Toggle")
    }
}
7y4bm7vi

7y4bm7vi3#

除了提供的答案外,您还可以考虑此答案。
这有点乏味,因为使用这种方法,您必须

  • sheetPeekHeight设置为scaffold,并将其设置为工作表内容的top填充
  • sheetBackgroundColor设置为与content{…}背景颜色相同的颜色
  • 设置sheetElevation0.dp以在修改背景颜色时隐藏底部工作表的边缘边框
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SampleBottomSheet() {

    val contentBackground = Color.White
    val sheetPeekHeight = 40.dp
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )

    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetBackgroundColor = contentBackground,
        sheetElevation = 0.dp,
        sheetPeekHeight = sheetPeekHeight,
        sheetContent = {
            Column(
                modifier = Modifier
                    .padding(top = sheetPeekHeight)
                    .wrapContentHeight()
                    .fillMaxWidth()
                    .background(Color.DarkGray)
            ) {

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(30.dp)
                        .background(Color.DarkGray)
                )

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(80.dp)
                        .background(Color(0xFF4fc992))
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                backgroundColor = Color(0xFF4a6ebd),
                shape = CircleShape,
                onClick = {},
            ) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
            }
        }
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(contentBackground)
        ) {
            Button(
                onClick = {
                    coroutineScope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                }
            ) {
                Text("Open/Close bottom sheet")
            }
        }
    }
}

调用站点用法:

class BottomSheetScaffoldExampleActivity: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SampleBottomSheet()
        }
    }
}

所有这些代码都可以复制粘贴。

相关问题