时间戳

首页 > 解决方案 > 如何在撰写 TextField 中绘制平行水平线？

android - 如何在撰写 TextField 中绘制平行水平线？

问题描述

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

（我知道撰写 Canvas 的基础知识，但不知道如何开始）

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

标签： androidkotlinandroid-jetpack-composeandroid-compose-textfield

解决方案

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

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

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

推荐阅读