flutter - 酷滚动以删除顶部并出现 title/navigation 选项卡

Question

https://www.facebook.com/christianadrian.domantay/videos/10213737691517013/

我在 facebook 上看到了这个 flutter 应用程序的视频。

请问这是怎么做到的：

• 向上滚动并删除顶部
• 然后选项卡导航出现在顶部
• 然后标题出现在顶部
• 仍然可以滚动列表

我想获得有关所用技术的答案，可能还有示例。我看过一些例子，但我想在这里注册它们。因为这有利于基于仪表板的实施。

Answer 1

您需要CustomScrollView、SliverAppBar。在 SliverAppBar 内部，您需要有灵活的 space 小部件。 转到 DART PAD 并粘贴以下代码以查看其工作原理。 这是给你的例子：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            stretch: true,
            pinned: true,
            onStretchTrigger: () {
              // Function callback for stretch
              return;
            },
            expandedHeight: 300.0,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle,
              ],
              centerTitle: true,
              title: const Text('Flight Report'),
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                    fit: BoxFit.cover,
                  ),
                  const DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment(0.0, 0.5),
                        end: Alignment(0.0, 0.0),
                        colors: <Color>[
                          Color(0x60000000),
                          Color(0x00000000),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((c, i){
                return ListTile(title: Text("$i"));
            },childCount: 10),
          ),
        ],
      ),
    );
  }
}