JetpackCompose LazyVerticalGrid绘制条目边框border

LazyVerticalGrid绘制条目边框border

假设现在要制作一个计算器的输入界面。

内置边框

可能我们都会这样去实现。

直接使用 TextButton来代替条目，在border中给其加入边框属性。

val showItemValues : List<String> = listOf(
        "1","2","3","日期",
        "4","5","6","+",
        "7","8","9","-",
        ".","0","退格","完成"
    )

LazyVerticalGrid(
        cells = GridCells.Fixed(4),
        modifier = modifier.fillMaxWidth()
    ){

        items(showItemValues){

            TextButton(
                border = BorderStroke(1.dp,Color.Black),
                shape = RoundedCornerShape(0),
                onClick = { /*TODO*/ },
                colors = ButtonDefaults.textButtonColors(contentColor = Color.Black),
                contentPadding = PaddingValues(top = 0.dp)
            ) {
                Text(
                    modifier = Modifier.padding(vertical = 20.dp),
                    text = it
                )
            }
        }
}

那么得到的结果可能是这样的。

通过图片不难观察到，每个item都绘制了四条边框，导致中间部分出现了边框重叠(叠加)，观感体验不太好。

自主实现

查api

点进去LazyVerticalGrid发现内置的参数如下，只看到了个contentPadding即条目之间的间距。

可能没有条目边框相关的属性。

fun LazyVerticalGrid(
    cells: GridCells,
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    content: LazyGridScope.() -> Unit
)

通过图片观察不难发现，其实我们只需要绘制每个item的下边框及最右边框线。

很容易我们可以得到组合代码，边框线我们可以使用Divider替代。

items(showItemValues){

  Column() {
    Row(
      modifier = modifier.height(intrinsicSize = IntrinsicSize.Min)
    ) {
      TextButton(
        shape = RoundedCornerShape(0),
        modifier = Modifier.weight(1f),
        onClick = { /*TODO*/ },
        colors = ButtonDefaults.textButtonColors(contentColor = Color.Black),
        contentPadding = PaddingValues(top = 0.dp)
      ) {
        Text(
          modifier = Modifier.padding(vertical = 20.dp),
          text = it
        )
      }
      Divider(modifier = Modifier.fillMaxHeight().width(1.dp))
    }
    Divider(thickness = 1.dp, color = Color.LightGray)
  }
}

效果图

到这一步大体上已经实现我们想要的效果了，但是细心的同学不难发现，最右侧我们多绘制了一条边框线，但是最左侧没有，很突兀。

当然加入一个小小的计算就能解决该问题。

        /**
         * 边框绘制
         * 下边框线总是绘制，右边框线看计算情况绘制
         */
        itemsIndexed(showItemValues) { index, item ->

            val isRightBorderDraw = (((index + 1) % 4) != 0)

            Column() {
                Row(
                    modifier = modifier.height(intrinsicSize = IntrinsicSize.Min)
                ) {
                    TextButton(
                        modifier = Modifier.weight(1f),
                        shape = RoundedCornerShape(0),
//                        border = BorderStroke(1.dp, Color.LightGray),
                        onClick = { /*TODO*/ },
                        colors = ButtonDefaults.textButtonColors(contentColor = Color.Black),
                        contentPadding = PaddingValues(top = 0.dp)
                    ) {
                        Text(
                            modifier = Modifier.padding(vertical = 20.dp),
                            text = item
                        )
                    }

                    //有边框线
                    if (isRightBorderDraw) {
                        Divider(modifier = Modifier.fillMaxHeight().width(1.dp))
                    }
                }
                Divider(thickness = 1.dp, color = Color.LightGray)
            }
        }

最终效果(最后一行下边框线还是存在哦，你们看看如何解决吧~)