Question

Trying to make a simple tic tac toe board in Jetpack Compose:

enum class SquareStateValues {
  None,
  Cross,
  Nought
}

data class SquareState(val value: SquareStateValues = SquareStateValues.None)

var gameState =
    mutableMapOf<Number, Triple<SquareState, SquareState, SquareState>>(
        1 to Triple(first = SquareState(), second = SquareState(), third = SquareState()),
        2 to Triple(first = SquareState(), second = SquareState(), third = SquareState()),
        3 to Triple(first = SquareState(), second = SquareState(), third = SquareState()))

@Composable
fun GameBoard() {
  Surface(modifier = Modifier.fillMaxSize()) {
    gameState.forEach {
      var col = it.key
      Row {
        it.value.toList().forEachIndexed { i, item ->
          Column {
            Button(
                onClick = {},
                modifier =
                    Modifier.align(Alignment.CenterHorizontally)
                        .padding(8.dp)
                        .background(Color.Red)) {
                  Text("$col:$i")
                }
          }
        }
      }
    }
  }
}

但在预审中,我只看到最后一行。

“entergraph

Answer 1

You can wrap your row in LazyColumn Like the below code. Try it out. It will work.

LazyColumn {
       items(gameState.value){item ->
           Row {
               item.toList().forEachIndexed { i, item ->
                   Column {
                       Button(
                           onClick = {},
                           modifier =
                           Modifier.align(Alignment.CenterHorizontally)
                               .padding(8.dp)
                               .background(Color.Red)
                       ) {
                           Text("$col:$i")
                       }
                   }
               }
           }
       }
   }

友情链接