如何使 TopAppBar 背景與 Activity UI 的 rest 相同

Question

我正在嘗試使用 Jetpack Compose 制作一個導航欄，但其外觀和顏色與我的活動相同。

下面是我想要的用戶界面

我嘗試使用TopAppBar但無法獲得相同的外觀和字段，如下所示

下面是代碼

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        
            Surface(
                modifier = Modifier
                    .fillMaxSize()
            ) {
                MainView(logOut = signOut)
            }
        
    }
}

@Composable
fun NavigationBar(onIconClicked : () -> Unit,text: String){
TopAppBar(
    title = {
        Text(
            text = text,
            color = Color.Black,
            fontSize = 48.sp
        )
    },
    navigationIcon = {
        Icon(
            imageVector = Icons.Default.Close,
            contentDescription = "Close",

            modifier = Modifier.clickable(onClick = onIconClicked),
            tint = Color.Black
        )
    },
//        backgroundColor  = /*...*/
)
}

@Composable
fun MainView(logOut: (doLogout: Boolean) -> Unit) {

Column(
    Modifier
        .background(colorResource(id = R.color.theme_light_blue))
        .padding(40.dp, 0.dp)
        .fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(45.dp)
) {
    NavigationBar(onIconClicked = { /*TODO*/ }, text = "settings")
    Box(
        Modifier
            .fillMaxWidth()
    ) {
        Text(
            modifier = Modifier.align(Alignment.CenterStart),
            text = "current user",
            style = TextStyle(
                colorResource(id = R.color.black),
                fontSize = 32.sp
            )
        )
        ClickableText(
            modifier = Modifier.align(Alignment.CenterEnd),
            style = TextStyle(
                colorResource(id = R.color.black),
                fontSize = 32.sp,
                textAlign = TextAlign.End,
                fontWeight = FontWeight.Bold
            ),
            text = AnnotatedString("SIGN OUT"),
            onClick = { logOut(true) }

        )
    }
    var text by rememberSaveable { mutableStateOf("Text") }

    Column(
        Modifier
            .fillMaxWidth()
            .background(colorResource(id = R.color.theme_dark_blue))
    ) {

        TextField(

            value = text,
            onValueChange = {
                text = it
            },
            textStyle = TextStyle(
                fontSize = 20.sp,
                ),
            modifier = Modifier.fillMaxWidth(),
            maxLines = 1,
            singleLine = true,
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Black,
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            ),
        )
    }
   }

我知道我可以簡單地在包含圖標和文本字段的 MainView 上方添加一行，但這是實現它的正確方法，或者我們可以用TopAppBar 做點什么

Answer 1

以下更改將使您獲得所需的結果。

在TopAppBar添加以下屬性

backgroundColor = colorResource(id = R.color.theme_light_blue),
elevation = 0.dp,
modifier = Modifier.fillMaxWidth(),

Answer 2

正如@Abhimanyu 所回答的那樣，添加 backgroundColor 是有效的，但它顯示出與 UI 不匹配的較暗陰影。 下面是一個有效的小調整。

在頂部應用欄

backgroundColor = colorResource(id = R.color.theme_light_blue).copy(alpha = 0f),
elevation = 0.dp,
modifier = Modifier.fillMaxWidth()