美文网首页
flutter 键盘弹出页面跟随上移

flutter 键盘弹出页面跟随上移

作者: yan0_0 | 来源:发表于2024-03-31 19:18 被阅读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 的作用是 确定可滚动控件的物理特性, 常见的有以下四大金刚,可根据实际情况选择使用:

  • BouncingScrollPhysics :允许滚动超出边界,但之后内容会反弹回来。
  • ClampingScrollPhysics : 防止滚动超出边界,夹住 。
  • AlwaysScrollableScrollPhysics :始终响应用户的滚动。
  • NeverScrollableScrollPhysics :不响应用户的滚动。

相关文章

网友评论

      本文标题:flutter 键盘弹出页面跟随上移

      本文链接:https://www.haomeiwen.com/subject/bahbtjtx.html