Flutter实现中间滑动，底部固定

最新推荐文章于 2024-09-12 14:00:58 发布

巧克力的口袋

最新推荐文章于 2024-09-12 14:00:58 发布

阅读量7.1k

点赞数 3

分类专栏： flutter

本文链接：https://blog.csdn.net/zhs961120/article/details/106918006

版权

flutter 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简介：flutter搭建组件写界面时，经常会遇到界面中间滑动，底部固定的需求，这里与AppBar和BottomNavigationBar区分开来，两者的功能和适用情况是不一样的，BottomNavigationBar是适用于底部导航栏的。下图就是实现的类似界面效果：（中间信息滑动，底部删除按钮固定）

在这里插入图片描述
flutter实现代码：

body: MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: Padding(
                padding: EdgeInsets.fromLTRB(
                    _windowPadding.left,
                    0,
                    _windowPadding.right,
                    _windowPadding.bottom),
                child:Flex(
                    direction: Axis.vertical,
                    children: <Widget>[
                      _getStatusBar(),
                      getTitleBar(),
                      //最主要的代码块Expanded这块
                      Expanded(
                        child: Column(
                          children: <Widget>[
                            Flexible(
                              child: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                  //头像---添加信息部分
                                    _getApplyTo(),
                                    _getStyle(),
                                    _getSignInfo(),
                                  ],
                                ),
                              ),
                            ),
                            Container(
                                height: 52.0,
                                width: 375.0,
                                decoration: BoxDecoration(
                                    color: Colors.white
                                ),
                                margin: EdgeInsets.only(top: 20.0, bottom: 64.0),
                                child: Container(
                                  alignment: Alignment.center,
                                  child: Label.textBtn(
                                    strings.delete,
                                    fontSize: 17.0,
                                    onTab: () => print("你点击了删除哈~"),
                                  ),
                                )
                            )
                          ],
                        );
                      )
                      //最主要的代码块Expanded这块
                    ]
                )
            )
        )

组件结构：
在这里插入图片描述
详解：为什么想要写这篇blog呢？因为对于新手而言，Flexible组件可能并不熟悉，在Column中包括两个子组件SingChildScrollView 和Container，我们希望SingChildScrollView可以在中间滑动，Container固定在底部，但是会引起溢出（界面效果就是底部出现像黄黑色栏杆的标识）问题，所以在SingChildScrollView 外嵌套了一层Flexible。
What’s Flexible ?
一个来控制[Row]，[Column]或[Flex]的子代的弯曲方式的控件。具体可以看Dart的源码解释，这个真的很棒，要学会看！
希望能帮助到大家，欢迎大家发表自己的言论哦！❤