The effect is as follows:
The main implementation is to automatically adjust the element position according to the window size, because the window size is actually considered (the implementation process does not involve the Window), it does not work on Android (although it should work fine). The idea of implementing this dynamic control is fairly straightforward: measure the size of the area to be drawn with BoxWithConstraints, and draw the corresponding control based on the resulting size.
The code is as follows:
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>) {// Sort data by category and ID DataList. SortWith (compareBy({it. Category},{it. Id})) /** * */ var districtWidth by remember {mutableStateOf(0f)} /** * The size of each box */ val gridBoxWidth:Float=200f /** * */ var everyRowBoxQuantity:Int Column (indexer = indexer // rememberScrollState()) { DistrictWidth = maxwidth. value // Calculates the number of boxes per Column EveryRowBoxQuantity = floor (districtWidth/gridBoxWidth). ToInt () / / category table val categoryList: MutableList < String > = // display the list, Val gridList:MutableMap<String,List<TestData>> = mutableMapOf() dataList. GroupBy {it.category}.foreach {t, U -> categoryList.add(t) Gridlist. put(t,u)} Column {for(I in gridList){Text(" category" +i.key) GridRow(everyRowBoxQuantity,i.value) } } } } } @Composable fun GridRow(everyRowBoxQuantity:Int,rowList:List<TestData>){ Var boxQuantity=everyRowBoxQuantity-1 // Displays at least one line if(boxQuantity<=0)boxQuantity=1 // Counts when allocating each row of boxes var I =1 // Displays the contents of each row val EveryRowList :MutableList<TestData> = mutableListOf() for(it in rowList){everyRowlist.add (it) everyRowList.add(it) According to Row the if (I % boxQuantity = = 0 | | it = = rowList. Last ()) {Row {everyRowList. ForEach {GridBox (it)}} everyRowList. The clear ()} i++ } } @Composable fun GridBox(testData: When (testdata.state){"0"->u= color.black "1"->u= color.blue "2"->u= color.blue Color.Green } Box( modifier = Modifier .padding(16.dp) .width(200.dp) .height(130.dp) .background(u) ){ Column { Text(testData.id.toString()) Text(testData.name) } } } }Copy the code