Flutter - 如何实现多行下划线TextField

2024-03-17

我想实现以下 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,
        )
    ),
),

您可以使用Stack堆叠TextField到线上。您需要设置expands的属性TextField设置为 true 以便使其从一开始就扩展到完整的三行宽度。
我实现了类似的TextField到您正在尝试创建的:

Stack(
  children: [
    for (int i = 0; i < 3; i++)
      Container(
        width: double.infinity,
        margin: EdgeInsets.only(
          top: 4 + (i + 1) * 28,
          left: 15,
          right: 15,
        ),
        height: 1,
        color: Colors.black,
      ),
    const SizedBox(
      height: 97,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 15),
        child: TextField(
          decoration: InputDecoration(border: InputBorder.none),
          cursorHeight: 22,
          style: TextStyle(
            fontSize: 20.0,
          ),
          keyboardType: TextInputType.multiline,
          expands: true,
          maxLines: null,
        ),
      ),
    ),
  ],
),

Result:
enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter - 如何实现多行下划线TextField 的相关文章

随机推荐