文本框高于键盘

如何解决文本框高于键盘

我希望键盘将文本字段向上推，以便在用户不滚动的情况下可以看到完整的文本字段。试过 resizetoAvoidBottomInset: true 如Flutter TextFormField hidden by keyboard

中建议的那样

但是，当文本字段处于焦点时，键盘仍会隐藏文本字段。

以下是我从 Scaffold 开始的代码：

Scaffold(
      resizetoAvoidBottomInset: true,floatingActionButton: Container(
        height: height * 0.054,width: width * 0.885,child: FloatingActionButton.extended(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(9.0))),isExtended: true,backgroundColor: Colos.blue,materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,onpressed: () {
          },label: Text('SEND',style: TextStyle(
                  color: Colors.white
                  fontWeight: FontWeight.bold,letterSpacing: 2.1,fontSize: 13.5)),),extendBody: true,floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,appBar: AppBar(
        backgroundColor: Colors.black,leading: IconButton(
          icon: Icon(Icons.chevron_left,size: 21,color: Colors.white
          onpressed: () {
            Navigator.push(
              context,MaterialPageRoute(builder: (context) => TestingHomePage()),);
          },centerTitle: true,title: Text('Textfield',style: TextStyle(
                color: Colors.white
                fontWeight: FontWeight.bold,fontSize: 18)),backgroundColor: Colors.black,body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: height * 0.015),child: Container(
                margin: EdgeInsets.symmetric(
                  horizontal: width * 0.045,decoration: Boxdecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),color: Colors.red,child: Widget
                             
brackets

            Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: width * 0.06,vertical: height * 0.02),child: TextField(
                style: TextStyle(color: Colors.white),maxLines: maxLines,autofocus: false,decoration: Inputdecoration(
                  decoration...
                ),onChanged: (text) {
                  print("First text field: $text");

              brackets

会不会是因为浮动操作按钮停靠了？

解决方法

这里的问题是文本字段在滚动视图内。

遵循此层次结构：

Scaffold(
  body: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,children: [ ... ] // Put your scroll view elements here.
            ),)
        ),// Put your text field outside the scroll view.
        Padding(
          padding: const EdgeInsets.all(8.0),child: TextField(),),],);

这样，每当屏幕尺寸发生变化时，滚动视图会因扩展小部件而缩小，而 TextField 保持固定在底部并随键盘向上移动。

---

此外，在进行更改后尝试设置 resizeToAvoidBottomInset: false/true 以更好地了解此属性的作用。