屏幕键盘出现时隐藏FAB

Question

在Flutter中,如何在屏幕键盘出现时隐藏FAB按钮？

屏幕键盘显示时,FAB按钮会覆盖其他元素.

Answer 1

FloatingActionButton用一个Visibility小部件包裹你，并用一个bool值控制可见性。

片段：

Widget build(context) {
  bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
  return Scaffold(
    body: // ...
    floatingActionButton: Visibility(
      visible: !keyboardIsOpen,
      child: // your FloatingActionButton
    ),
  );
}

当按钮消失和出现时，此解决方案也摆脱了动画。

确保类extends StatefulWidget和你已经为它创建了一个状态

Answer 2

您可以通过检查键盘可见性来实现它,viewInsets并根据它隐藏fab.

例:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "Example",
    home: new FabHideOnKeyboard(),
  ));
}

class FabHideOnKeyboard extends StatefulWidget {
  @override
  _FabHideOnKeyboardState createState() => new _FabHideOnKeyboardState();
}

class _FabHideOnKeyboardState extends State<FabHideOnKeyboard> {
  @override
  Widget build(BuildContext context) {
    final bool showFab = MediaQuery.of(context).viewInsets.bottom==0.0;
    return Scaffold(
      resizeToAvoidBottomPadding: true,
      body:Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("TextField:"),
            TextField()
          ],
        ),
      ),
      floatingActionButton: showFab?Icon(Icons.add):null,
    );
  }
}

希望有所帮助!

Answer 3

我希望这就是您正在寻找的

Scaffold(resizeToAvoidBottomInset: false)