Применение реактивного ранца с эффектом дымки Compose [закрыто] ⇐ Android

[Anonymous]

Я пытался применить эту библиотеку эффектов дымки (implementation("dev.chrisbanes.haze:haze:1.7.1")) к своему проекту и не смог сделать это правильно, я не знаю, где я ошибаюсь. Я пытался следовать документации, но это не очень помогло, я сделал все правильно, на мой взгляд, и это не сработало, проверьте код.
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import dev.chrisbanes.haze.HazeDefaults.tint

// Haze Imports
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
import dev.chrisbanes.haze.materials.HazeMaterials
import dev.chrisbanes.haze.rememberHazeState

import me.localx.icons.rounded.Icons
import me.localx.icons.rounded.outline.ArrowLeft
import me.localx.icons.rounded.outline.PersonCv
import me.localx.icons.rounded.outline.Play
import me.localx.icons.rounded.outline.Search
import me.localx.icons.rounded.filled.Headphones

@OptIn(ExperimentalHazeMaterialsApi::class)
@Composable
fun HomeScreen() {
val hazeState = rememberHazeState()

var selectedTab by remember { mutableStateOf("Home") }

Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Black)
.hazeSource(state = hazeState)
.hazeEffect(hazeState)
) {
// ===================== MAIN SCROLLING CONTENT =====================
// 56.dp (header content) + 40.dp (padding/spacing) + status bar
val topOffsetHeight = 56.dp + 40.dp + WindowInsets.statusBars.asPaddingValues().calculateTopPadding()

Column(
modifier = Modifier
.fillMaxSize()
.padding(bottom = 0.dp), // Remove bottom padding if not needed
horizontalAlignment = Alignment.CenterHorizontally,
) {
// Show content based on selected tab/fragment
when (selectedTab) {
"Home" -> HomeFragmentContent(topPadding = topOffsetHeight)
"Anime" -> AnimeFragmentContent(topPadding = topOffsetHeight)
"Movies" -> MoviesFragmentContent(topPadding = topOffsetHeight)
"Category" -> CategoryFragmentContent(topPadding = topOffsetHeight)
}
}

// ===================== TOP HAZE HEADER ==========================
Column(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.TopCenter)
// A slight semi-transparent background for the header itself
.background(Color.Black.copy(alpha = 0.35f))
// Apply the blur effect
.hazeEffect(state = hazeState)
.windowInsetsPadding(WindowInsets.statusBars)
.padding(horizontal = 20.dp, vertical = 8.dp)
) {
// ---- First Row: Title + Icons (Navigation Bar) ----
Row(
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Row(verticalAlignment = Alignment.CenterVertically) {
// Back Arrow: Visible if not in "Home"
if (selectedTab != "Home") {
Icon(
imageVector = Icons.Outline.ArrowLeft,
contentDescription = "Back to Home",
tint = Color.White,
modifier = Modifier
.size(32.dp)
.clickable { selectedTab = "Home" }
.padding(end = 8.dp)
)
}

// Dynamic Title: Show the active fragment name
Text(
text = selectedTab,
style = MaterialTheme.typography.titleLarge,
color = Color.White,
fontWeight = FontWeight.Bold
)
}

// Action Icons (Search and Profile)
Row(horizontalArrangement = Arrangement.spacedBy(24.dp)) {
Icon(
imageVector = Icons.Outline.Search,
contentDescription = "Search",
tint = Color.White,
modifier = Modifier
.size(24.dp)
.clickable {}
)
Icon(
imageVector = Icons.Outline.PersonCv,
contentDescription = "Profile",
tint = Color.White,
modifier = Modifier
.size(24.dp)
.clickable {}
)
}
}
Spacer(modifier = Modifier.height(8.dp))

// ---- Second Row: Pills (Tabs) ----
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalAlignment = Alignment.CenterVertically
) {
PillButton(
label = "Anime",
selected = selectedTab == "Anime",
) { selectedTab = "Anime" }

PillButton(
label = "Movies",
selected = selectedTab == "Movies",
) { selectedTab = "Movies" }

PillButton(
label = "Category ▼",
selected = selectedTab == "Category",
) { selectedTab = "Category" }
}
}
}
}

// --- Utility Composable Functions ---

@Composable
fun PillButton(label: String, selected: Boolean, onClick: () -> Unit) {
Box(
modifier = Modifier
.clickable { onClick() }
.background(
color = if (selected) Color.White else Color.Transparent,
shape = RoundedCornerShape(50)
)
.border(
width = 1.dp,
color = if (selected) Color.White else Color.White.copy(0.5f),
shape = RoundedCornerShape(50)
)
.padding(horizontal = 14.dp, vertical = 6.dp),
contentAlignment = Alignment.Center
) {
Text(
text = label,
color = if (selected) Color.Black else Color.White,
fontWeight = FontWeight.SemiBold,
style = MaterialTheme.typography.bodyMedium
)
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ck-compose