Я изучаю рабочий стол 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])
}
Непонятно, что такое columnWidthx и columnHeighty.
К сожалению, когда я редактировал, я не включил весь функциональный текст. Это ширина и высота ящиков. @GabrieleMarriotti
Вы используете dp
и плаваете неправильно. Например, определите var pad = 20.dp
, а затем внутри Canvas
используйте: val pad = density.run { pad.toPx() }
Я внес ваши изменения, и он все еще имел такое же поведение. Наконец-то я понял, что ширина ячеек непостоянна. Я использовал модификатор для .requiredWidth, и он работает как надо. Спасибо за помощь. Вы лучше показали мне некоторые приемы программирования. @GabrieleMarriotti
Я понял, что ширина ячеек меняется на 1 dp. Я использовал Modifier.requiredWidth, и он работает по желанию.
«ширина и высота холста меньше, чем я объявил размеры окна». — Я не знаю JetPack, но подозреваю, что размер окна должен включать в себя границы окна, строку заголовка и т. д., а также ваш холст. (Возможно, поэтому ваш холст имеет немного меньшую высоту, чем ширину, чтобы учесть строку заголовка.) Можете ли вы установить минимальный размер своего холста и позволить окну решить, насколько больше оно должно быть?