flutter - Navigator 阻止 CustomScrollView 和 NestedScrollView 之间的通信

Question

预期行为:如果自定义 ScrollView 滚动，则嵌套 ScrollView 会正常滚动，因此会随之滚动应用栏。

实际发生的事情:只有自定义 ScrollView 滚动，而不是应用栏(=嵌套 ScrollView )。

想要的行为可以通过不使用 customscrollview 或不使用导航器来实现(在我的情况下都没有选择)。如果它在任何情况下都有帮助，这个实现在空安全之前工作。

代码示例:

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  GlobalKey<NavigatorState> get navigatorKey =>
      GlobalKey<NavigatorState>();


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
          physics: BouncingScrollPhysics(),
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: Text("title"),
                  pinned: true,
                  floating: false,
                  snap: false,
                  expandedHeight: 200,
                ))
          ],
          // body: DemoPage(),
          body: Navigator(
              key: navigatorKey,
              onGenerateRoute: (settings) =>
                  MaterialPageRoute(builder: (context) => DemoPage())),
        ));
  }
}

class DemoPage extends StatelessWidget {

  Color generateRandomColor1() {
    // Define all colors you want here
    const predefinedColors = [
      Colors.red,
      Colors.green,
      Colors.blue,
      Colors.black,
      Colors.white
    ];
    Random random = Random();
    return predefinedColors[random.nextInt(predefinedColors.length)];
  }

  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.red,
    //   height: 1000,
    //   width: 500,
    //   child: Center(
    //     child: RaisedButton(
    //       child: Text("Press"),
    //       onPressed: () {
    //         Navigator.of(context)
    //             .push(MaterialPageRoute(builder: (context) => DemoPage()));
    //       },
    //     ),
    //   ),
    // );
    return CustomScrollView(slivers: [
      SliverToBoxAdapter(
        child: Container(
          color: generateRandomColor1(),
          height: 1000,
          width: 500,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                RaisedButton(
                  child: Text("Press"),
                  onPressed: () {
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) => DemoPage()));
                  },
                ),
                RaisedButton(
                  child: Text("pop"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        ),
      )
    ]);
  }
}

Answer 1

当 DemoPage 在 Navigator 小部件下方构建 CustomScrollView 时，您的 NestedScrollView 可能就像有一个单独的 ScrollView 一样。

您可以将 CustomScrollView 的物理设置为 NeverScrollableScrollPhysics，以便 NestedScrollView 可以控制它。

...

return CustomScrollView(
  // Add the following line:
  physics: NeverScrollableScrollPhysics(),
  slivers: [
    SliverToBoxAdapter(
      child: Container(
        color: generateRandomColor1(),
        height: 1000,
        width: 500,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              RaisedButton(
                child: Text("Press"),
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => DemoPage(),
                    ),
                  );
                },
              ),
              RaisedButton(
                child: Text("pop"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ),
      ),
    ),
  ],
);

...

网页浏览

如果使 CustomScrollView 永不滚动不能提供所需的结果，您可以尝试使用 PageView 而不是 Navigator。由于您希望 SliverAppBar 在所有页面上保持静止，因此这将仅在 PageView 内提供导航。

您需要做的就是将您的页面列表放入 PageView 并将其 Controller 传递给您的页面。然后，您可以通过按钮或滑动手势导航到其他页面。

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  GlobalKey<NavigatorState> get navigatorKey => GlobalKey<NavigatorState>();

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

  @override
  Widget build(BuildContext context) {
    // Page controller
    final PageController controller = PageController(initialPage: 0);

    return Scaffold(
      body: NestedScrollView(
        physics: BouncingScrollPhysics(),
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              title: Text("title"),
              pinned: true,
              floating: false,
              snap: false,
              expandedHeight: 200,
            ),
          )
        ],
        // Page view here
        body: PageView(
          // Scroll horizontally
          scrollDirection: Axis.horizontal,
          controller: controller,
          // Your pages
          children: <Widget>[
            // Pass the controller to your page
            DemoPage(pageController: controller),
            DemoPage(pageController: controller),
            DemoPage(pageController: controller),
          ],
        ),
      ),
    );
  }
}

class DemoPage extends StatelessWidget {
  // Page Controller
  final PageController pageController;

  DemoPage({required this.pageController});

  Color generateRandomColor1() {
    // Define all colors you want here
    const predefinedColors = [
      Colors.red,
      Colors.green,
      Colors.blue,
      Colors.black,
      Colors.white
    ];

    Random random = Random();

    return predefinedColors[random.nextInt(predefinedColors.length)];
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Container(
            color: generateRandomColor1(),
            height: 1000,
            width: 500,
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  RaisedButton(
                    child: Text("Press"),
                    onPressed: () {
                      // Go to next page
                      pageController.nextPage(
                        duration: Duration(milliseconds: 300),
                        curve: Curves.linear,
                      );
                    },
                  ),
                  RaisedButton(
                    child: Text("pop"),
                    onPressed: () {
                      // Go back to previous page
                      pageController.previousPage(
                        duration: Duration(milliseconds: 300),
                        curve: Curves.linear,
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}