如何在Jetpack Compose的onebone折叠工具栏库中实现自定义动作菜单项

解决方法 #

你遇到的对齐问题是因为CollapsingToolbarScaffold的toolbar块内的子元素默认没有对齐约束，需要通过外层布局容器指定右上角对齐，同时配合库提供的pin()修饰符保证菜单固定在顶部不随滚动位移。

具体修改步骤：

1. 在toolbar代码块最外层套一个占满整个工具栏区域的Box，作为所有子元素的布局容器
2. 在这个Box内添加一个Row容器，通过align(Alignment.TopEnd)指定它对齐到右上角，同时添加pin()修饰符固定位置
3. 把3个菜单图标放到这个Row中即可

修改后的核心代码示例：

@Composable
internal fun MainScreen() {
    val state = rememberCollapsingToolbarScaffoldState()

    CollapsingToolbarScaffold(
        modifier = Modifier.fillMaxSize(),
        state = state,
        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
        toolbar = {
            val textSize = (18 + (30 - 18) * state.toolbarState.progress).sp

            // 新增外层Box作为布局容器
            Box(modifier = Modifier.fillMaxSize()) {
                // 原有背景
                Box(
                    modifier = Modifier
                        .background(MaterialTheme.colors.primary)
                        .fillMaxWidth()
                        .height(150.dp)
                        .pin()
                )

                // 原有标题
                Text(
                    text = "Guided Selling",
                    modifier = Modifier
                        .road(Alignment.CenterStart, Alignment.BottomStart)
                        .padding(60.dp, 16.dp, 16.dp, 16.dp),
                    color = Color.White,
                    fontSize = textSize
                )

                // 原有左上角返回图标
                Image(
                    modifier = Modifier
                        .pin()
                        .padding(16.dp),
                    painter = painterResource(id = R.drawable.abc_vector_test),
                    contentDescription = null
                )

                // 新增右上角菜单区域
                Row(
                    modifier = Modifier
                        .align(Alignment.TopEnd) // 对齐到右上角
                        .pin() // 固定位置不随滚动移动
                        .padding(horizontal = 8.dp)
                        .statusBarsPadding(), // 适配状态栏高度避免被遮挡
                    horizontalArrangement = Arrangement.spacedBy(4.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    // 菜单1
                    IconButton(onClick = { /* 处理点击逻辑 */ }) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_menu1),
                            contentDescription = null,
                            tint = Color.White
                        )
                    }
                    // 菜单2
                    IconButton(onClick = { /* 处理点击逻辑 */ }) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_menu2),
                            contentDescription = null,
                            tint = Color.White
                        )
                    }
                    // 菜单3
                    IconButton(onClick = { /* 处理点击逻辑 */ }) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_menu3),
                            contentDescription = null,
                            tint = Color.White
                        )
                    }
                }
            }
        }
    ) {
        // 原有列表内容保持不变
        LazyColumn(
            modifier = Modifier.fillMaxWidth()
        ) {
            items(100) {
                Text(
                    text = "Item $it",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }

    // 其余代码保持不变
}

注意事项：

• 如果你的页面是沉浸式状态栏，给菜单的Row加statusBarsPadding()可以避免图标被状态栏遮挡
• 调整Row的padding和spacedBy参数可以自定义菜单的边距和图标间距

内容的提问来源于stack exchange，提问作者Bubbly