Android Jetpack - 将图像适合卡中的自定义样式

小编典典

Android Jetpack - 将图像适合卡中的自定义样式

all

我有一个仅包含 LazyRow 水平列表的屏幕，其中包含 2 张卡片，因此您可以滑动卡片。你可以在下面看到我的代码：

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.jetpackdeneme.R

@Composable
fun TestScreen1() {
    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(20.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            item {
                LazyRow(
                    Modifier.height(160.dp),
                    contentPadding = PaddingValues(horizontal = 16.dp),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    item {
                        PromotionItem1(
                            imagePainter = painterResource(id = R.drawable.statue_of_liberty),
                            title = "AMERICA",
                            header = "USA",
                            backgroundColor = Color.White
                        )
                    }
                    item {
                        PromotionItem1(
                            imagePainter = painterResource(id = R.drawable.statue_of_liberty),
                            title = "AMERICA",
                            header = "USA",
                            backgroundColor = Color.White
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun PromotionItem1(
    title: String = "",
    header: String = "",
    backgroundColor: Color = Color.Transparent,
    imagePainter: Painter
) {
    Card(
        Modifier.width(300.dp),
        shape = RoundedCornerShape(8.dp),
        backgroundColor = backgroundColor,
        elevation = 0.dp
    ) {
        Row {
            Image(
                painter = imagePainter, contentDescription = "",
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f),
                alignment = Alignment.CenterEnd,
                contentScale = ContentScale.Crop
            )
            Column(
                Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = title, fontSize = 14.sp, color = Color.Black, fontWeight = FontWeight.Bold)
                Text(text = header, fontSize = 14.sp, color = Color.Black)
            }
        }
    }
}

输出是这样的（不合适，我想要自定义样式）：

我想将图像的底部边缘设置为卡片的底部，并像输出一样溢出顶部：

你可以在这里得到图像

我怎样才能做到这一点？你能帮我吗？

阅读 60

2022-08-27

共1个答案

小编典典

首先，将 Card 替换为 Box ，它不会剪切防止溢出的布局。

其次，设置一个 graphicsLayer 来增加图像的比例，但默认情况下变换原点是中心，因为我们想将图像向上推，我们需要将左下角设置为变换原点，即TransformOrigin(0f,1f).

第三，随心所欲地扩大规模，并有预期的产出。

@Composable
fun PromotionItem1(
    title: String = "",
    header: String = "",
    backgroundColor: Color = Color.Transparent,
    imagePainter: Painter
) {
    Box(
        Modifier
            .width(300.dp)
            .background(backgroundColor, RoundedCornerShape(8.dp)),

    ) {
        Row {

            Image(
                painter = imagePainter,
                contentDescription = "",
                modifier = Modifier
                    .graphicsLayer {
                        scaleY = 1.2f
                        scaleX = 1.2f
                        this.transformOrigin = TransformOrigin(0f, 1f)
                    }
                    .fillMaxHeight(),
                contentScale = ContentScale.Fit
            )

            Spacer(modifier = Modifier.weight(1f))
            Column(
                Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = title,
                    fontSize = 14.sp,
                    color = Color.Black,
                    fontWeight = FontWeight.Bold
                )
                Text(text = header, fontSize = 14.sp, color = Color.Black)
            }
        }
    }
}

我也将 LazyRow 高度增加到Modifier.height(200.dp)

结果

2022-08-27

Android Jetpack - 将图像适合卡中的自定​​义样式

共1个答案

Android Jetpack - 将图像适合卡中的自定义样式