android 如何在一行中创建大小相等的正方形组合件，并且它们之间没有白色？

ijxebb2r 于 2023-03-27 发布在 Android

关注(0)|答案(2)|浏览(223)

我正在构建一个应用程序，我需要显示一行方形瓷砖，每个瓷砖都有不同的颜色。我已经创建了一个Composable ColorTile，它将瓷砖的名称和颜色代码作为参数，以及一个ColorTilesRow Composable，它将名称和颜色代码列表作为参数。
问题是，这一行中的前两个瓷砖的高度比其他瓷砖稍小，导致它们与下一个瓷砖之间出现白色。所有瓷砖都应该是大小相同的正方形。
我已经尝试了对ColorTile和ColorTilesRow可组合项的各种修改，包括设置纵横比和fillMaxWidth属性，以及在Row中使用weight和fillMaxSize修改器，但我仍然无法使所有的瓷砖都具有完全相同的大小。
x1c 0d1x相关代码如下：

@ExperimentalMaterialApi
@Composable
fun ColorTile(name: String, color: String) {
    Surface(
        modifier = Modifier.aspectRatio(1f),
        color = Color(color.toColorInt()),
        onClick = { }) {

       
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ColorTilesRow(name: String, colors: List<String>) {
    Row {
        colors.forEach { color ->
            Box(modifier = Modifier.fillMaxSize().weight(1f)) {
                ColorTile(name, color)
            }
        }
    }
}

有没有办法让所有的瓷砖大小完全相同，并且避免它们之间的白色？
提前感谢您的任何帮助或建议！

android

来源：https://stackoverflow.com/questions/75850278/how-to-create-equally-sized-square-composables-in-a-row-with-no-white-lines-betw

2条答案

按热度按时间

mf98qq941#

您对Box应用的Modifier在ColorTile上不起作用，因此您需要按如下方式更改Composable，并将modifier传递给ColorTile，而不是传递给Box：

@Composable
fun ColorTile(
    name: String,
    color: String,
    modifier: Modifier = Modifier
) {
    Surface(
        color = Color(color.toColorInt()),
        modifier = modifier
    ) {
        // your code
    }
}

而且使用Rows作为Grid的表示也会影响应用的优化，所以在您的情况下，我建议将此解决方案与VerticalGrid一起使用：

@Composable
fun ColorTileGrid(name: String, colors: List<String>) {
    VerticalGrid(columns = 4) {
        colors.forEach { color ->
            ColorTile(
                name = name,
                color = color,
                modifier = Modifier.aspectRatio(1f)
            )
        }
    }
}

结果：

如果你仍然想要行的解决方案，然后问我，我可以写它，但它是低效的。

赞(0）回复(0）举报 2023-03-27

i7uaboj42#

我建议为LazyGridItemScope创建一个扩展函数，并在LazyVerticalGrid中使用它。

彩色瓷砖

@Composable
fun LazyGridItemScope.ColorTile(
    modifier : Modifier = Modifier,
    name : String,
    color : String
) {
    Surface(
        modifier = modifier,
        color = Color(color.toColorInt())
    ) {
        // your code here
    }
}

然后在UI组合中，在LazyVerticalGrid中调用该函数，如下所示。

@Composable
fun ColorTilesGrid(
    modifier : Modifier = Modifier,
    name : String,
    colors : List<String>
) {
    // columns = GridCells.Adaptive(dp size of each cell) or GridCells.Fixed(fixed number of cells)
    LazyVerticalGrid(
        modifier = modifier,
        columns = GridCells.Fixed(4),
    ) {
        items(colors) { color ->
            ColorTile(
                modifier = Modifier.aspectRatio(1f),
                name = name,
                color = color,
            )
        }
    }
}

赞(0）回复(0）举报 2023-03-27

我来回答

android 如何在一行中创建大小相等的正方形组合件，并且它们之间没有白色？

2条答案

相关问题

热门标签

最新问答