使用 Jetpack 自定义实施操作项

Question

我一直在使用onebone Library 来实现折叠工具栏。我想知道如何在库代码中实现如下操作菜单：

我想添加 3 个菜单图标，为此我尝试在 CollapsingToolbarScaffold 中添加代码，但它在最右上角没有正确显示。

我可以找到代码，即：

@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(
                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
            )

        }
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            items(100) {
                Text(
                    text = "Item $it",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }

//      Box(
//          modifier = Modifier
//              .fillMaxWidth()
//              .alpha(0.5f)
//              .background(MaterialTheme.colors.secondary)
//              .height(40.dp)
//      )
    }

    CollapsingToolbarScaffold(
        modifier = Modifier.fillMaxSize(),
        state = rememberCollapsingToolbarScaffoldState(),
        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
        toolbar = {
            // toolbar contents...

                


        }
    ) {
        // body contents...
    }
}

Answer 1

我可以找到这个自定义视图的解决方案；以下是我的操作项代码。

CollapsingToolbarScaffold(
        modifier = Modifier.fillMaxSize(),
        state = rememberCollapsingToolbarScaffoldState(),
        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
        toolbar = {
            // toolbar contents...

            Row(
                modifier = Modifier
                    .padding(all = 8.dp)
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.End

            )
            {

                Image(painter = painterResource(id = R.drawable.ic_menu_search), contentDescription =null )
                Spacer(modifier = Modifier.width(16.dp))
                Image(painter = painterResource(id = R.drawable.ic_create), contentDescription =null )
                Spacer(modifier = Modifier.width(16.dp))
                Image(painter = painterResource(id = R.drawable.ic_avatar),
                    modifier = Modifier
                        .size(32.dp)
                        .clip(CircleShape),
                    contentDescription =null
                )

            }


        }
    )