Android-喷气背包构成绘制文本，侧面有中心线

Question

我正在尝试使这种简单的观点构成，但似乎不能正确。

我尝试使用分隔线，现在切换到画布，但似乎无法获得正确的结果。

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