Flutter: 页面上半部分固定 下半部分不定长度列表

问题描述

Flutter 实现的一个页面。页面从上到倒下是 轮播,另一个轮播,一个可以吸顶的条,用来筛选,这些是高度固定的,下面是一个里面每一项高度不固定的列表。

然后下面这个列表让我很头疼,我找到的教程都是列表内部有很多条的,运行很不错,能吸顶。但是我在测试1条的情况时,因为页面长度不够,吸顶吸不上去了,就是页面不能滚动到可以吸顶的位置了。

问题出现的环境背景及自己尝试过哪些方法

➜  ~ dart --version
Dart VM version: 2.7.1 (Thu Jan 23 13:02:26 2020 +0100) on "macos_x64"
➜  ~ flutter --version
Flutter 1.12.13+hotfix.7 • channel stable •
https://github.com/flutter/flutter.git
Framework • revision 9f5ff2306b (3 days ago) • 2020-01-26 22:38:26 -0800
Engine • revision a67792536c
Tools • Dart 2.7.0

我用 sliverfillremaining 填充过底部,但是填充的太长了,其实也没啥依据的,大概感觉 SliverList 可能高度不确定吧。

我还尝试 sliverfillremaining 内部放一个 ListView 显示很完美,吸顶特别棒,但是滚动老是里面先滚,不知道咋控制外面先滚动。

总之我是第一次写 Flutter 页面,很不理解到底都发生了什么。

运行是视频

运行时的截图

相关代码

这是 Git 地址。有兴趣的可以克隆下来试试。

出现问题代码的 Git

你期待的结果是什么?实际看到的错误信息又是什么?

我期待的结果是即使下面的列表项目很少,也能让筛选用的条置顶。

阅读 1.7k
评论
    1 个回答

    用 NestedScrollView 解决的。可能是 CustomScrollView 太原始了……

    运行是视频

    Git 上更新的这个问题解决的代码。

    下面是这次修改的片段。

    class Home extends StatefulWidget {
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: AppColor.bColor,
          appBar: PreferredSize(
            child: AppBar(
              backgroundColor: AppColor.red,
              flexibleSpace: Stack(
                children: <Widget>[
                  Positioned(
                    child: Image.asset(
                      'assets/images/logo.png',
                      width: ScreenUtil().setWidth(100),
                    ),
                    left: ScreenUtil().setWidth(324),
                    right: ScreenUtil().setWidth(324),
                    bottom: ScreenUtil().setWidth(36),
                  ),
                ],
              ),
            ),
            preferredSize: Size.fromHeight(ScreenUtil().setWidth(180)),
          ),
          body: NestedScrollView(
            headerSliverBuilder: (context, boxIsScrolled) {
              return [
                SliverToBoxAdapter(
                  child: Column(
                    children: <Widget>[
                      Search(),
                      Banner(),
                      Msg(),
                    ],
                  ),
                ),
              ];
            },
            body: CustomScrollView(slivers: <Widget>[
              SliverPersistentHeader(
                pinned: true,
                delegate: _SliverAppBarDelegate(
                  minHeight: ScreenUtil().setWidth(90),
                  maxHeight: ScreenUtil().setWidth(90),
                  child: FilterBar(),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return PropertyListItem(
                      id: index,
                    );
                  },
                  childCount: 1,
                ),
              )
            ]),
          ),
        );
      }
    }

    这个群里问的,还是得有个群哪……
    群号:181398081

      相似问题
      推荐文章