在Flutter中，只有一个小部件浮在键盘上方

Question

我想在键盘上方显示一个“关闭键盘”按钮。

我知道resizeToAvoidBottomInset会影响键盘与应用程序其余部分的交互方式，但是它并不能完全满足我的要求。

我有一个背景图像和其他小部件（在下面的示例中未显示），当显示键盘时，这些小部件不应调整大小和移动。当resizeToAvoidBottomInset属性设置为false时，这是可以的行为。

不过，我想添加一个应该出现在键盘上方的按钮。

我该怎么做？我只希望一个悬浮在键盘上方的小部件，而不是整个应用程序。

这是示例代码：

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var home = MyHomePage(title: 'Flutter Demo Home Page');
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: home,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _getBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _getBody() {
    return Stack(children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/sample.jpg"), fit: BoxFit.fitWidth)),
        // color: Color.fromARGB(50, 200, 50, 20),
        child: Column(
          children: <Widget>[TextField()],
        ),
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          height: 50,
          child: Text("Aboveeeeee"),
          decoration: BoxDecoration(color: Colors.pink),
        ),
      ),
    ]);
  }
}

Answer 1

选中此package,，它可以在键盘上方显示一个关闭按钮。

Answer 2

您的Positioned小部件的bottom为0，用适当的值替换即可完成工作。

MediaQuery.of(context).viewInsets.bottom将为您提供系统UI（在本例中为键盘）覆盖的高度值。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var home = MyHomePage(title: 'Flutter Demo Home Page');
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: home,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _getBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _getBody() {
    return Stack(children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/sample.jpg"), fit: BoxFit.fitWidth)),
        // color: Color.fromARGB(50, 200, 50, 20),
        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 3

要实现基于键盘可见性的动画填充，这是对@ 10101010的最佳答案的一些修改：

如果您希望在键盘更改可视性时update-locale LANG=de_DE.UTF-8 更改为动画 AND ，则需要在浮动子项下添加额外的填充，

1-使用keyboard_visibility flutter pub

要在键盘出现/消失时进行监听，就像这样：

bottom

（可选）您可以编写自己的本机插件，但是已经可以查看发布商的git repo。

2-在 bool isKeyboardVisible = false; @override void initState() { super.initState(); KeyboardVisibilityNotification().addNewListener( onChange: (bool visible) { isKeyboardVisible = visible; }, ); } 中使用可见性标志：

对于微调的动画填充，如下所示：

AnimatedPostioned

3-特定于键盘的动画曲线和同步动画的持续时间

目前，这仍然是known ongoing issue