我有一个仅包含 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) } } } }
输出是这样的(不合适,我想要自定义样式):
我想将图像的底部边缘设置为卡片的底部,并像输出一样溢出顶部:
你可以在这里得到图像
我怎样才能做到这一点?你能帮我吗?
首先,将 Card 替换为 Box ,它不会剪切防止溢出的布局。
其次,设置一个 graphicsLayer 来增加图像的比例,但默认情况下变换原点是中心,因为我们想将图像向上推,我们需要将左下角设置为变换原点,即TransformOrigin(0f,1f).
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)
Modifier.height(200.dp)
结果