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

Question

如果弹出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),
            ),
          ),
        ])
        );
  }
}

Answer 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()),
              ],
            )),
      ),
    );
  }
}

Answer 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