如何画2个圆和中间的一条线？

Question

我正在创建一个 Glance Widget。 我想在中间画一个圆和一条线，但我有问题。

这是我的问题

这是我的代码

@Composable
    fun TestCL() {
        Row(
            modifier = GlanceModifier.fillMaxSize(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            val size = 80.dp
            Image(modifier = GlanceModifier.size(size) , provider = ImageProvider(R.drawable.widget_glance_bg_off_white), contentDescription = "", contentScale = ContentScale.Fit )
            Image(modifier = GlanceModifier.size(size*2,30.dp) , provider = ImageProvider(R.drawable.space_line), contentDescription = "", contentScale = ContentScale.Fit )
            Image(modifier = GlanceModifier.size(size) , provider = ImageProvider(R.drawable.widget_glance_bg_off_white), contentDescription = "", contentScale = ContentScale.Fit )
        }
    }

R.drawable.widget_glance_bg_off_white

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shape="oval">
    <solid android:color="#26fcfcff" />
    <size
        android:width="80dp"
        android:height="80dp" />
</shape>

R.drawable.space_line

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<solid android:color="#26fcfcff" />
</shape>

我希望颜色填充图像中的错误位置。这是图像我的问题 请帮我。非常感谢你

Answer 1

我从你的问题中了解到的是 - 你不需要圆和线之间的空间。 这是我想建议的一个简单的解决方案。

从中心开始重叠直线和圆。检查下图。蓝色的是线。

我知道你想要一个glance的解决方案，但我希望你能轻松地在glance中转换下面的撰写代码。

Box(modifier = Modifier, contentAlignment = Alignment.Center) {
    val size = 80.dp
    Row(
        modifier = Modifier.width(size*3),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Image(
            modifier = Modifier.size(size),
            painter = painterResource(R.drawable.baseline_circle_24),
            contentDescription = ""
        )

        Image(
            modifier = Modifier.size(size),
            painter = painterResource(R.drawable.baseline_circle_24),
            contentDescription = ""
        )
    }
    Image(
        modifier = Modifier.size(size * (2), 30.dp),
        painter = painterResource(R.drawable.baseline_rectangle_24),
        contentDescription = "",
        contentScale = ContentScale.FillBounds
    )
}