-1

我正在尝试使用 Jetpack Compose 构建一个笔记应用程序。我想要一个包含平行水平线的自定义 TextField,就像真正的记事本一样。
我怎样才能做到这一点?

(我知道撰写 Canvas 的基础知识,但不知道如何开始)

这就是我想要做的: 内衬编辑文本

4

1 回答 1

0

好的,因为您的问题明确指出您希望知道帮助您绘制平行水平线的方法,因此此实现可能会有所帮助:-

@Preview
@Composable
fun LeafPad() {
    val textSize = 25.sp

    Box(
        Modifier
            .fillMaxSize()
            .background(Color(0xFFFEFCB5))) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            var yCord = 0f
            repeat(40) {
                drawLine(
                    Color(0xFFB2B461),
                    Offset(0f, yCord),
                    Offset(size.width, yCord),
                    strokeWidth = 2f
                )
                yCord += 1.8f * textSize.toPx()
            }
        }

        var value by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxSize(),
            value = value,
            onValueChange = { value = it },
            textStyle = TextStyle(fontSize = textSize, color = Color.Black, lineHeight = (1.8f * textSize.value).sp)
        )
    }
}

老实说,看看你的用例,你可能想考虑使用分页来代替无限滚动等功能,因为我假设对于文本编辑器,当用户到达页面末尾时你会想要向下滚动,但是当然,这完全取决于您的设计和实现。

于 2021-10-11T09:41:09.827 回答