0
720
VisualizaçõesAndroid Jetpack compone un borde parcial en Box
Estoy tratando de preparar un diseño en composición jetpack con un borde parcial en un lado de la caja. Aquí está la interfaz de usuario que tengo ahora,
El fondo es un color sólido a partir de ahora, pero será reemplazado por una imagen. Quiero romper el borde en la parte inferior izquierda y agregar un texto similar a la captura de pantalla a continuación mientras mantengo el fondo como está.
Aquí está mi código:
Box(modifier = Modifier .fillMaxWidth() .fillMaxHeight()) { Box(modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color(0xFF37C7D7).copy(alpha = 0.6f))) Box(modifier = Modifier .fillMaxHeight() .fillMaxWidth() .background(Color.Transparent) .padding(20.dp,30.dp) .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(32.dp)) ) Box(modifier = Modifier .fillMaxHeight() .fillMaxWidth() .background(Color.Transparent) .padding(28.dp,38.dp) .border(width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape=RoundedCornerShape(28.dp)) ) Column(modifier = Modifier.statusBarsPadding() .fillMaxWidth() .fillMaxHeight().padding(20.dp,40.dp), verticalArrangement = Arrangement.Bottom) { Text(text = "this is Test",modifier = Modifier.padding(0.dp,30.dp)) } }
·
Santiago Trujillo
1 Respostas
Responde à pergunta0
Puede evitar que parte de la vista se dibuje con Modifier.drawWithContent y DrawScope.clipRect . Con este método, puede crear el siguiente modificador:
fun Modifier.drawWithoutRect(rect: Rect?) = drawWithContent { if (rect != null) { clipRect( left = rect.left, top = rect.top, right = rect.right, bottom = rect.bottom, clipOp = ClipOp.Difference, ) { this@drawWithContent.drawContent() } } else { drawContent() } }Úsalo así:
Box( modifier = Modifier .fillMaxWidth() .fillMaxHeight() ) { Image( painterResource(id = R.drawable.my_image), contentDescription = null, contentScale = ContentScale.FillBounds, modifier = Modifier.fillMaxSize() ) var textCoordinates by remember { mutableStateOf<Rect?>(null) } Box( modifier = Modifier .fillMaxHeight() .fillMaxWidth() .background(Color(0xFF37C7D7).copy(alpha = 0.6f)) ) Box( modifier = Modifier .fillMaxHeight() .fillMaxWidth() .drawWithoutRect(textCoordinates) .padding(20.dp, 30.dp) .border( width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape = RoundedCornerShape(32.dp) ) ) Box( modifier = Modifier .fillMaxHeight() .fillMaxWidth() .drawWithoutRect(textCoordinates) .padding(28.dp, 38.dp) .border( width = 0.8.dp, color = Color.White.copy(alpha = 0.5f), shape = RoundedCornerShape(28.dp) ) ) Column( verticalArrangement = Arrangement.Bottom, modifier = Modifier .statusBarsPadding() .padding(20.dp, 40.dp) .onGloballyPositioned { textCoordinates = it.boundsInParent() } .align(Alignment.BottomStart) ) { Text(text = "this is Test", modifier = Modifier.padding(0.dp, 30.dp)) } }Resultado:
·
Santiago Trujillo
Relatório
Responde à pergunta