如何在 Flutter 的键盘上显示容器上方

Posted 2023-03-17

【中文标题】如何在 Flutter 的键盘上显示容器上方

【英文标题】：How to show container above on keyboard in Flutter

【发布时间】：2022-01-14 06:31:13

【问题描述】：

如果弹出keyboard，我将按照此堆栈溢出接受答案Link 在keyboard 正上方显示container 小部件。但问题是当我在我的代码上尝试这个时，如果keyboard 弹出，这个container 会被隐藏。如何解决这个问题，下面是到目前为止我尝试过的示例 dart 代码。

TestPage.dart

class TestPage extends StatefulWidget 
  const TestPage(Key? key) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();


class _TestPageState extends State<TestPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () 
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => ForgotPasswordPage()));
            ,
            child: Text('Click'),
          ),
        ),
      ),
    );
  

ForgotPasswordPage.dart

class ForgotPasswordPage extends StatefulWidget 
  const ForgotPasswordPage(
    Key? key,
  ) : super(key: key);

  @override
  _ForgotPasswordPageState createState() => _ForgotPasswordPageState();


class _ForgotPasswordPageState extends State<ForgotPasswordPage> 
  final TextEditingController mobileNumber = TextEditingController();
  _ForgotPasswordPageState();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.red,
        appBar: AppBar(
          backgroundColor: Colors.red,
          elevation: 0,
        ),
        body: Stack(children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[TextField()],
            ),
          ),
          Positioned(
            bottom: MediaQuery.of(context).viewInsets.bottom,
            left: 0,
            right: 0,
            child: Container(
              height: 50,
              child: Text("Aboveeeeee"),
              decoration: BoxDecoration(color: Colors.pink),
            ),
          ),
        ])
        );
  

【问题讨论】：

@AnmolMishra 我指的是弹出时键盘上方的容器小部件

【参考方案1】：

实际上有一个包，如果你在底部小部件上打开一个键盘，包名keyboard_attachable也会上升。

我也在用这个。

在包装上注明和这样的例子

return Scaffold(
  body: SafeArea(
    child: FooterLayout(
        footer: Container(
          height: 70.0,
          color: Colors.blue,
        ),
        child: Column(
          children: const [
            Center(child: TextField()),
          ],
        )),
  ),
);

当我复制代码时，它对我的​​工作正常，顺便说一下使用 nullsafety

testpage.dart

class TestPage extends StatefulWidget 
  const TestPage(Key? key) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();


class _TestPageState extends State<TestPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () 
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => ForgotPasswordPage()));
            ,
            child: Text('Click'),
          ),
        ),
      ),
    );
  

forgotpasswordpage.dart

class ForgotPasswordPage extends StatefulWidget 
  const ForgotPasswordPage(
    Key? key,
  ) : super(key: key);

  @override
  _ForgotPasswordPageState createState() => _ForgotPasswordPageState();


class _ForgotPasswordPageState extends State<ForgotPasswordPage> 
  final TextEditingController mobileNumber = TextEditingController();
  _ForgotPasswordPageState();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        elevation: 0,
      ),
      body: SafeArea(
        child: FooterLayout(
            footer: Container(
              height: 70.0,
              color: Colors.blue,
            ),
            child: Column(
              children: const [
                Center(child: TextField()),
              ],
            )),
      ),
    );
  

【讨论】：

我认为使用包不是解决这个问题的方法。

每个包都有一个仓库，你可以复制代码或者如果你不想放包。

@ArbiterChil 这里同样的问题，当键盘弹出意味着背面时附件页脚（容器）隐藏

@MohammedNabil 因此你使用这个包？我更新我的答案我通常在我项目的某些页面下面的一些 texfield 上这样做。

@ArbiterChil 仍然不起作用，这是我的代码。 return Scaffold( resizeToAvoidBottomInset: false, body: SafeArea( child: FooterLayout( footer: Container( height: 30.0, color: Colors.black, ), child: TextField()), ), );

【参考方案2】：

导入'package:flutter/material.dart';

  class ForgotPasswordPage extends StatefulWidget 
  const ForgotPasswordPage(
  Key key,
 ) : super(key: key);

 @override
 _ForgotPasswordPageState createState() => _ForgotPasswordPageState();
 

  class _ForgotPasswordPageState extends State<ForgotPasswordPage> 
  final TextEditingController mobileNumber = TextEditingController();
   _ForgotPasswordPageState();

 @override
 Widget build(BuildContext context) 
  return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.red,
      appBar: AppBar(
       backgroundColor: Colors.red,
      elevation: 0,
    ),
    body: Stack(
     children:[
     Container(
      child: Column(
        children: [
       TextField()
        ],
       ),
    ),
    Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom,
       left: 0,
       right: 0,
    child: Container(
    height: 50,
    child: Text("Aboveeeeee"),
        decoration: BoxDecoration(color: Colors.pink),
   ),
   ),
   ])
   );
   
 !

[结果] https://i.stack.imgur.com/9TMix.jpg

【讨论】：

它不起作用，如果我删除堆栈小部件，那么它会显示错误小部件。

现在检查我已编辑

将该代码粘贴到 dartpad 你会发现很多错误

括号和循环错误你可以设置它

你想做什么才能让它正常工作