如何在撰寫中創建 TopAppBar？

Question

我目前正在嘗試為 TopAppBar 創建一個單獨的組合。 我要這樣做： https ://gyazo.com/029064b4fb4169c5171a85934fcdcc7a。 我希望能夠從抽屜中自定義它。 我怎樣才能做到這一點？

我嘗試創建一些以下教程並在線重新搜索，但沒有任何運氣。 我無法弄清楚為什么它不起作用！

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }

        })
}

我的依賴：

dependencies {

    // Kotlin extensions for androidx.test.core
    implementation 'androidx.core:core-ktx:kotlin_version'
   

    // Modal Drawer Layout
    implementation "androidx.drawerlayout:drawerlayout:1.1.1"

    // Compose, Compose UI, Compose Activity & Lifecycles
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
    implementation 'androidx.activity:activity-compose:compose_version'
    implementation "androidx.compose.ui:ui:compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:compose_version"

    // Navigation with Compose
    implementation "androidx.navigation:navigation-compose:2.5.0-rc02"

    // Using Visibility with an eye for Passwords
    implementation "androidx.compose.material:material-icons-extended:1.3.0-alpha01"

    // Material 3 Android UI
    implementation 'androidx.compose.material3:material3:1.0.0-alpha14'

    testImplementation 'junit:junit:4.13.2'

    androidTestImplementation "androidx.test:core-ktx:1.4.0"
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.3.0-alpha01"
    debugImplementation "androidx.compose.ui:ui-tooling:1.3.0-alpha01"
    debugImplementation "androidx.compose.ui:ui-test-manifest:1.3.0-alpha01"
}

Answer 1

您需要選擇是使用 Material 2 還是 Material 3，然后相應地更新您的依賴項。

材料 2 版本

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }

        })
}

材料 3 版本

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            SmallTopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primary,
                    titleContentColor = Color.White,
                ),
            )
        }, content = {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }
        })
}