在flutter应用程序中,键盘向上推动FloatingActionButton

fafcakar  于 2023-06-30  发布在  Flutter
关注(0)|答案(6)|浏览(187)

我试图创建一个简单的待办事项应用程序在扑动与浮动的行动按钮在底部时,点击显示一个警报对话框添加项目的列表。每次我点击按钮时,键盘向上推动操作按钮,导致溢出错误。当键盘打开时,有什么方法可以避免将操作按钮向上推?以下是我拍摄的快照:Snapshot源代码如下:

import 'package:flutter/material.dart';
import '../model/todo_item.dart';

class ToDoScreen extends StatefulWidget {
  @override
  _ToDoScreenState createState() => _ToDoScreenState();
}

class _ToDoScreenState extends State<ToDoScreen> {
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Item',
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: _showFormDialog,
      ),
    );
  }

  void _showFormDialog() {
    var alert = AlertDialog(
      content: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _textEditingController,
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "Item",
                  hintText: "eg. Buy Vegetables",
                  icon: Icon(Icons.note_add)),
            ),
          )
        ],
      ),
      actions: <Widget>[
        FlatButton(
          onPressed: () {
            // _handleSubmit(_textEditingController.text);
            _textEditingController.clear();
          },
          child: Text("Save ToDo"),
        ),
        FlatButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("Cancel"),
        )
      ],
    );
    showDialog(context: context, builder: (BuildContext context) => alert);
  }
}
ma8fv8wu

ma8fv8wu1#

我也遇到了同样的问题,我的浮动操作按钮会被推起来。
我使用属性解决了这个问题:

resizeToAvoidBottomPadding: false, // fluter 1.x
resizeToAvoidBottomInset: false // fluter 2.x

在父Scaffold上。
我用你的代码测试了它,它也解决了这个问题。

uajslkp6

uajslkp62#

您可以检查键盘是否显示,并基于此创建浮动按钮。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: keyboardIsOpened ? 
          null ://or an empty container
          FloatingActionButton(
          tooltip: 'Add Item',
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          onPressed: _showFormDialog,
      ),
    );
  }

在build方法中,你可以通过使用MediaQuery.of(context).viewInsets.bottom来知道键盘是否出现,并将其值保存在一个bool变量keyboardIsOpened中,如下面的代码所示。

@override
Widget build(BuildContext context) {
  bool keyboardIsOpened = MediaQuery.of(context).viewInsets.bottom != 0.0;
cidc1ykv

cidc1ykv3#

为了防止键盘在Flutter应用中向上推动FloatingActionButton(FAB),您可以使用MediaQueryVisibility小部件。
MediaQuery小部件提供对有关当前设备屏幕的信息的访问。通过检查viewInsets.bottom的值,我们可以确定键盘是打开还是关闭。如果viewInsets.bottom为零,则表示键盘已关闭。
要实现此解决方案,请使用Visibility小部件 Package 您的FAB小部件,并将visible属性设置为条件MediaQuery.of(context).viewInsets.bottom == 0.0。这确保FAB在键盘关闭时保持可见,并且在键盘打开时隐藏。
Visibility与FAB配合使用:

Visibility(
  visible: MediaQuery.of(context).viewInsets.bottom == 0.0,
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.chat),
  ),
),

通过这种实现,FAB在键盘关闭时可见,在键盘打开时消失,从而提供一致的用户界面。

bwntbbo3

bwntbbo34#

将您的完整代码 Package 在此

new Container(
child: Column(
children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
              // Your body code
              ] // Widget
             ), // Stack
            ), // SingleChildScrollView
           ), // Expanded
        Container(
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.all(10.0),
        child : 
        // button code here 
        // to make button full width use minWidth: double.infinity,
         ,
        ), //Container
        ], // Widget
        ), // Column
        ), // Container
clj7thdc

clj7thdc5#

将浮动操作按钮与底部导航栏一起 Package 在列中,然后将其作为子项传递到底部导航栏,解决了大部分问题:还要确保添加mainAxisSize:最小值添加到您的列中。

myzjeezk

myzjeezk6#

我试着这么好

Visibility(
      visible: MediaQuery.of(context).viewInsets.bottom == 0.0,
      child: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.chat),
      ),
    ),

相关问题