Question

我在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),
        ),
      ),
    ),
  ),
);

Answer 1

以上解决方案均不适用于我的情况，我解决此问题的方法是

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

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

Answer 3

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

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

Answer 4

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

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(),
       ],
   ),
)

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

4 个答案: