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

Question

问题描述

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

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

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

Answer 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