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

2020-11-19  本文已影响0人  星邪Ara

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

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

在多行文本情况下

解决办法就是不设置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)),
      ),
    );
  }
上一篇 下一篇

猜你喜欢

热点阅读