Flutter 仅使一个小部件浮动在键盘上方

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

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

我有一个背景图像和其他小部件（下面的示例中没有显示），当显示键盘时，这些小部件不应该调整大小，也不应该移动。当

resizetoavidbottominset

属性设置为false时，这是一个ok行为

但是，我想添加一个按钮，它应该出现在键盘上方

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

我该怎么做？我只想在键盘上方浮动一个小部件，而不是所有的应用程序

下面是一个示例代码：

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

导入'dart:async'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
var home=MyHomePage（标题：“颤振演示主页”）；
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：家，
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
resizeToAvoidBottomInset:false，
appBar:appBar(
标题：文本（widget.title），
),
正文：_getBody（），
浮动操作按钮：浮动操作按钮(
按下：（）{}，
工具提示：“增量”，
子：图标（Icons.add），
),
);
}
小部件_getBody（）{
返回堆栈（子级：[
容器(
装饰：盒子装饰(
图像：装饰图像(
图像：AssetImage（“assets/sample.jpg”），fit:BoxFit.fitWidth），
//颜色：颜色。来自argb（50,200,50,20），
子：列(
子项：[TextField（）]，
),
),
定位(
底部：0，
左:0,，
右:0,，
子：容器(
身高：50，
子项：文本（“上文”），
装饰：盒子装饰（颜色：彩色。粉色），
),
),
]);
}
}

选中此项，它会在键盘上方显示一个“取消”按钮。

您的

定位的
小部件底部的
值为0，替换为适当的值应该可以完成此任务

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

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

导入'dart:async'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
var home=MyHomePage（标题：“颤振演示主页”）；
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：家，
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
resizeToAvoidBottomInset:false，
appBar:appBar(
标题：文本（widget.title），
),
正文：_getBody（），
浮动操作按钮：浮动操作按钮(
按下：（）{}，
工具提示：“增量”，
子：图标（Icons.add），
),
);
}
小部件_getBody（）{
返回堆栈（子级：[
容器(
装饰：盒子装饰(
图像：装饰图像(
图像：AssetImage（“assets/sample.jpg”），fit:BoxFit.fitWidth），
//颜色：颜色。来自argb（50,200,50,20），
子：列(
子项：[TextField（）]，
),
),
定位(
底部：MediaQuery.of（context）.viewInsets.bottom，
左:0,，
右:0,，
子：容器(
身高：50，
子项：文本（“上文”），
装饰：盒子装饰（颜色：彩色。粉色），
),
),
]);
}
}

为了实现基于键盘可视性的动画填充，以下是对@10101010伟大答案的一些修改：

如果要在键盘将可见性更改为动画时更改底部
，并且要在浮动子项下添加额外的填充，则：

1-使用颤振酒吧
要在键盘出现/消失时收听，请执行以下操作：

  bool isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();

    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        isKeyboardVisible = visible;
      },
    );
  }

Widget _getBody() {
    double bottomPadding = 0;
    if (isKeyboardVisible) {
      // when keyboard is shown, our floating widget is above the keyboard and its accessories by `16`
      bottomPadding = MediaQuery.of(context).viewInsets.bottom + 16;
    } else {
      // when keyboard is hidden, we should have default spacing
      bottomPadding = 48; // MediaQuery.of(context).size.height * 0.15;
    }

    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()],
        ),
      ),
      AnimatedPositioned(
        duration: Duration(milliseconds: 500),
        bottom: bottomPadding,
        left: 0,
        right: 0,
        child: Container(
          height: 50,
          child: Text("Aboveeeeee"),
          decoration: BoxDecoration(color: Colors.pink),
        ),
      ),
    ]);
}

您可以选择编写自己的本机插件，但它已经在那里，您可以查看酒吧的git repo

2-使用
动画发布中的可见性标志
：
对于微调的动画填充，如下所示：

  bool isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();

    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        isKeyboardVisible = visible;
      },
    );
  }

Widget _getBody() {
    double bottomPadding = 0;
    if (isKeyboardVisible) {
      // when keyboard is shown, our floating widget is above the keyboard and its accessories by `16`
      bottomPadding = MediaQuery.of(context).viewInsets.bottom + 16;
    } else {
      // when keyboard is hidden, we should have default spacing
      bottomPadding = 48; // MediaQuery.of(context).size.height * 0.15;
    }

    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()],
        ),
      ),
      AnimatedPositioned(
        duration: Duration(milliseconds: 500),
        bottom: bottomPadding,
        left: 0,
        right: 0,
        child: Container(
          height: 50,
          child: Text("Aboveeeeee"),
          decoration: BoxDecoration(color: Colors.pink),
        ),
      ),
    ]);
}

Widget\u getBody（）{
双层底填充=0；
如果（isKeyboardVisible）{
//当显示键盘时，我们的浮动小部件位于键盘及其附件上方16度`
bottomPadding=MediaQuery.of（context）.viewInsets.bottom+16；
}否则{
//当键盘被隐藏时，我们应该有默认的间距
bottomPadding=48；//MediaQuery.of（context）.size.height*0.15；
}
返回堆栈（子级：[
容器(
装饰：盒子装饰(
图像：装饰图像(
图像：AssetImage（“assets/sample.jpg”），fit:BoxFit.fitWidth），
//颜色：颜色。来自argb（50,200,50,20），
子：列(
子项：[TextField（）]，
),
),
动画定位(
持续时间：持续时间（毫秒：500），
底部：底部填充，
左:0,，
右:0,，
子：容器(
身高：50，
子项：文本（“上文”），
装饰：盒子装饰（颜色：彩色。粉色），
),
),
]);
}