Flutter自学Demo制作(2)

2019-12-03  本文已影响0人  SingleDigit

界面之间的简单切换(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,
          ),
        ),
      ),
    );
  }
}
上一篇下一篇

猜你喜欢

热点阅读