flutter - 如何创建具有上部固定和下部浮动元素的 SliverAppBar？

Question

所以我想创建一个 SliverAppBar 上部固定并始终显示。即使未到达列表顶部，下部也必须浮动并出现在向下滚动时。

让它对我有用的唯一方法是在彼此之上添加 2 个 sliverappbars，但我觉得这不是最好的方法。那么这将如何正确完成呢？

  return Scaffold(
      body: NestedScrollView(
        body: ListView.builder(
            itemBuilder: (context, index) => Text(index.toString())),
        headerSliverBuilder: (context, hasScrolled) {
          return [
            const SliverAppBar(
              title: Text('pinned'),
              pinned: true,
              centerTitle: true,
            ),
            const SliverAppBar(
              floating: true,
              snap: true,
              title: Text('floating'),
            ),
          ];
        },
      ),
    );

所以在视觉上，这就是我正在寻找的，我只是不确定实施。

Answer 1

这可以解决问题：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Title')),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: true,
            title: Text('Test'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 1000,
            ),
          ),
        ],
      ),
    );

Answer 2

这是你想要的吗，顺便说一句，它不是动画的。

class CUstomScrolling extends StatefulWidget {
  const CUstomScrolling({Key? key}) : super(key: key);

  @override
  _CUstomScrollingState createState() => _CUstomScrollingState();
}

class _CUstomScrollingState extends State<CUstomScrolling> {
  final ScrollController controller = ScrollController();

  bool _showNavBar = true;

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

    controller.addListener(() {
      if (controller.hasClients) {
        if (controller.position.userScrollDirection ==
                ScrollDirection.forward &&
            !_showNavBar) {
          setState(() {
            _showNavBar = true;
          });
        } else if (controller.position.userScrollDirection ==
                ScrollDirection.reverse &&
            _showNavBar) {
          setState(() {
            _showNavBar = false;
          });
        }
      }
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        body: ListView.builder(
          controller: controller,
          itemBuilder: (context, index) => Text(
            index.toString(),
          ),
        ),
        headerSliverBuilder: (context, hasScrolled) {
          return [
            const SliverAppBar(
              title: Text('pinned'),
              pinned: true,
              centerTitle: true,
            ),
            if (_showNavBar)
              const SliverAppBar(
                pinned: false,
                floating: true,
                title: Text('floating'),
              ),
          ];
        },
      ),
    );
  }
}