在jetpack compose中画一条线

Posted 2023-04-13

【中文标题】在jetpack compose中画一条线

【英文标题】：Draw a line in jetpack compose

【发布时间】：2020-03-12 20:42:13

【问题描述】：

使用 XML 布局，您可以使用带有彩色背景的 View 对象来绘制一条线。

<View
   android:
   android:
   android:background="#000000" />

我们如何在 Jetpack compose 中绘制水平或垂直线？

【参考方案1】：

你可以使用

可组合分频器

水平线的方法如下。

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

例子：

@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 的height 参数已重命名为thickness

如果我们不希望它适合整个宽度怎么办？我只想要一条固定宽度和固定粗细的线，我想通过手势进行交互。

@MARSK 然后只使用一个彩色框，这是 Divider 在内部所做的 - 这是一个超级简单的可组合包装器：Box(modifier.then(indentMod).fillMaxWidth().height(thickness).background(color = color))

【参考方案2】：

如果你使用androidx.compose.material，你可以使用内置的androidx.compose.material.Divider来绘制一条线，或者使用与材质分隔器相同的方法创建自己的线：

水平线

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))

垂直线

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))