美文网首页
Flutter的上下求索——导航/页面切换

Flutter的上下求索——导航/页面切换

作者: 云醉倚清风 | 来源:发表于2019-08-08 15:55 被阅读0次

一:理解导航、页面切换

导航在手机应用中指的就是以页面为单位的切换。

语言 页面 切换方法
iOS ViewController pushViewController/popViewController
Android Activity startActivity()/finish()
Flutter StatelessWidget Navigator.push()/Navigator.pop()

当然iOS中还有presentViewController/dismissViewController,这种只是视图控制器的覆盖。假设每个App都是个大画板,navigation是将当前画板上的纸挪别的地方存起来,present是拿到另一张纸盖住。


navigation与present

二:Flutter中导航的问题

  • 问:想要实现导航,就得知道flutter的页面是什么,如何创建页面?
  • 答:右键在lib文件夹下新建与main.dart同级的dart文件,取名navigation。.dart类似iOS中的.m文件,Android中的.java。我理解的执行文件,在此文件中,我可以创建控件,执行方法等。其语法就是自己独有的Dart语言,后续慢慢学习。

  • 问:类似iOS中的controller,Android的Activity,Flutter的页面是什么?
  • 答:目前我只看到了StatelessWidget,继承他,就能将他的类认定为个页面。

  • 问:跳转肯定需要触发事件,最简单的
  • 答:目前我只看到了StatelessWidget,继承他,就能将他的类认定为个页面。

三:基础的导航切换

  1. 新建navigation.dart,在其中敲入如下代码,一个页面就有了
// 导入相关头文件
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      )
    );
  }
}

2.在main.dart 导入文件,找到工程初始化时生成的Text代码,在其下新生成个按钮

import 'navigation.dart';
 children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
             new MaterialButton(
                 color: Colors.blueGrey,     //背景颜色
                 textColor: Colors.white,    //字体颜色
                 child: new Text("Navigation"),       //字体名称
                 onPressed: (){                  //点击事件
                   Navigator.push(             //导航控件使用
                     context,
                     new MaterialPageRoute(builder: (context) => new FirstPage()),
                   );
                 })
          ]

3.我可以继续在navigation.dart中 添加页面,并加入相应的逻辑

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: new MaterialButton(child: new Text("下一页"), onPressed: () {
          Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage()));
        }),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Screen')
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Go back!'),
          onPressed: (){
            Navigator.pop(context);  // 导航返回
          },
        ),
      ),
    );
  }
}

四:另外一种方式

1:在main.dart中提前生成需要跳转的页面(路由名构成的 Map)

import 'navigation.dart';
import 'home.dart';
class MyApp extends StatelessWidget {
  // This widget is the root of your application.-
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: <String, WidgetBuilder> {
        '/first': (BuildContext context) => FirstPage(),
        '/second': (BuildContext context) => SecondPage(),
        '/third': (BuildContext context) => ThirdPage(),
       '/home': (BuildContext context) => HomePage(),    // 新建个home.dart 是真正的主页,作为其它控件学习的入口 
      },
       );
  }
}

2:跳转

 new MaterialButton(child: new Text("routes"), onPressed: (){
               Navigator.of(context).pushNamed('/first');
             })
// 真的主页 为了跳转入各个控件学习的过程
 new MaterialButton(color: Colors.blueGrey, child: new Text("真正的主页"), onPressed: (){
              Navigator.of(context).pushNamed('/home');
            }),

五:传值(待续)

现在只是学习基础知识,有问题或新的学习心得会继续补充......

相关文章

网友评论

      本文标题:Flutter的上下求索——导航/页面切换

      本文链接:https://www.haomeiwen.com/subject/cxccdctx.html