颤动导航使上一个屏幕在底部可见

Question

我目前正在做一个项目，其中导航以下一种方式组织。当用户从一个屏幕导航到另一个屏幕时，上一个屏幕会保留在底部（下面的屏幕截图）

总的来说，我想达到的效果是类似于原生Android的fragmentManager.add功能，当Fragment1与Fragment2重叠时，但不幸的是，使用Flutter无法实现一样

对于导航，我使用的是常规 flutter navigator

如果有人能帮助我，我将不胜感激

Answer 1

您有两个选择，但无论哪种方式，都与 Route 对象有关。

第一个推一个DialogRoute instead of a MaterialPageRoute。这样就直接得到一个透明路由，可以让路由下面的内容显示出来。

第二个需要您做更多工作的是扩展 ModalRoute 对象以创建您自己的路线 class（您将需要创建动画等...） .所以这种方式显然更健壮，但是如果你是 Flutter 的新手，我建议你选择第一种 :D.

希望对您有所帮助！

这是第一个选项的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          child: Text('TAP ME'),
          onTap: () {
            Navigator.of(context).push(
              DialogRoute(
                  builder: (_) => Material(
                    color: Colors.black45,
                    child: Center(
                      child: GestureDetector(
                        onTap: () => Navigator.pop(context),
                        child: Text('BACK'),
                      ),
                    ),
                  ),
                  context: context),
            );
          },
        ),
      ),
    );
  }
}

颤动导航使上一个屏幕在底部可见

Flutter navigate keeping previous screen visible at the bottom

javascript

navigation

dart

flutter