Android TV: LazyColumn и фокус ⇐ Android

[Anonymous]

Я запустил новое приложение, посвященное платформе Android TV.

Я пытаюсь отобразить действие, содержащее 2 или 3 столбца, с помощью компонентов LazyColumn. Каждый столбец отображается правильно с данными в моих списках.

Я пытаюсь изменить цвет линии в зависимости от фокуса... Спустя 3 дня это не работает!!

Я пытаюсь сделать простой проект, мой код вы найдете ниже. Я не вижу, чтобы фокус изменился. Мне удалось выбрать элемент и выбрать цвет, когда он выбран... Но мне не удалось сфокусироваться...

Можете ли вы найти решение? Это ошибка в эмуляторе?

Дайте мне знать и заранее спасибо за помощь

package com.afarine76.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusGroup
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.BasicText
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.*
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
//import androidx.tv.material3.Surface

// --- Données simples
data class Channel(val name: String)
data class Category(val name: String, val channels: List)

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TvThreeColumnScreen()
}
}
}

@Composable
fun TvThreeColumnScreen() {
// --- Données factices
val categories = remember {
listOf(
Category("Sport", listOf(Channel("ESPN"), Channel("BeIn Sports"), Channel("Eurosport"), Channel("1"), Channel("2"), Channel("3"), Channel("4"),)),
Category("News", listOf(Channel("CNN"), Channel("France 24"), Channel("BFMTV"))),
Category("Films", listOf(Channel("Ciné+"), Channel("OCS"), Channel("Canal+"))),
Category("Musique", listOf(Channel("MTV"), Channel("NRJ12"), Channel("CStar"))),
Category("1", listOf(Channel("MTV"), Channel("NRJ12"), Channel("CStar"))),
Category("2", listOf(Channel("MTV"), Channel("NRJ12"), Channel("CStar"))),
Category("3", listOf(Channel("MTV"), Channel("NRJ12"), Channel("CStar"))),
Category("4", listOf(Channel("MTV"), Channel("NRJ12"), Channel("CStar")))
)
}

var selectedCategory by remember { mutableStateOf(categories.first()) }
var selectedChannel by remember { mutableStateOf(selectedCategory.channels.first()) }

Surface(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF101010))
.padding(32.dp)
.focusable(false)
) {
Row(
modifier = Modifier.fillMaxSize()
.focusable(false),
horizontalArrangement = Arrangement.spacedBy(24.dp),
) {
// Catégories
LazyColumn(
modifier = Modifier
.weight(1f)
.focusable(false)
.fillMaxHeight(),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(categories) { category ->
FocusableBox(
text = category.name,
isSelected = category == selectedCategory,
onClick = {
selectedCategory = category
selectedChannel = category.channels.first()
}
)
}
}

// Chaînes
LazyColumn(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.focusable(false),

verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(selectedCategory.channels) { channel ->
FocusableBox(
text = channel.name,
isSelected = channel == selectedChannel,
onClick = { selectedChannel = channel }
)
}
}

}
}
}

/**
* Élément focusable commun aux colonnes.
*/
@Composable
fun FocusableBox(
text: String,
isSelected: Boolean,
onClick: () -> Unit
) {
var isFocused by remember { mutableStateOf(false) }

Box(
modifier = Modifier
.fillMaxWidth()
.height(80.dp)
.background(
when {
isFocused -> Color(0xFF448AFF)
isSelected -> Color(0xFF1E88E5)
else -> Color(0xFF303030)
}
)
.focusable(true)
.clickable{ onClick()}
.onFocusChanged { focusState -> isFocused = focusState.isFocused }
/**.onKeyEvent { keyEvent ->
if (keyEvent.type == KeyEventType.KeyUp && keyEvent.key == Key.Enter) {
onClick()
true
} else false
}*/
//.selectable{selected = isSelected, onClick = onClick}
.padding(horizontal = 16.dp),
contentAlignment = Alignment.CenterStart
) {
BasicText(
modifier = Modifier.focusable(false),
text = text,
style = TextStyle(
color = Color.White,
fontSize = 22.sp,
fontWeight = if (isFocused || isSelected) FontWeight.Bold else FontWeight.Normal
)
)
}
}


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