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: [
          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 多行文本 文本域 点击区域只有一行问题)