Question

我需要一些帮助。我用谷歌搜索了这个，我一直得到制作 2 个屏幕的相同结果。
我正在尝试在颤振上制作多个屏幕。
我在这个论坛上找到了另一个答案，但它似乎对我不起作用，我一直在代码中出错。我将在下方包含适用于 2 个屏幕的基本代码。

实际上，我仍在学习 Flutter 并尝试制作原型以向客户展示。我尝试使用线框，但我设法找到的只是一个绘制应用程序的地方，我想要一个实时骨架应用程序，我可以向客户展示页面。

我在做什么？我正在尝试创建 2 条以上的路线，为每条路线命名，然后导航回主屏幕。
我尝试过什么？我将在下面包含代码
我的结果是什么？我可以完美地导航 2 个屏幕（路线）
预期结果？我想要超过 2 个，我需要至少大约 6 条路线

有效的代码

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new SecondScreen()),
              );
            }));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application Page - 1"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              //this pushes forward to screen 1
              Navigator.push(ctxt,
                  new MaterialPageRoute(builder: (ctxt) => new FirstScreen()));
              //    Navigator.pop(ctxt) ; // Pop from stack back to screen 1
            }));
  }
}

Answer 1

创建 2 个单独的 dart 文件并分别创建您的小部件并将它们一起使用非常简单，请为此使用谷歌

Answer 2

所以我在编辑器中玩了很多次之后，我发现了如何做到这一点。我所做的就是制作了第三个名为third_screen.dart的屏幕，然后我输入了代码Navigator.push(ctxt, new MaterialPageRoute(builder: (ctxt) => new ThirdScreen()));

然后在第三屏上我直接复制了上面的代码，然后将“class ThirdScreen extends StatelessWidget”更改为“class ThirdScreen extends StatelessWidget”到第二屏

然后在第三个屏幕上我输入了返回上一页的命令

 Navigator.pop(context);

这让我回到了我所在的上一个屏幕。

所以完整的代码是

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new SecondScreen()),
              );
            }));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application Page - 1"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              //this pushes forward to screen 3
              Navigator.push(ctxt,
                  new MaterialPageRoute(builder: (ctxt) => new ThirdScreen()));
             
            }));
  }
}
class ThirdScreen extends StatelessWidget {
      @override
      Widget build(BuildContext ctxt) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Multi Page Application Page - 1"),
            ),
            body: new Checkbox(
                value: false,
                onChanged: (bool newValue) {
              
                  Navigator.pop(ctxt) ; // Pop from stack back to screen 1
                }));
      }
    }

我如何在颤振上制作多个屏幕 - 超过 2 个屏幕

2 个答案: