Почему мои вертикальные линии не совпадают с горизонтальными линиями в Jetpack Compose для ПК?

Я изучаю рабочий стол Kotlin и Jetpack Compose. Я сделал решатель судоку и теперь пытаюсь сделать его графическим. Размеры моего окна 800 X 800. У меня есть отступы 20.dp со всех сторон. Моя формула размещения горизонтальных линий работает идеально. Я думаю, что это будет то же самое для вертикальных линий, но они смещены. Мне показалось интересным, что ширина и высота холста меньше, чем я объявил размеры окна. Я играл с высотой столбцов, и линия всегда рисовалась по желанию.

@Composable
fun displayPuzzle(answer: Array<Array<IntArray>>) {
    var list = mutableStateListOf<String>()
    for (x in answer[0]) list.addAll(x.map { it.toString() })

    var columnHeighty by remember { mutableStateOf(0F) }
    var columnWidthx by remember { mutableStateOf(0f) }
    var pad = 20

    LazyVerticalGrid(

        columns = GridCells.Fixed(9),
        contentPadding = PaddingValues(
            start = pad.dp,
            top = pad.dp,
            end = pad.dp,
            bottom = pad.dp
        )

    ) {
        items(list.size) { index ->
            Card(
                backgroundColor = Color.Red,
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .onGloballyPositioned { coordinates ->
                        columnWidthx = coordinates.size.width.toFloat()
                        columnHeighty = coordinates.size.height.toFloat()
                    },

                border = BorderStroke(width = 1.dp, color = Color.White)
            ) {
                Text(
                    text = list[index],
                    fontWeight = FontWeight.Bold,
                    fontSize = 30.sp,
                    color = Color(0xFF000000),
                    textAlign = TextAlign.Center,
                    modifier = Modifier.padding(23.dp)
                )
            }

        }

    }

    Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        val strokeWidth = 5.0F

        println("Canvas Width $canvasWidth")
        println("Canvas Height $canvasHeight")
        println("Column Width $columnWidthx")
        println("Column Height $columnHeighty")

        //Draw 1st vertical separator
        drawLine(
            start = Offset(x = columnWidthx * 3 + pad.toFloat(), y = pad.toFloat()),
            end = Offset(x = columnWidthx * 3 + pad.toFloat(), y = canvasHeight - pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw 2nd vertical separator
        drawLine(
            start = Offset(x = columnWidthx * 6 + pad.toFloat(), y = pad.toFloat()),
            end = Offset(x = columnWidthx * 6 + pad.toFloat(), y = canvasHeight - pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw 1st horizontal separator
        drawLine(
            start = Offset(x = pad.toFloat(), y = columnHeighty * 3 + pad.toFloat()),
            end = Offset(x = canvasWidth - pad.toFloat() , y = columnHeighty * 3 + pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw 2nd horizontal seperator
        drawLine(
            start = Offset(x = pad.toFloat(), y = columnHeighty * 6 + pad.toFloat()),
            end = Offset(x = canvasWidth - pad.toFloat() , y = columnHeighty * 6 + pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw top border
        drawLine(
            start = Offset(x = pad.toFloat(), y = pad.toFloat() + strokeWidth / 2),
            end = Offset(x = canvasWidth - pad.toFloat() , y = pad.toFloat() + strokeWidth / 2),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw bottom border
        drawLine(
            start = Offset(x = pad.toFloat(), y = canvasHeight - pad.toFloat() - strokeWidth / 2),
            end = Offset(x = canvasWidth - pad.toFloat() , y = canvasHeight - pad.toFloat() - strokeWidth / 2),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw left border
        drawLine(
            start = Offset(x = pad.toFloat(), y = pad.toFloat()),
            end = Offset(x = pad.toFloat() , y = canvasHeight - pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )
        //Draw right border
        drawLine(
            start = Offset(x = canvasWidth - pad.toFloat(), y = pad.toFloat()),
            end = Offset(x = canvasWidth - pad.toFloat() , y = canvasHeight - pad.toFloat()),
            color = Color.Black,
            strokeWidth = strokeWidth
        )

    }

}
   Window(onCloseRequest = ::exitApplication) {
        window.minimumSize = Dimension(800,800)
        displayPuzzle(finalAnswer[0])
    }

«ширина и высота холста меньше, чем я объявил размеры окна». — Я не знаю JetPack, но подозреваю, что размер окна должен включать в себя границы окна, строку заголовка и т. д., а также ваш холст. (Возможно, поэтому ваш холст имеет немного меньшую высоту, чем ширину, чтобы учесть строку заголовка.) Можете ли вы установить минимальный размер своего холста и позволить окну решить, насколько больше оно должно быть?

gidds 12.02.2023 10:15

Непонятно, что такое columnWidthx и columnHeighty.

Gabriele Mariotti 12.02.2023 20:53

К сожалению, когда я редактировал, я не включил весь функциональный текст. Это ширина и высота ящиков. @GabrieleMarriotti

JD74 12.02.2023 21:48

Вы используете dp и плаваете неправильно. Например, определите var pad = 20.dp, а затем внутри Canvas используйте: val pad = density.run { pad.toPx() }

Gabriele Mariotti 13.02.2023 08:56

Я внес ваши изменения, и он все еще имел такое же поведение. Наконец-то я понял, что ширина ячеек непостоянна. Я использовал модификатор для .requiredWidth, и он работает как надо. Спасибо за помощь. Вы лучше показали мне некоторые приемы программирования. @GabrieleMarriotti

JD74 14.02.2023 03:19
0
5
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я понял, что ширина ячеек меняется на 1 dp. Я использовал Modifier.requiredWidth, и он работает по желанию.

Другие вопросы по теме