简体   繁体   English

键盘隐藏 Flutter 上的文本字段

[英]Keyboard hides textfield on Flutter

I have an app that has a bottomappbar with a textformfield, but when the user tries to insert data there the keyboard hides the text being typed.我有一个应用程序,它有一个带有 textformfield 的底部应用程序栏,但是当用户尝试在那里插入数据时,键盘会隐藏正在输入的文本。

I tried "resizeToAvoidBottomInset: true" and didnt worked, also tried to put a SingleChildScrollView on the body of the app and got "RenderBox was not laid out: RenderRepaintBoundary#32f0a relayoutBoundary=up1 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1785 pos 12: 'hasSize'".我尝试了“resizeToAvoidBottomInset:true”但没有成功,还尝试在应用程序主体上放置一个 SingleChildScrollView 并得到“RenderBox 未布置:RenderRepaintBoundary#32f0a relayoutBoundary=up1 NEEDS-PAINT 'package:flutter/src/rendering/ box.dart':断言失败:第 1785 行 pos 12:'hasSize'"。

I need a way to make the bottom part "expand" to the top of the keyboard when the user is typing or a way to show in the screen the text that is being typed.我需要一种在用户键入时使底部“扩展”到键盘顶部的方法,或者一种在屏幕上显示正在键入的文本的方法。

How can I solve that?我该如何解决? I have tried many ways and nothing seems to work.我尝试了很多方法,但似乎没有任何效果。

The structure of my app is:我的应用程序的结构是:

在此处输入图像描述

The code:编码:

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text(
          "xx",
        ),
        //+ produtosList1[0].cod_produto),
        actions: <Widget>[
          Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: () {
                  showDialog(
                      //dialog content
                      );
                },
                child: Icon(
                  Icons.search,
                  size: 26.0,
                ),
              )),
        ],
      ),
      drawer: Drawer(
          elevation: 20.0,
          child: ListView(padding: EdgeInsets.zero, children: <Widget>[
          ]
           //appbar content
          )),
      body: Column(
        children: [
          Container(
            color: Colors.blue,
            child: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Column(
                  children: [
                    Row(children: [
                      Text(
                         "xxx",
                          style: TextStyle(
                            color: Colors.white,
                          ),
                          overflow: TextOverflow.ellipsis),
                    ]),
                    Row(children: [
                      Text(
                          "xxxx",
                        style: TextStyle(color: Colors.white),
                      )
                    ])
                  ],
                )),
          ),
          Container(
            color: Colors.blue,
            child: Padding(
                padding: const EdgeInsets.fromLTRB(0, 8.0, 0, 8.0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Text("xxxx",
                          style: TextStyle(fontWeight: FontWeight.bold),
                          overflow: TextOverflow.ellipsis),
                    ),
                    Expanded(
                        flex: 1,
                        child: Text(
                          "xxxxx",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        )),
                    Expanded(
                        flex: 4,
                        child: Text(
                          "xxxx",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        )),
                    Expanded(
                        flex: 4,
                        child: Text(
                          "xxxx",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        )),
                  ],
                )),
          ),
          Divider(
            height: 5.0,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: produtosList1.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.fromLTRB(0.0, 4.0, 0.0, 4.0),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 2,
                          child: Text(
                         "xxxx"
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Text(
                           "xxxxx",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ),
                        Expanded(
                          flex: 4,
                          child: Text(
                              "xxxx",
                              style: TextStyle(fontWeight: FontWeight.bold),
                              overflow: TextOverflow.ellipsis),
                        ),
                        Expanded(
                          flex: 4,
                          child: Text(
                             "xxxxx",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 12),
                              overflow: TextOverflow.ellipsis),
                        ),
                      ],
                    ),
                  );
                }),
          )
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Form(
          child: Container(
            height: 180.0,
            color: Colors.blue[400],
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView(children: [
                Container(
                  height: 50,
                  decoration: BoxDecoration(
                    color: Colors.white,
                  ),
                  child: DropdownButtonFormField(
                    hint: Text('Choose '),
                    onChanged: (value) {
                   //dropdown values
                    },
                    items: newFuncionariosList,
                  ),
                ),
                Divider(
                  height: 6.0,
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 2,
                      child: TextFormField(
                        controller: _codprodController,
                        decoration: InputDecoration(
                          icon: Icon(Icons.add),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: ElevatedButton(
                        
                       //button content
                      ),
                    )
                  ],
                ),
                Divider(
                  height: 8.0,
                ),
                Row(
                  children: [
                    Expanded(
                        flex: 6,
                        child: Text(produtoDesc == null ? "- - -" : produtoDesc,
                            overflow: TextOverflow.ellipsis)),
                    Expanded(
                      flex: 2,
                      child: TextFormField(
                        keyboardType: TextInputType.number,
                        controller: _qtdController,
                        decoration: InputDecoration(hintText: "qtd"),
                      ),
                    ),
                    Expanded(
                        flex: 2,
                        child: ElevatedButton(
                          //button content
                            ))
                  ],
                )
              ]),
            ),
          ),
        ),
      ),
    );
  }

Fixed problem textfield was hidden by keyboard修复了文本字段被键盘隐藏的问题

new Scaffold(
      appBar: new AppBar(
          ...
      resizeToAvoidBottomPadding: true,
      ....

use MediaQuery.of(context).viewInsets.bottom and add it to your bottom navigation height使用MediaQuery.of(context).viewInsets.bottom并将其添加到您的底部导航高度

        child: Form(
          child: Container(
            height: 180.0 + MediaQuery.of(context).viewInsets.bottom,
            color: Colors.blue[400],
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView(children: [
                Container(
                  height: 50,
                  decoration: BoxDecoration(
                    color: Colors.white,
                  ),
                ),```

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM