flutter - CustomScrollView在flutter中滚动时如何隐藏appbar

Question

我正在使用 flutter 显示一些 html 页面，当 CustomScrollView 向上滚动时是否可以隐藏 appBar？然后我可以有更多的屏幕区域来显示 html 内容。这是我当前的代码片段:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:Cruise/src/component/comment_list.dart';
import 'package:Cruise/src/component/story_information.dart';
import 'package:Cruise/src/models/Item.dart';
import 'package:Cruise/src/common/Repo.dart';

class StoryPage extends HookWidget {
  const StoryPage({
    Key key,
    @required this.item,
  }) : super(key: key);

  final Item item;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cruise'),
        actions: [
          if (item.parent != null)
            IconButton(
              icon: Icon(Feather.corner_left_up),
              onPressed: () async {
                Item parent = await Repo.fetchItem(item.parent);
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => StoryPage(item: parent)),
                );
              },
            ),
        ],
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(child: StoryInformation(item: item)),
          CommentList(item: item)
        ],
      ),
    );
  }
}

Answer 1

您可以使用SliverChildBuilderDelegate来实现此目的，

SliverChildBuilderDelegate class

Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('data'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) => Text(
                      index.toString(),
                    ),
                childCount: 300),
          ),
        ],
      ),
    );