向上滚动时的固定项目 [英] Pin item when scrolling up

问题描述

所以我有以下屏幕:

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

I am looking for a way to make it possible that when the user scrolls up, the widget which contains the progress bar and those 4 data fields (ItemHeader) will scroll up, but the search container (SearchTextField) will be pinned (to the top). Of course when the user will scroll down it should reappear.

我找到的所有解决方案都解决了使用制表符的情况.下面添加了代码，谢谢！

All the solutions that I have found address cases where there is a use of tabs. Code added below, Thanks!

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(),
    );

推荐答案

我只是将标头容器包装在一个 Column 小部件中.

I just wrap your header container in one Column Widget.

    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)),
        ],
        );
    }
    }

这篇关于向上滚动时的固定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！