美文网首页
Flutter自学Demo制作(2)

Flutter自学Demo制作(2)

作者: SingleDigit | 来源:发表于2019-12-03 01:40 被阅读0次

    界面之间的简单切换(Navigator跳转界面)

    1. flutter界面显示是用一个栈来存储的,栈顶为当前显示的界面。Navigator类中, push相关的方法就是跳转到指定界面的方法,pop相关的方法就是返回上一个界面的方法。
    2. MaterialApp类中定义了各个界面的key值,方便跳转。
    import 'package:flutter/material.dart';
    import 'package:todo_list/view/logo.dart';
    import 'package:todo_list/view/main_list.dart';
    
    void main() => runApp(MaterialApp(
      initialRoute: 'logo',//定义初始界面为logo界面
      routes: {//定义key值对应的界面
        'logo': (context)=>Logo(),
        'main_list':(context)=>MainList(),
      },
    ));
    
    import 'package:flutter/material.dart';
    
    class Logo extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
              child: RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(
                      context,
                      'main_list'
                  );//跳转到指定界面
                },
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text(
                      'BOX',
                      textDirection: TextDirection.ltr,
                      style: TextStyle(
                          fontSize: 60,
                          color: Color(0xffffffff)
                      ),
                    ),
                    Text(
                      'Todo List',
                      textDirection: TextDirection.ltr,
                    )
                  ],
                ),
              )
          ),
        );
      }
    }
    
    import 'package:flutter/material.dart';
    
    class MainList extends StatelessWidget{
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: ()=>{
                Navigator.pop(context)//返回上一个界面
              },
              child: Text(
                'this is main list page',
                textDirection: TextDirection.ltr,
              ),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter自学Demo制作(2)

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