Question

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

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

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

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

Answer 1

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

第一个是推送 DialogRoute 而不是 MaterialPageRoute。这样，你就直接得到了一个透明的路由，允许显示路由下面的内容。

第二个需要您做更多工作的是扩展 ModalRoute 对象以创建您自己的 Route 类（您将需要创建动画等...）。所以这种方式显然更健壮，但如果你是 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 导航保持上一屏幕在底部可见

1 个答案: