如何从不同的滚动视图将多个 SliverAppBars 固定到顶部

Question

在这种情况下，第一个 sliverAppBar 在滚动时正确固定到顶部。在 customScrollView 中有两个选项卡，它们有自己的滚动视图。在第一个选项卡内，是另一个 sliverAppBar，应该固定在第一个选项卡下。但是，它会滑到第一个 sliverAppBar 下方。现在既然我们的复杂视图不允许只用一个 customScrollView 来解决问题，有没有其他办法呢？

在此处查看图片（注意第一个 AppBar 如何与第二个 AppBar 重叠）

滚动前所需的效果

滚动后所需的效果

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Test(),
    );
  }
}
 
class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = ['Tab 1', 'Tab 2'];
    return DefaultTabController(
      length: _tabs.length,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
                title: const Text('1st App Bar'),
                pinned: true,
                forceElevated: innerBoxIsScrolled,
                bottom: TabBar(
                  tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              CustomScrollView(
                slivers: [
                  SliverPadding(
                    padding: const EdgeInsets.all(8.0),
                    sliver: SliverFixedExtentList(
                      itemExtent: 48.0,
                      delegate: SliverChildBuilderDelegate(
                        (context, index) {
                          return ListTile(
                            title: Text('Item $index'),
                          );
                        },
                        childCount: 3,
                      ),
                    ),
                  ),
                  const SliverAppBar(
                    toolbarHeight: 150,
                    pinned: true,
                    backgroundColor: Colors.purple,
                    title: Text('2nd App Bar'),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.all(8.0),
                    sliver: SliverFixedExtentList(
                      itemExtent: 48.0,
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                          return ListTile(
                            title: Text('Item $index'),
                          );
                        },
                        childCount: 20,
                      ),
                    ),
                  ),
                ],
              ),
              Placeholder(),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

我们可以使用Scaffold 持有第一个appBar。在tab 中，我们可以将第二个 appBar 设置为固定。如果您希望进行任何更改，请告诉我。

输出

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

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

class _TestState extends State<Test> with SingleTickerProviderStateMixin {
  static const List<Tab> myTabs = <Tab>[
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
  ];

  late TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: myTabs.length, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Appbar 1"),
        bottom: TabBar(
          controller: controller,
          tabs: myTabs,
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: [
          CustomScrollView(
            slivers: [
              SliverAppBar(
                title: Text("AppBar 2"),
                pinned: true,
              ),
              SliverPadding(
                padding: const EdgeInsets.all(8.0),
                sliver: SliverFixedExtentList(
                  itemExtent: 48.0,
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return ListTile(
                        title: Text('Item $index'),
                      );
                    },
                    childCount: 213,
                  ),
                ),
              ),
            ],
          ),
          Container(
            color: Colors.pink,
          ),
        ],
      ),
    );
  }
}