我想实现以下UI,其中包含一个多行TextField,每一行下面都有下划线。有什么办法可以实现吗
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: TextField(
controller: problemItem.titleController,
decoration: const InputDecoration(
border: InputBorder.none),
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 100,
)
),
),
3条答案
按热度按时间bqf10yzr1#
您可以使用
Stack
将TextField
堆叠到行上。您需要将TextField
的expands
属性设置为true,以便使其从一开始就扩展到完整的三行宽度。我实现了一个类似于您正在尝试创建的
TextField
:结果:
mzmfm0qo2#
这只是一个简单的例子,说明了当文本为一般情况更改时如何生成下划线。如果下划线位置不在您想要的位置,屏幕上的输出行为仍然需要调整。
查看heigh属性的更多信息
如果要分配固定行文本域,可以尝试以下小部件:
style
是必需的,因为它使用fontSize & height来计算行号controller
用于监视文本更改initState中的
textPainter
模拟文本的文本行为,并计算将要显示的文本行数。yvgpqqbh3#