Фокусируемые элементы LazyRow в компоновке Jetpack ⇐ Android

[Anonymous]

Я собираюсь написать приложение для Android TV с помощью Jetpack Compose. У меня есть LazyRow, содержащий несколько элементов. Я хочу, чтобы цвет фона и граница элемента менялись при наведении на него курсора. Однако при быстром перемещении между элементами возникает следующая ошибка:

Код: Выделить всё

LayoutCoordinate operations are only valid when isAttached is true

Код:
`
import androidx.compose.foundation.Image
импортировать androidx.compose.foundation.background
импортировать androidx.compose.foundation.border
импортировать androidx.compose.foundation.clickable
импорт androidx.compose.foundation.focusable
импорт androidx.compose.foundation.layout.Arrangement
импорт androidx.compose.foundation.layout.Box
импортировать androidx.compose.foundation.layout.Column
импортировать androidx.compose.foundation.layout. Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
импортировать androidx.compose.foundation.layout.height
импортировать androidx.compose.foundation.layout.padding
импортировать androidx.compose .foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyColumn
импортировать androidx.compose.foundation.lazy.LazyRow
импортировать androidx.compose.foundation.lazy.items
импортировать androidx.compose.foundation.rememberScrollState
импортировать androidx.compose.foundation.shape.CircleShape
импортировать androidx.compose.foundation.shape. RoundedCornerShape
импортировать androidx.compose.foundation.verticalScroll
импортировать androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
импортировать androidx.compose.runtime.getValue
импортировать androidx.compose.runtime.setValue
импортировать androidx.compose. runtime.mutableIntStateOf
импортировать androidx.compose.runtime.mutableStateOf
импортировать androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
импортировать androidx.compose.ui.graphics.Color
импортировать androidx.compose.ui.layout.ContentScale
импортировать androidx.compose.ui.text.TextStyle
импортировать androidx.compose.ui.text.font.FontWeight
импортировать androidx. compose.ui.text.style.TextAlign
импортировать androidx.compose.ui.text.style.TextDecoration
импортировать androidx.compose.ui. text.style.TextOverflow
импортировать androidx.compose.ui.unit.TextUnit
импортировать androidx.compose.ui.unit.TextUnitType
импортировать androidx.compose.ui.unit.dp
импортировать androidx.lifecycle.viewmodel.compose.viewModel
импортировать androidx.tv.material3.ExperimentalTvMaterial3Api
импортировать androidx.tv.material3.Text
import coil.compose.AsyncImage
import com.bamabin.tv_app.data.remote.model.videos.HomeSection
@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun MainScreen(
mainViewModel: MainViewModel = viewModel()
) {
val isLoading с помощью mainViewModel.isLoading.collectAsState()
if (isLoading){
Box(modifier = Модификатор
.fillMaxWidth()
.padding(top = 16.dp), contentAlignment = Alignment.Center){
Box(modifier = Модификатор
.size(40.dp)
.background(
color = Color.White,
shape = CircleShape
)
.padding(all = 8.dp)
){
CircularProgressIndicator(
color = MaterialTheme.colorScheme.primary< /p>
)
}
}
} else {< /p>
LazyColumn(
modifier = Modifier.padding(top = 16.dp)
) {
items(mainViewModel.homeSections.size) {
Section(homeSection = mainViewModel.homeSections[it])
}


}
@ Составной
fun Раздел(homeSection: HomeSection) {
var selectedItem по памяти { mutableIntStateOf(-1)
Столбец(
модификатор = Модификатор
.padding(bottom = 16.dp)
) {
row (
horizontalarrangement = Arangement.Start,
verticalAlignment = alignment.centerverticaly
) {
Box(
модификатор = Модификатор
. ширина(8.dp)
.height(32.dp)
.background(
цвет = MaterialTheme.colorScheme.primary,
shape = RoundedCornerShape(
topEnd = 80.dp,
BottomEnd = 80.dp
)
)
)
Spacer(modifier = Modifier.width(16.dp))
Text(
text = homeSection.name,style = TextStyle(
fontWeight = FontWeight.W700
)
)

Spacer(modifier = Modifier.height(16.dp))
LazyRow {< /p>
items(homeSection.posts.size) {
Столбец(
модификатор = Модификатор
.width(120.dp)
.height(200.dp)
.background(if (selectedItem = = it) Color.Gray.copy(alpha = 0.3f) else Color.Transparent)
.border(
width = if (selectedItem = = it) 2.dp else 0.dp,
color = if (selectedItem == it) MaterialTheme.colorScheme.primary else Color.Transparent
)
.onFocusChanged { f ->
if (f.isFocused) selectedItem = it
else if (selectedItem == it) selectedItem = -1
}
.focusable()
.clickable {}
.padding(
top = 8.dp,
start = 8. dp,
end = 8.dp
)
) {
AsyncImage(
model = homeSection.posts[it].thumbnail,
contentDescription = "",
contentScale = ContentScale.FillBounds,
modifier = Модификатор
.fillMaxWidth()
.height(140.dp)
)
Spacer(modifier = Modifier.height(8.dp))
Текст(
text = homeSection.posts[it].title,
style = TextStyle(
fontSize = TextUnit(
12f,
TextUnitType.Sp
)
),
textAlign = TextAlign.Center,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)



}`
Я не знаю, как решить эта проблема

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