Jetpack Compose for Desktop实现复杂的自动布局网格

效果如下:

主要实现随窗口尺寸自动调整元素位置的功能，由于实际上考虑了window的尺寸（实现过程并未涉及window)，在android上并不适用（虽然正常运行应该没有问题）。实现这种动态控件，思路还是很清晰的，就是用BoxWithConstraints测量待绘图区域的尺寸，根据得到的尺寸画出相应的控件。

代码如下:

import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlin.math.floor

class TestUI2 {

    /**
     * 测试用数据
     */
    data class TestData(
        val id: Int,
        val name: String,
        val category: String,
        val state: String,
    )

    @Composable
    fun GridView(dataList:MutableList<TestData>) {
        //对数据按类别和id排序
        dataList.sortWith(compareBy({it.category},{it.id}))
        /**
         * 区间宽度，随窗口尺寸变化更新
         */
        var districtWidth by remember { mutableStateOf(0f) }
        /**
         * 每个方框的尺寸
         */
        val gridBoxWidth:Float=200f
        /**
         * 每列方框的数量
         */
        var everyRowBoxQuantity:Int
        Column (
            modifier = Modifier
                //可滚动
                .verticalScroll(rememberScrollState()