美文网首页
Flutter TextField 多行文本 文本域 点击区域只

Flutter TextField 多行文本 文本域 点击区域只

作者: 星邪Ara | 来源:发表于2020-11-19 17:56 被阅读0次

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)),
      ),
    );
  }

相关文章

  • Flutter TextField 多行文本 文本域 点击区域只

    Flutter TextField 多行文本 文本域 点击区域只有一行问题,只有点击第一行才会弹出键盘找了半天资料...

  • 表单组件

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框、CheckBox、...

  • Flutter(十九):Form 表单

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框、CheckBox、...

  • Flutter 常用表单介绍

    一.Flutter 中常见的表单 TextField 单行文本框,TextField 多行文本框、CheckBox...

  • Flutter 20 - 表单组件详解

    一、常用表单介绍 Flutter 中常见的表单有 TextField 单行文本框, TextField 多行文本框...

  • Flutter 3.8 表单

    1.TextField单行文本框 多行文本框 <1>样式decoration 对文本框装饰(hintText ...

  • 2020-06-18

    TextField去除底部边线, TextField改为多行文本框, 直接增加maxLines属性 TextStyle

  • HTML系列知识(六)

    HTML文本域 即文本域 与文本框不同的是,文本域可以有多行,并且可以有滚动条 abcdef 设置宽度和行数 ,使...

  • 表单

    文本框: 密码框: 单选框: 复选框: 作为按钮: 不可点击的按钮: 可提交按钮: 多行文本域: (cols="3...

  • Flutter Widget 之 TextField

    本文主要是Flutter中TextField控件的简单使用说明 说明 TextField:文本输入框; 支持最大长...

网友评论

      本文标题:Flutter TextField 多行文本 文本域 点击区域只

      本文链接:https://www.haomeiwen.com/subject/rzeliktx.html