如何动态替换 TopAppBar 的内容？

Question

假设我有一个类似

的 TopAppBar (1)

代码类似于：

TopAppBar(
    backGroundColor = Colors.black
) {
    Row(modifier = Modifier) {
        Icon(  // 2
            modifier = Modifier.size(24.dp),
            id = R.drawable.ic_hamburger_menu,
            onClick = {
                openMenu()
            }
        )
        
        Text( // 3
            modifier = Modifier,
            text = "Page Title"
        )

        Icon( // 4.1
            modifier = Modifier.size(24.dp),
            id = R.drawable.ic_share,
            onClick = {
                //..
            }
        )
        
        Icon( // 4.2
            modifier = Modifier.size(24.dp),
            id = R.drawable.ic_magnifing_glass,
            onClick = {
                openTopAppBarWithSearchContent()
            }
        )
        
        Icon( // 5
            modifier = Modifier.size(24.dp),
            id = R.drawable.ic_ellipsis,
            onClick = {
                //..
            }
        )
    }
}

点击放大镜玻璃 (4.2) 时，我想将顶部应用栏的完整 (1) 内容（Manu 图标、文本、共享图标、玻璃图标、点图标）替换为单独的可组合项;假设一个 search/input 字段..

换句话说：openTopAppBarWithSearchContent() 应该替换其父 TopAppBars 内容。

如何用 Jetpack Compose 的方式实现？

Answer 1

您可以使用 mutableState 根据状态值更改布局。当您更改状态值时，它将触发重组，并根据当前值重组将选择所需的布局。

@Composable
fun MyTopAppBar(
    backGroundColor: Color = MaterialTheme.colors.primary
) {

    var showFirstMenu by remember { mutableStateOf(true) }

    if (showFirstMenu) {

        Row(
            modifier = Modifier
                .background(MaterialTheme.colors.primary)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {

            // 2
            IconButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = null, tint = Color.White)
            }

            Text( // 3
                modifier = Modifier,
                text = "Page Title",
                color = Color.White
            )
            Spacer(modifier = Modifier.weight(1f))
            // 4.1
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.Share,
                    contentDescription = null,
                    tint = Color.White
                )
            }

            // 4.2
            IconButton(onClick = { showFirstMenu = !showFirstMenu }) {
                Icon(
                    imageVector = Icons.Filled.Search,
                    contentDescription = null,
                    tint = Color.White
                )
            }

            // 5
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.MoreVert,
                    contentDescription = null,
                    tint = Color.White
                )
            }
        }
    } else {
        TopAppBar(
            title = { Text("Another Page") },
            navigationIcon = {
                IconButton(onClick = {}) {
                    Icon(Icons.Default.Menu, "Menu")
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Favorite, contentDescription = null)
                }

                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Refresh, contentDescription = null)
                }

                IconButton(
                    onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Call, contentDescription = null)
                }
            }
        )
    }
}

您可以 TopAppbar 而不是 Row 来创建一个。

如何动态替换 TopAppBar 的内容？

How to replace the content of a TopAppBar dynamically?

android

kotlin

android-jetpack

android-jetpack-compose