Flutter：打开键盘时使文本部分可见

Question

我的应用设计有问题。

在图 1 中，您可以看到屏幕，它全部位于脚手架内，中间的白色部分是容器内的列表。 在 imagem 2 上，您可以看到当我单击屏幕底部的 textformfield（位于底部导航栏中）时会发生什么。

因此，当我单击文本字段时，键盘会隐藏文本部分，用户不知道正在输入什么。 当我单击 textformfield 时，有没有办法扩展底部？或者有什么方法可以在我输入时在键盘上的字段中显示已输入的文本？

这是底部栏的代码：

     bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 180.0,
          color: Colors.blue[400],
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(children: [
              Container(
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Container(
                  height: 70,
                  child: DropdownButtonFormField(
                    hint: Text('Choose '),
                    onChanged: (value) {
                      print("VALUE DO DROPDOWN $value");
                      funcionarioDrop = value[1];
                      // var funcionarioDrop = value;
                      // here you can pass it to a variable for example
                    },
                    items: newFuncionariosList,
                  ),
                ),
              ),
              Divider(
                height: 6.0,
              ),
              Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: TextFormField(
                          controller: _codprodController,
                          decoration: InputDecoration(
                            icon: Icon(Icons.add),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            primary: Colors.blue,
                            onPrimary: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(32.0),
                            ),
                          ),
                          child: Text("IR"),
                          onPressed: () async {
                            Response response;
                            Dio dio = new Dio();
                            String url = 'http://192.168.15.2:8090/api/getPeca';
                            response = await dio.post(url,
                                data: {"codprod": _codprodController.text});
                            print(response.statusCode);
                            print(response.data);
                            if (response.data == 'not_found') {
                              BotToast.showText(
                                  text: "Peça não encontrada",
                                  clickClose: true,
                                  backgroundColor: Colors.black26,
                                  align: Alignment(0, 0));
                            } else {
                              produtoDesc =
                                  response.data[0]['Descricao'].toString();
                              produtosList1.add(new ProdutoOs(
                                  cod_produto:
                                      response.data[0]['Codigo'].toString(),
                                  qtd: 24, //int.parse(_qtdPecaController.text),
                                  desc:
                                      response.data[0]['Descricao'].toString(),
                                  numOs: "produtosList1[0].numOs",
                                  codOs: produtosList1[0].codOs,
                                  funcionario: funcionarioDrop,
                                  cliente: "produtosList1[0].cliente",
                                  status: 'produtosList1[0].status'));
                              setState(() {});
                            }
                          },
                        ),
                      )
                    ],
                  ),
                  Divider(
                    height: 8.0,
                  ),
                  Row(
                    children: [
                      Text(produtoDesc == null ? "- - -" : produtoDesc)
                    ],
                  )
                ],
              )
            ]),
          ),
        ),
      ),
```

Answer 1

你可以试试这个。 将您的小部件包裹在 SingleChildScrollView 中，这应该可以解决您的问题。

 SingleChildScrollView (
            child: Container (
           // your widget
           )
    )

此外，这可能会对您有所帮助，您可以将您的身体包裹在 GestureDetector 小部件中，并在 onTap 属性中添加以下内容：

FocusScopeNode currentFocus = FocusScope.of (context);
         currentFocus.unfocus ();

这会导致当你按下屏幕的任何部分时，键盘会被隐藏。

我给你举个例子来说明如何实现它：

body: GestureDetector (
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of (context);
        currentFocus.unfocus ();
      },
      child: SingleChildScrollView (
        child: Container (
          padding: EdgeInsets.all (50),
          child: Column (
            children: [
              TextFormField (
                decoration: InputDecoration (
                  hintText: "Example",
                ),

              ),
            ],
          ),
        ),
      ),
    ));

希望对你有所帮助

Answer 2

由于 TextField 在底部栏中，您可以在 Scaffold 内使用 resizeToAvoidBottomInset: true 来避免脚手架的浮动小部件大小。

你的脚手架应该是这样的，

    Scaffold(
          resizeToAvoidBottomInset: true,
...);