[英]Draw a line in jetpack compose
使用 XML 布局,您可以使用帶有彩色背景的 View object 來繪制一條線。
<View
android:width="match_parent"
android:height="1dp"
android:background="#000000" />
我們如何在 Jetpack compose 中繪制水平線或垂直線?
您可以使用
分頻器可組合
水平線的方法如下。
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)
}
}
}
}
}
要繪制一條線,您可以使用內置的androidx.compose.material.Divider如果您使用androidx.compose.material或使用與材質分隔器相同的方法創建自己的線:
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))
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.