如何在撰写 TextField 中绘制平行水平线？答案

【问题标题】：How to draw parallel horizontal lines in a compose TextField?如何在撰写 TextField 中绘制平行水平线？
【发布时间】：2021-11-29 21:39:42
【问题描述】：

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

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

这就是我想要做的：

【问题讨论】：

标签： android kotlin android-jetpack-compose android-compose-textfield

【解决方案1】：

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

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

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

【讨论】：

Modifier.drawWithCache 也可以这样做，但这也不是一个完整的解决方案 - 滚动时线条是静态的。
是的，我曾想过这个解决方案，但正如@vitidev 提到的那样，这些行是静态的，并且在滚动文本字段时不会移动，这会导致文本剪切这些行。
你要问的显然是一个完整的代码库，因为如果由基本块构建，可组合将是巨大的！所以，通常在 Stack Overflow 上，当我们问这样的问题时，我们通常会要求解决方案的特定组件，这就是我认为你在问的问题。这就是为什么我确实提到了分页，因为我知道这可能不会帮助您实现您想要的，但这就是您所要求的（请参阅您问题中的声明）。我的意思是，如果您要求一种方法来构建注释处理器以便您可以构建绘画应用程序，我们会为您提供处理器
我的意思是，看看您对我们提供的实施方案做了什么与我们无关。如果您要求一种创建水平线的方法，那么没有人会共享滚动编辑器分页器。如果您要求一种方法来实现您的屏幕截图，那将是一个好的开始。然后，您应该针对之后偶然发现的任何地方发布新问题。你必须小心你的言辞，因为当你在线互动时，你无法读懂对方的想法。