Dibuja una línea en jetpack componer

2 minutos de lectura

Avatar de usuario de Mahdi-Malv
Mahdi Malv

Usando el diseño XML, podría usar un objeto Ver con fondo de color para dibujar una línea.

<View
   android:width="match_parent"
   android:height="1dp"
   android:background="#000000" />

Como podemos dibuja un horizontales o verticales línea en composición Jetpack?

Avatar de usuario de Rajnish suryavanshi
Rajnish suryavanshi

Puedes usar

Divisor Componible

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)

                }
            }
        }

    }

}

  • Divider‘s height el parámetro ha sido renombrado a thickness

    – Rick Sánchez725

    30 sep 2020 a las 11:55


  • ¿Y si no queremos que se ajuste a todo el ancho? Solo quiero una línea de ancho fijo y grosor fijo, que quiero que sea interactiva mediante gestos.

    –Richard Onslow Roper

    25 de octubre de 2021 a las 3:59

  • @MARSK luego solo use un cuadro de color, que es lo que Divider lo hace internamente: es un contenedor componible súper simple: Box(modifier.then(indentMod).fillMaxWidth().height(thickness).background(color = color))

    – Lucas Needham

    12 de enero a las 12:36


Avatar de usuario de Valeriy Katkov
valeriy katkov

Para dibujar una línea, puede usar el incorporado androidx.compose.material.Divisor si utiliza androidx.compose.material o cree el suyo propio utilizando el mismo enfoque que el divisor de materiales:

Linea horizontal

Column(
    // forces the column to be as wide as the widest child,
    // use .fillMaxWidth() to fill the parent instead
    // https://developer.android.com/jetpack/compose/layout#intrinsic-measurements
    modifier = Modifier.width(IntrinsicSize.Max)
) {
    Text("one", Modifier.padding(4.dp))

    // use the material divider
    Divider(color = Color.Red, thickness = 1.dp)

    Text("two", Modifier.padding(4.dp))

    // or replace it with a custom one
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(1.dp)
            .background(color = Color.Red)
    )

    Text("three", Modifier.padding(4.dp))
}

ingrese la descripción de la imagen aquí

Linea vertical

Row(
    // forces the row to be as tall as the tallest child,
    // use .fillMaxHeight() to fill the parent instead
    // https://developer.android.com/jetpack/compose/layout#intrinsic-measurements
    modifier = Modifier.height(IntrinsicSize.Min)
) {
    Text("one", Modifier.padding(4.dp))

    // use the material divider
    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )

    Text("two", Modifier.padding(4.dp))

    // or replace it with a custom one
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
            .background(color = Color.Red)
    )

    Text("three", Modifier.padding(4.dp))
}

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?