Flutter - 在Flexible空间中实现带有重叠内容的App bar滚动

Question

我正在尝试使用Flutter在可伸缩空间中重现具有重叠内容的App栏滚动行为。

该行为在此处演示：

http://karthikraj.net/2016/12/24/scrolling-behavior-for-appbars-in-android/

我已经使用SliverAppBar创建了可折叠式App栏，但是我想要创建这种

由于我找不到任何onScroll回调，所以我无法使用Stack，目前我已创建带有flexibleSpace的应用栏，应用栏可以在滚动时折叠：

Scaffold(
    body: NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) => <Widget>[
                SliverAppBar(
                  forceElevated: innerBoxIsScrolled,
                  pinned: true,
                  expandedHeight: 180.0,
                ),
              ],
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) => Text(
              "Item $index",
              style: Theme.of(context).textTheme.display1,
            ),
      ),
    ),
  );

编辑：我想要创建的示例

- CodePLeX

---

你能做到这个吗？我正在尝试实现完全相同的效果，但是它并不顺畅。如果你已经实现了，能否分享一些提示？ - Milind Mevada

Answer 1

ScrollView需要一个ScrollController，它是一个Listenable对象，可以在滚动偏移更新时进行通知。

您可以侦听ScrollController并使用Stack根据滚动偏移量实现您所感兴趣的效果。

这里是一个快速示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Scroll demo',
      home: new Scaffold(
        appBar: new AppBar(elevation: 0.0),
        body: new CustomScroll(),
      ),
    );
  }
}

class CustomScroll extends StatefulWidget {
  @override
  State createState() => new CustomScrollState();
}

class CustomScrollState extends State<CustomScroll> {
  ScrollController scrollController;
  double offset = 0.0;
  static const double kEffectHeight = 100.0;

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: AlignmentDirectional.topCenter,
      children: <Widget> [
        new Container(
          color: Colors.blue,
          height: (kEffectHeight - offset * 0.5).clamp(0.0, kEffectHeight),
        ),
        new Positioned(
          child: new Container(
            width: 200.0,
            child: new ListView.builder(
              itemCount: 100,
              itemBuilder: buildListItem,
              controller: scrollController,
            ),
          ),
        ),
      ],
    );
  }

  Widget buildListItem(BuildContext context, int index) {
    return new Container(
      color: Colors.white,
      child: new Text('Item $index')
    );
  }

  void updateOffset() {
    setState(() {
      offset = scrollController.offset;
    }); 
  }

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(updateOffset);
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(updateOffset);
  }
}

- amir

Answer 2

你也应该看一下https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

- Steve

---

嗨，我正在尝试创建这个。 - CodePLeX

Answer 3

我认为SliverAppbar小部件是您要寻找的。

看一下这篇文章，它会向您展示如何实现您的目标。

https://flutterdoc.com/animating-app-bars-in-flutter-cf034cd6c68b

- Mans

---

谢谢你的帮助，但这不是我需要的。我已经看过那篇文章了。我现在做的已经实现了，这就是我想要实现的效果。 - CodePLeX