Flutter TextField 多行文本 文本域 点击区域只有一行问题

Flutter TextField 多行文本 文本域 点击区域只有一行问题,只有点击第一行才会弹出键盘
找了半天资料没找到,只能自己调试,幸好终于找出来了。

我定义的高度是350高度,正常我们需要的是 TextField 直接铺满整个350高度,但由于我设置了 minLines最小行是1,所以 TextField 没有跟多内容撑开就导致TextField 的点击区域只有一行。

在多行文本情况下

  • minLines单独使用,不设置maxLines(默认是1),只要大于1就会报错
  • maxLines单独使用,不设置minLines(默认是null),maxLines多少,点击区域就有多少行
  • minLines和maxLines同时使用的话可以根据内容自适应最小行数到最高行数

解决办法就是不设置minLines,把maxLines设置大一点就行,根据实际情况调整就行。

代码

Widget getTextField({
    TextEditingController controller,
    TextInputType keyboardType: TextInputType.multiline,
    TextInputAction textInputAction: TextInputAction.next,
    FocusNode focusNode,
    String hintText,
    int length: 32,
  }) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(
        vertical: setWidth(10),
        horizontal: setWidth(20),
      ),
      height: setHeight(350),
      alignment: Alignment.topCenter,
      child: TextField(
        controller: controller,
        focusNode: focusNode,
        maxLines: 20,
        textInputAction: textInputAction,
        keyboardType: keyboardType,
        textAlign: TextAlign.left,
        style: TextStyle(fontSize: setSp(26)),
        inputFormatters: <TextInputFormatter>[
          LengthLimitingTextInputFormatter(length),
        ],
        decoration: InputDecoration(
          hintText: hintText,
          hintStyle: TextStyle(fontSize: setSp(26), color: XColors.textColor3),
          isDense: true,
          contentPadding: EdgeInsets.only(
            left: setWidth(0),
            top: setHeight(0),
            bottom: setHeight(4),
            right: setWidth(0),
          ),
          border: InputBorder.none,
        ),
      ),
      decoration: BoxDecoration(
        color: XColors.dividerColor,
        border: Border.all(color: XColors.grayColor2, width: setWidth(2)),
        borderRadius: BorderRadius.circular(setWidth(10)),
      ),
    );
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容