【问题标题】:how to hide appbar when CustomScrollView scroll in flutter当CustomScrollView在颤动中滚动时如何隐藏appbar
【发布时间】:2020-11-02 05:00:43
【问题描述】:

我正在使用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)
        ],
      ),
    );
  }
}

【问题讨论】:

    标签: flutter


    【解决方案1】:

    您可以使用 SliverChildBuilderDelegate 来实现这一点,

    SliverChildBuilderDelegate class

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-12
      • 2020-09-25
      • 2016-01-30
      • 1970-01-01
      • 1970-01-01
      • 2021-09-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多