flutter 键盘弹出页面跟随上移

2024-03-31  本文已影响0人  yan0_0

在写flutter页面布局的时候,有时候会遇到这样的功能,弹框中有一个输入框,输入框位置靠下,点击输入框时页面没有跟随一起上移,就会挡住部分页面,如下所示:


IMG_0088.PNG

如果想要页面跟随键盘一起上移,需要改一下页面的整体布局,采用这样的嵌套:(如果最外层不是Scaffold的话滚动视图不会生效)
Scaffold-->SingleChildScrollView-->Widget

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SingleChildScrollView(
        physics: const ClampingScrollPhysics(),
        child: Container(
          margin: EdgeInsets.only(top: ScreenHelper.topMargin),
          width: ScreenHelper.screenWidth,
          height: ScreenHelper.screenHeight - ScreenHelper.topMargin,
          child: GestureContainer(
            onTap: onTapBg,
            child: Stack(
              children: [
                ///页面细节
              ],
            ),
          ),
        ),
      ),
    );
  }

ScrollPhysics

上面用到了滚动视图,简单提一下里面的physics 属性。
在 Flutter 官方的介绍中,ScrollPhysics 的作用是 确定可滚动控件的物理特性, 常见的有以下四大金刚,可根据实际情况选择使用:

上一篇 下一篇

猜你喜欢

热点阅读