Android - Jetpack Compose 繪制兩側居中線條的文本

Question

我試圖在 Compose 中制作這個簡單的視圖，但似乎無法正確處理。

我曾嘗試使用分隔線，現在切換到畫布，但似乎無法獲得正確的結果。

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

我玩過arragments、weights、sizes，但總是得到一些古怪的結果。

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