flutter - 允许 GridView 重叠 SliverAppBar

Question

我正在尝试从早期的 Material Design 规范(开放动画演示)中重现以下示例:

到现在我已经能够产生滚动效果，但是内容的重叠仍然缺失。我找不到如何正确执行此操作。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Title'),
            expandedHeight: 200.0,
            primary: true,
            pinned: true,
          ),
          SliverFixedExtentList(
            itemExtent: 30.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int i) => Text('Item $i')
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

我设法使用 ScrollController 和一些技巧获得了这个功能:

代码如下:

  ScrollController _scrollController;
  static const kHeaderHeight = 235.0;

  double get _headerOffset {
    if (_scrollController.hasClients) if (_scrollController.offset > kHeaderHeight)
      return -1 * (kHeaderHeight + 50.0);
    else
      return -1 * (_scrollController.offset * 1.5);

    return 0.0;
  }

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController()..addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return StackWithAllChildrenReceiveEvents(
      alignment: AlignmentDirectional.topCenter,
      children: [
        Positioned(
          top: _headerOffset,
          child: Container(
            height: kHeaderHeight,
            width: MediaQuery.of(context).size.width,
            color: Colors.blue,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 20.0, right: 20.0),
          child: Feed(controller: _scrollController, headerHeight: kHeaderHeight),
        ),
      ],
    );
  }

为了使 Feed() 不与蓝色容器重叠，我只是将它的第一个子元素设为具有所需高度属性的 SizedBox。

请注意，我使用的是经过修改的 Stack 类。那是为了让堆栈中的第一个 Widget(蓝色容器)检测到按下，所以它适合我的使用；不幸的是，此时默认的 Stack 小部件有一个问题，您可以通过 https://github.com/flutter/flutter/issues/18450 阅读更多相关信息。 .

StackWithAllChildrenReceiveEvents 代码可以在 https://github.com/flutter/flutter/issues/18450#issuecomment-575447316 上找到.