Saltar al contenido

Dibuja una línea en jetpack compose

Solución:

Puedes usar

Divisor Composable

método para Horizontal línea como a continuación.

Divider(color = Color.Blue, thickness = 1.dp)

Ejemplo :

@Composable
fun drawLine(){
    MaterialTheme {

        VerticalScroller{
            Column(modifier = Spacing(16.dp), mainAxisSize = LayoutSize.Expand) {

                (0..3).forEachIndexed { index, i ->
                    Text(
                        text = "Draw Line !",
                        style = TextStyle(color = Color.DarkGray, fontSize = 22.sp)
                    )

                    Divider(color = Color.Blue, thickness = 2.dp)

                }
            }
        }

    }

}

Para linea horizontal puede usar el androidx.compose.material.Divider incorporado si usa androidx.compose.material o cree el suyo propio utilizando el mismo enfoque que hace el divisor de materiales:

@Composable
fun HorizontalLineExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("one")
        
        // use the material divider
        Divider(color = Color.Red, thickness = 1.dp)
        
        Text("two")
        
        // or replace it with a box
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(1.dp)
                .background(color = Color.Red)
        )
        
        Text("three")
    }
}

ingrese la descripción de la imagen aquí

En cuanto a un linea vertical no hay una solución lista para usar en el momento de redactar '1.0.0-alpha10' pero puedes usar Box así como:

@Composable
fun VerticalDividerExample() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("one")

        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
                .background(color = Color.Red)
        )

        Text("two")
    }
}

ingrese la descripción de la imagen aquí

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *