首页 > 解决方案 > Flutter 键盘使 textField 隐藏

问题描述

我有一个问题,当点击文本字段时,颤动键盘会打开,它几乎覆盖了整个屏幕,包括文本字段。

我已经尝试了我在网上看到的所有解决方案:

尽管如此,键盘还是隐藏了文本字段。

这就是我所做的:

return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          [....................]
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ConstrainedBox(
              constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height/2),
              child: TextField(
                style: TextStyle(
                  color: TheBaseColors.lightRed,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'FoundersGrotesqueXCond',
                ),
                onTap: () {},
                textCapitalization: TextCapitalization.characters,
                decoration: InputDecoration(
                  hintText: 'OCCUPATION',
                  hintStyle: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: TheBaseColors.lightRed),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: TheBaseColors.lightRed),
                  ),
                  border: UnderlineInputBorder(
                    borderSide: BorderSide(color: TheBaseColors.lightRed),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

标签: flutter

解决方案


  Scaffold(
          resizeToAvoidBottomInset: false,
child: ....
)

Padding(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Container(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(13.0),
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _msgController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                        contentPadding: new EdgeInsets.symmetric(
                            vertical: 15.0, horizontal: 15.0),
                        border: OutlineInputBorder(
                          // width: 0.0 produces a thin "hairline" border
                          borderRadius: BorderRadius.all(Radius.circular(60.0)),
                          borderSide: BorderSide.none,
                          //borderSide: const BorderSide(),
                        ),
                        hintStyle:
                            TextStyle(color: Colors.black, fontSize: 14.0),
                        filled: true,
                        fillColor: Colors.grey[300],
                        hintText: 'write here...'),
                  ),
                ),
)

添加这个


推荐阅读