Android

Question

我正在尝试在 Compose 中制作这个简单的视图，但似乎做不对。

我试过使用分隔符，现在切换到 canvas，但似乎无法得到正确的结果。

Row{
    Line()
    ClickableText(text = AnnotatedString("Show replies"),
                 modifier = Modifier.weight(1f),
                 onClick = { showReplies.value = true })
    Line()
    }

  @Composable
fun RowScope.Line() {
    Canvas(modifier = Modifier.fillMaxSize().weight(1f)) {
        // Fetching width and height for
        // setting start x and end y
        val canvasWidth = size.width
        val canvasHeight = size.height

        // drawing a line between start(x,y) and end(x,y)
        drawLine(
            start = Offset(x = 0f, y = canvasHeight/2),
            end = Offset(x = canvasWidth, y = canvasHeight/2),
            color = Color.Red,
            strokeWidth = 5F
        )
    }
}

我玩过参数、重量、大小，但总是得到一些古怪的结果。

Answer 1

试试这个：

@Composable
fun Replies() {
    Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
        Box(modifier = Modifier
            .height(2.dp)
            .weight(1f)
            .background(Color.Gray)) {}
        ClickableText(
            text = AnnotatedString("Show replies"), onClick = {}, modifier = Modifier.weight(1f),
            style = TextStyle(
                textAlign = TextAlign.Center
            ),
        )
        Box(modifier = Modifier
            .height(2.dp)
            .weight(1f)
            .background(Color.Gray)) {}
    }
}

Android - Jetpack Compose 绘制两侧居中线的文本

Android - Jetpack Compose draw text with centered lines on sides

kotlin

android-jetpack

android-jetpack-compose