android Jetpack合成-图像边框减少填充

zynd9foi  于 2023-02-10  发布在  Android
关注(0)|答案(3)|浏览(139)
@Composable
fun BottomStrip() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .height(70.dp)
        .background(color = colorResource(id = R.color.cgux_background_grey)),
        horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
            modifier = Modifier
                .width(36.dp)
                .height(36.dp)
                .border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
                .padding(5.dp)
                .clickable {},
            contentDescription = "Expandable Image",
            colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
        )
    }
}

我有一个如上所述的可组合函数。我的想法是将image对齐到Row的右边,并在Image的所有边上都添加一些填充。我还必须在image周围创建边框,这是我使用border修饰符完成的。我面临的问题是,当我将border设置为Image时,填充丢失,这意味着我看不到图像的填充。图像触摸屏幕的右端。有没有办法我们可以有边框填充以及。

rslzwgfq

rslzwgfq1#

在边框前添加填充可以解决你的问题。下面是完整的代码。

@Composable
fun BottomStrip() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .height(70.dp)
        .background(color = colorResource(id = R.color.cgux_background_grey)),
        horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
            modifier = Modifier
                .width(36.dp)
                .height(36.dp)
                .padding(5.dp)
                .border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
                .padding(5.dp)
                .clickable {},
            contentDescription = "Expandable Image",
            colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
        )
    }
}
jhdbpxl9

jhdbpxl92#

你可以试试下面这样。

@Composable
fun BottomStrip() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(70.dp)
            .background(color = Color.Cyan),
        horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_visa),
            modifier = Modifier
                .padding(5.dp)
                .border(BorderStroke(1.dp, Color.Red))
                .clickable {},
            contentDescription = null
        )
    }
}

ojsjcaue

ojsjcaue3#

在jetpack组合中,修改器的顺序很重要。官方文档
您可以使用此解决方案并在设置图像大小之前添加填充:

@Composable
fun BottomStrip() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .height(70.dp)
        .background(color = colorResource(id = R.color.cgux_background_grey)),
        horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
            modifier = Modifier
                .padding(5.dp) // padding between Row and Image, you can remove it because you already set size for Image and Row
                .border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
                .padding(5.dp) // padding between border and image
                .size(36.dp)
                .clickable {},
            contentDescription = "Expandable Image",
            colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
        )
    }
}

相关问题