Flutter：故意隐藏键盘下的Stack项目

Posted 2023-02-23

【中文标题】Flutter：故意隐藏键盘下的Stack项目

【英文标题】：Flutter: Intentionally hide Stack items under keyboard

【发布时间】：2019-07-16 14:28:40

【问题描述】：

我在 Stack 中有一些小部件。

当键盘出现时，Stack 中使用Positioned(bottom: 0) 小部件显式定位在底部的小部件将转移到键盘顶部。

我怎样才能防止这种情况，并使一些小部件保持其位置，无论键盘是否在视图中？

例如，我希望“离线模式”标签位于键盘下方，而不是键盘上方。

这是此页面小部件外观的粗略草图：

Scaffold(
   body: Stack(
       children: [
           LoginImage(),
           LoginForm(),
           ConnectedToInternet(),
       ],
   ),
)

这是ConnectedToInternet 小部件的样子-

Positioned(
  bottom: 0,
  child: Container(
    width: MediaQuery.of(context).size.width,
    color: Colors.grey[900],
    child: Padding(
      padding: const EdgeInsets.all(4.0),
      child: Center(
        child: Text(
          "Offline mode",
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    ),
  ),
);

【问题讨论】：

你的问题和这个问题类似吗？ ***.com/questions/46551268/…

类似，但就我而言，我只想对选定的小部件执行此操作，而不是全部。

你能添加一个所需行为的视觉示例吗？

【参考方案1】：

我通过设置 resizeToAvoidBottomInset: false 来解决这个问题的方式，

Scaffold(
  appBar: AppBar()
  drawer: AppDrawer(),
  resizeToAvoidBottomInset: false,
  body: Stack(
    children:[
          // widgets 
        ]
       )
 )

【讨论】：

此节目被标记为正确答案。

【参考方案2】：

在堆栈中使用 Positioned(bottom: 0.0) 小部件定位背景图像时遇到了类似的问题。当键盘出现时，图像移动到键盘的顶部。 通过执行以下操作解决了问题。

Widget build(BuildContext context) 
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          _bottomImageStack(),
          Scaffold(
            appBar: AppBar(),
            backgroundColor: Colors.transparent,
            body: _mainBody(),
          ),
        ],
      ),
    );
  

Widget _bottomImageStack() 
    return Positioned(
      bottom: 0.0,
      child: Container(
        height: 235,
        width: MediaQuery.of(context).size.width,
        child: SvgPicture.asset(
          AssetPaths.LOGIN_SCREEN_BG_SVG,
          alignment: Alignment.bottomRight,
        ),
      ),
    );
  

Widget _mainBody() 
    return ListView(
      children: <Widget>[..Other widgets go here..],
    );
  

【讨论】：

这对我有用。太感谢了。我所做的唯一更改是，由于我的用例，我必须将 Positioned Widget 放在堆栈中的 Scaffold 之后。非常感谢！

为什么你这么聪明，这对我最后一年的项目有很大帮助

【参考方案3】：

您可以将 stack 放置为 listview 的子级，这样键盘就不会将您的小部件移到顶部：

     Scaffold(
       body: ListView(
               children: <Widget>[
                 Stack(
                 children: [
                    LoginImage(),
                    LoginForm(),
                    ConnectedToInternet(),
                 ],
               ),
             ]
           ),
         )

【讨论】：

这不会完全起作用，因为登录表单里面也有 ListView。使用Expanded 或shrinkwrap 也不会修复BoxConstraints forces an infinite height. 消息。

【参考方案4】：

尝试设置容器的高度以匹配页面高度，如下所示：

Positioned(
  bottom: 0,
  child: Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    color: Colors.grey[900],
    child: Padding(
      padding: const EdgeInsets.all(4.0),
      child: Center(
        child: Text(
          "Offline mode",
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    ),
  ),
);

您可能还需要像这样更改堆栈中的位置：

Scaffold(
   body: Stack(
       children: [
           LoginImage(),
           ConnectedToInternet(),
           LoginForm(),
       ],
   ),
)

【参考方案5】：

如果您可以指定小部件的高度，您可以使用Positioned(top) 来解决它。 ConnectedToInternet 可能看起来像：

var widgetHeight = 40.0; //replaced with your height
Positioned(
  top: MediaQuery.of(context).size.height - widgetHeight,
  child: Container(
    height: widgetHeight,
    child: SizedBox(height: widgetHeight), //replaced with your widget
  )
)