flutter 当屏幕键盘出现时隐藏FAB

nzk0hqpo  于 2023-05-08  发布在  Flutter
关注(0)|答案(6)|浏览(130)

在Flutter中,如何使FAB button在屏幕键盘出现时隐藏?
FAB按钮在屏幕上显示键盘时覆盖其他元素。

sczxawaw

sczxawaw1#

Widget build(context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: // ...
    body: // ...
    floatingActionButton: Visibility(
      child: // your FloatingActionButton
    ),
  );
}
3duebb1j

3duebb1j2#

Widget build(context) {

 bool iskeyboardOpen = MediaQuery.of(context).viewInsets.bottom != 0;
  return Scaffold(
    body: Container()// ...
    floatingActionButton: Visibility(
      visible: !iskeyboardOpen,
      child: DashboardActionButton(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (c) {
                return const YourPage();
              })).then((_) {
                AsyncOrderActions(store).fetchData();
              });
            },
            svgIcon: 'send-white',
          ), // your FloatingActionButton
    ),
  );
}
i5desfxk

i5desfxk3#

您可以通过使用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,
    );
  }
}
7fhtutme

7fhtutme4#

使用Visibility小部件 Package FloatingActionButton,并使用bool值控制可见性。
代码段:

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

此解决方案还消除了按钮消失和出现时的动画。
确保类extends StatefulWidget和您已经为其创建了状态

wpcxdonn

wpcxdonn5#

我希望这就是你要找的

Scaffold(resizeToAvoidBottomInset: false)
kadbb459

kadbb4596#

为了将来的参考,这是一个遵循https://github.com/flutter/flutter/issues/26100的基本思想的实现,但使用现有的mixin来减少怪癖和代码:

class FixedCenterDockedFabLocation extends StandardFabLocation
    with FabCenterOffsetX, FabDockedOffsetY {
  const FixedCenterDockedFabLocation();

  @override
  String toString() => 'FloatingActionButtonLocation.fixedCenterDocked';

  @override
  double getOffsetY(
      ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    final double contentBottom = scaffoldGeometry.contentBottom;
    final double bottomMinInset = scaffoldGeometry.minInsets.bottom;
    if (bottomMinInset > 0) {
      // Hide if there's a keyboard
      return contentBottom;
    }
    return super.getOffsetY(scaffoldGeometry, adjustment);
  }
}

然后,您可以像floatingActionButtonLocation: const FixedCenterDockedFabLocation(),一样简单地使用它(不要忘记const ;)).
请随意使用此代码,没有限制或归属。

相关问题