flutter - 向上滚动时的固定项目

Question

所以我有以下屏幕:



我正在寻找一种方法，使得当用户向上滚动时，包含进度条和这4个数据字段(ItemHeader)的小部件将向上滚动，但是搜索容器(SearchTextField)将被固定(到顶部) )。当然，当用户向下滚动时，它应该会重新出现。

我发现的所有解决方案都解决了使用制表符的情况。下面添加了代码，谢谢!

Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: MyAppBar(
        true,
        title: constructParentName,
        parentTitle: siteParentName,
      ),
      endDrawer: MyDrawer(),
      body: _isLoading
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Column(
              children: <Widget>[
                ItemHeader("24", "23", "33"), //This is the widget I would like to hide while scrolling up
                SearchTextField(controller),
                Expanded(
                  child: ListView.builder(
                    itemBuilder: (BuildContext context, int i) {
                      return filter == null || filter == ""
                          ? ItemDetail(
                              itemId: subconstructs[i].subconstructId,
                              itemName: subconstructs[i].subconstructName,
                              tasksDone: subconstructs[i].tasksDone,
                              tasksRejected: subconstructs[i].tasksRejected,
                              tasksPending: subconstructs[i].tasksPending,
                              authToken: authToken,
                              constructParentId: constructParentId,
                              siteParentId: siteAncestorId,
                              callBack: () {
                                return PageEnum.Subconstructs;
                              },
                            )
                          : subconstructs[i]
                                  .subconstructName
                                  .toString()
                                  .toLowerCase()
                                  .contains(filter.toLowerCase())
                              ? ItemDetail(
                                  itemId: subconstructs[i].subconstructId,
                                  itemName: subconstructs[i].subconstructName,
                                  tasksDone: subconstructs[i].tasksDone,
                                  tasksRejected: subconstructs[i].tasksRejected,
                                  tasksPending: subconstructs[i].tasksPending,
                                  authToken: authToken,
                                  constructParentId: constructParentId,
                                  siteParentId: siteAncestorId,
                                  callBack: () {
                                    return PageEnum.Subconstructs;
                                  },
                                )
                              : new Container();
                    },
                    itemCount: subconstructs.length,
                  ),
                ),
              ],
            ),
      bottomNavigationBar: buildBottomNavBar(),
    );

Answer 1

我只是将您的 header 容器包装在一个Column小部件中。

    class ListViewDemo extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return ListViewDemoState();
    }
    }

    class ListViewDemoState extends State<ListViewDemo> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
            title: Text("ListView"),
            ),
            body: Column(
            children: <Widget>[
                Column(
                children: <Widget>[
                    Container(
                    color: Colors.red,
                    child: Text(
                        "  Header1",
                        style: new TextStyle(fontSize: 16.0, color: Colors.black),
                    ),
                    ),
                    Container(
                    color: Colors.blue,
                    child: Text(
                        "  Header2",
                        style: new TextStyle(fontSize: 16.0, color: Colors.black),
                    ),
                    ),
                ],
                ),
                Expanded(
                child: ListView.builder(
                    itemCount: 100,
                    itemExtent: 50.0,
                    itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text("$index"));
                    }),
                )
            ],
            ));
    }
    }

方法2

    import 'package:flutter/material.dart';
    import 'dart:math' as math;

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('List Demo')),
            body: CollapsingList(),
        ),
        );
    }
    }

    class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
    _SliverAppBarDelegate({
        @required this.minHeight,
        @required this.maxHeight,
        @required this.child,
    });

    final double minHeight;
    final double maxHeight;
    final Widget child;

    @override
    double get minExtent => minHeight;

    @override
    double get maxExtent => math.max(maxHeight, minHeight);

    @override
    Widget build(
        BuildContext context, double shrinkOffset, bool overlapsContent) {
        return new SizedBox.expand(child: child);
    }

    @override
    bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
        return maxHeight != oldDelegate.maxHeight ||
            minHeight != oldDelegate.minHeight ||
            child != oldDelegate.child;
    }
    }

    class CollapsingList extends StatelessWidget {


    SliverPersistentHeader makeHeader(String headerText) {
        return SliverPersistentHeader(
        pinned: true,
        delegate: _SliverAppBarDelegate(
            minHeight: 150.0,
            maxHeight: 150.0,
            child: Container(
                color: Colors.lightBlue, child: Center(child: Text(headerText))),
        ),
        );
    }


    @override
    Widget build(BuildContext context) {
        return CustomScrollView(
        slivers: <Widget>[
            SliverFixedExtentList(
            itemExtent: 150.0,
            delegate: SliverChildListDelegate(
                [
                Container(
                    color: Colors.red,
                    child: Center(
                    child: Text(
                        "Header Section 1",
                        style: new TextStyle(fontSize: 16.0, color: Colors.black),
                    ),
                    ),
                )
                ],
            ),
            ),
            makeHeader('Header Section 2'),
            SliverFixedExtentList(
                itemExtent: 50.0,
                delegate:
                    SliverChildBuilderDelegate((BuildContext context, int index) {
                return new Container(
                    alignment: Alignment.center,
                    child: new Text('List item $index'),
                );
                }, childCount: 100)),
        ],
        );
    }
    }