Android Jetpack Compose：对角拆分卡片并将内容放入其中

发布于08月19日

我就是想达到这样的效果

其中A是图像，B也是图像.

目前，这是我能做的最好的了

 Card(
   modifier = Modifier
   .fillMaxWidth()
   .constrainAs(image) {
     top.linkTo(parent.top)
     start.linkTo(parent.start)
     end.linkTo(parent.end)
     width = Dimension.fillToConstraints}.fillMaxSize(0.3f)) {
       Row {
         AsyncImage(model = url1,
                    contentDescription = "Product Image",
                    modifier = Modifier.weight(1f),
                    contentScale = ContentScale.Crop
                    )

         AsyncImage(model = url2,
                    contentDescription = "Product Image",
                    modifier = Modifier.weight(1f),
                    contentScale = ContentScale.Crop
                    )
                }
            }
      }
}

It will split these 2 images vertically, but not diagonally like below picture.

任何帮助都将不胜感激.

谢谢

推荐答案

可以使用Shape和Modifier.graphicsLayer{}来实现这一点，使用Clip和Shape或Modifier.clip(shape)来实现这一点，后者是发动机罩下的GraphicsLayer.

@Composable
private fun DividedImageCard() {
   Card() {
       Box(
           modifier = Modifier
               .fillMaxWidth()
               .height(200.dp)
       ) {

           val shapeLeft = GenericShape { size: Size, layoutDirection: LayoutDirection ->
               val width = size.width
               val height = size.height
               moveTo(0f, height)
               lineTo(0f, 0f)
               lineTo(width, 0f)
               close()
           }

           val shapeRight = GenericShape { size: Size, layoutDirection: LayoutDirection ->
               val width = size.width
               val height = size.height
               moveTo(width, 0f)
               lineTo(width, height)
               lineTo(0f, height)
               close()
           }

           val modifierLeft = Modifier
               .fillMaxWidth()
               .height(200.dp)
               .graphicsLayer {
                   clip = true
                   shape = shapeLeft
               }
               .border(3.dp, Color.Green)


           val modifierRight = Modifier
               .fillMaxWidth()
               .height(200.dp)
               .graphicsLayer {
                   clip = true
                   shape = shapeRight
               }
               .border(3.dp, Color.Red)

           Image(
               modifier = modifierLeft,
               painter = painterResource(id = R.drawable.landscape1),
               contentDescription = null,
               contentScale = ContentScale.FillBounds
           )

           Image(
               modifier = modifierRight,
               painter = painterResource(id = R.drawable.landscape2),
               contentDescription = null,
               contentScale = ContentScale.FillBounds
           )
       }
   }
}

结果