Прозрачный TopAppBar и видимый контент за ним в Jetpack Compose

Question

Изучаю Jetpack Compose и столкнулся с проблемой. Хочу сделать полупрозрачный TopBar, как на фото. Смоделировал в Figma.

Я попытался добавить прозрачность непосредственно в свойство backgroundColor через .copy(alpha). Пытался использовать Unspecified для цвета, но это тоже не работает/ Попробовал найти подобную информацию, но всё не то, что мне нужно.

Ниже функция Scaffold

@Composable
fun ScaffoldCompose() {
val navController = rememberNavController()

val configuration = LocalConfiguration.current

val parentHeight =
Scaffold(
    bottomBar = {
        BottomBar(
            navController = navController,
            items = listOf(
                BottomBarScreen.Home,
                BottomBarScreen.Key,
                BottomBarScreen.Chat
            )
        )
    },
    topBar = {
        TopBar()
    }
) { innerPadding ->
    Box(
        modifier = Modifier
        .padding(innerPadding)
    ) {
        BottomNavGraph(navController = navController)
    }
}
}

Функция TopBar и сам он внутри.

@Composable
fun TopBar() {
TopAppBar(
    title = {
        Box(
            modifier = Modifier
                .fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Room 611",
                fontSize = 20.sp,
                maxLines = 1
            )
        }
    },
    backgroundColor = Color.Transparent.copy(alpha = 0.1f),
    navigationIcon = {
        IconButton(onClick = {

        }) {
            Icon(
                Icons.Default.Menu, "Menu",
                modifier = Modifier.size(34.dp)
            )
        }
    },
    actions = {
        IconButton(onClick = { // synchronize weather

        }) {
            Row() {
                Icon(
                    modifier = Modifier
                        .size(29.dp),
                    painter = painterResource(id = R.drawable.weather_icon),
                    contentDescription = "Navigation Icon",
                    tint = Color.White,
                )
                Spacer(Modifier.width(4.dp))
                Text(
                    text = "13°C",
                    fontSize = 22.sp,
                    color = Color.White
                )
            }

        }
    },
    contentColor = Color.White,
)
}

Буду очень благодарен, если кто-нибудь подскажет как это сделать

Answer 1

У вас используется Scaffold, он устроен так, что располагает content ниже, чем topBar. Поэтому, когда вы делаете прозрачность у topBar, под ним не будет проглядываться фон контента:

Scaffold(
    topBar = { TopBar() },
    ...
) {
    MyContent(it)
}

Чтобы избежать этой проблемы, рисуйте TopBar поверх вашего контента, это можно сделать с помощью обычного Box:

Scaffold(
    ...
) {
    Box {
        MyContent(it)
        TopBar(it)
    }
}

Answer 2

У Scaffold есть параметр backgroundColor, необходимо выставить его в значение Transparent, чтобы увидеть задний фон:

Box {
    Image(
        painterResource(id = R.drawable.my_background),
        contentScale = ContentScale.Crop,
    )
    Scaffold(
        backgroundColor = Color.Transparent,
        topBar = { TopBar() },
    ) { paddingValues ->
        MyContent(paddingValues)
    }
}

БЛОГ НА HUSL

Прозрачный TopAppBar и видимый контент за ним в Jetpack Compose

Ответы (2 шт):