Я ищу способ сделать мой липкий заголовок прозрачным фоном, потому что мой фон имеет градиент, и мне нужно, чтобы заголовок имел прозрачный фон.
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Example() {
Box(
Modifier.fillMaxSize()
.drawBackgroundGradient()
.clipToBounds()
) {
LazyColumn {
stickyHeader {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.Transparent)
.padding(top = 16.dp, bottom = 16.dp)
) {
Card(
modifier = Modifier.fillMaxWidth(),
border = BorderStroke(1.dp, Color.Gray),
shape = RoundedCornerShape(20.dp),
colors = CardDefaults.cardColors(containerColor = TransparentBackground)
) {
Row(
modifier = Modifier.padding(12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
modifier = Modifier.padding(end = 16.dp),
painter = rememberVectorPainter(Icons.Filled.Warning),
contentDescription = "Disclaimer icon",
tint = Color.Yellow
)
Text(
text = "Test copy text of banner",
style = TS_Helvetica_400.copy(
lineHeight = 15.sp
),
fontSize = 14.sp,
color = Color.White
)
}
}
}
}
items(fakeList) { item ->
Text(modifier = Modifier.fillMaxWidth(), text = item, color = Color.White)
}
}
}
}
val baseList = listOf("name 1", "name 2", "name 3")
// Create a list of 100 elements by repeating baseList
val fakeList = List(100 / baseList.size) { baseList }.flatten() + baseList.take(100 % baseList.size)
fun Modifier.drawBackgroundGradient(): Modifier {
return this.drawBehind {
val gradientColors =
listOf(Color(0xFF6A66FF).copy(alpha = 0.2f), Color.Transparent)
// Draw the background color
drawRect(color = Color.Black)
// Draw the first radial gradient circle
drawCircle(
brush = Brush.radialGradient(
colors = gradientColors,
center = Offset(size.width * 0.1f, size.height * 0.5f),
radius = 800.dp.toPx()
),
radius = 800.dp.toPx(),
center = Offset(size.width * 0.1f, size.height * 0.5f)
)
// Draw the second radial gradient circle
drawCircle(
brush = Brush.radialGradient(
colors = gradientColors,
center = Offset(size.width * 0.9f, size.height * 0.9f),
radius = 500.dp.toPx()
),
radius = 500.dp.toPx(),
center = Offset(size.width * 0.9f, size.height * 0.9f)
)
}
}
Я пробовал некоторые обходные пути, но они не включают компонент StickyHeader. Я знаю, что это экспериментальный вариант, но есть ли способ, чтобы элементы не отображались позади при перетаскивании, а вместо этого обрезались на каком-то коробочном содержимом?
Пример предоставлен @Leviathan
Что такое TransparentBackground
? В частности, каково его альфа-значение?
Color.Transparent.copy(alpha = 0.7f) Вы также можете использовать Color.Transparent, то же самое
Насколько мне известно, LazyColumn
всегда будет прокручивать элементы за stickyHeader
. Вы можете добиться желаемого пользовательского интерфейса, отделив заголовок и обернув его Column
вместе с LazyColumn
.
Вот обновленный код:
@Composable
fun Example() {
Column(
Modifier
.fillMaxSize()
.drawBackgroundGradient()
.clipToBounds()
) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.Transparent)
.padding(top = 16.dp, bottom = 16.dp)
) {
Card(
modifier = Modifier.fillMaxWidth(),
border = BorderStroke(1.dp, Color.Gray),
shape = RoundedCornerShape(20.dp),
colors = CardDefaults.cardColors(containerColor = Color.Transparent)
) {
Row(
modifier = Modifier.padding(12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
modifier = Modifier.padding(end = 16.dp),
painter = rememberVectorPainter(Icons.Filled.Warning),
contentDescription = "Disclaimer icon",
tint = Color.Yellow
)
Text(
text = "Test copy text of banner",
fontSize = 14.sp,
color = Color.White
)
}
}
}
LazyColumn(modifier = Modifier.weight(1f)) {
items(fakeList) { item ->
Text(modifier = Modifier.fillMaxWidth(), text = item, color = Color.White)
}
}
}
}
Большое спасибо за ваш ответ ! Сначала я использовал тот же самый подход в качестве обходного пути, но я пытался посмотреть, есть ли способ заставить StickyHeader работать.
Рад, что смог помочь!
Пожалуйста, предоставьте минимально воспроизводимый пример, который мы можем выполнить самостоятельно.