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

郭大鹏
  • 47

问题描述

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

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

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

回复
阅读 2.2k
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏