动态更改卡片中的文本 - Jetpack Compose 状态

Question

Compose 新手，正在努力应对更复杂的状态案例。

我似乎无法动态更改这些卡片中的文本，只能手动设置文本。每按一次按钮都会更改一个框中的文本，从左到右开始，将下一个框留空。

这里有什么问题？

UI:

val viewModel = HomeViewModel()
val guessArray = viewModel.guessArray


@Composable
fun HomeScreen() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        WordGrid()
        Keyboard()
    }
}


@Composable
fun WordGrid() {
    CardRow()
}


@Composable
fun Keyboard() {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement     = Arrangement.SpaceEvenly) {
    MyKeyboardButton(text = "A", 35)
    MyKeyboardButton(text = "B", 35)
   }
}

@Composable
fun MyCard(text: String) {
    Card(

        modifier = Modifier
        .padding(4.dp, 8.dp)
        .height(55.dp)
        .aspectRatio(1f),
    backgroundColor = Color.White,
    border = BorderStroke(2.dp, Color.Black),
) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(
            text = text,
            fontSize = 20.sp,
            )
        }
    }
}

@Composable
fun CardRow() {
    guessArray.forEach { rowCards ->
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            rowCards.forEach {
                MyCard(it)
            println(it)
            }
        }
    }
}

@Composable
fun MyKeyboardButton(text: String, width: Int) {

    Button(
        onClick = {
            guessArray[viewModel.currentRow][viewModel.column] = text
            viewModel.column += 1
        },
        modifier = Modifier
            .width(width.dp)
            .height(60.dp)
            .padding(0.dp, 2.dp)
    ) {
        Text(text = text, textAlign = TextAlign.Center)
        }
    }

视图模型：

class HomeViewModel : ViewModel() {

var currentRow = 0
var guessArray = Array(5) { Array(6) { "" }.toMutableList() }
var column = 0
}

网格已创建，但文本从未更改。

Answer 1

要使用新值重新组合 Compose 视图，应使用可变状态。

您已经在您的可组合项中将它与 remember 一起使用，但它还需要在您的视图模型中用于属性，这应该会触发重组。

class HomeViewModel : ViewModel() {
    var currentRow  = 0
    val guessArray = List(5) { List(6) { "" }.toMutableStateList() }
    var column = 0
}

动态更改卡片中的文本 - Jetpack Compose 状态

dynamically change text in cards - Jetpack Compose state

android

kotlin

multidimensional-array

android-jetpack-compose