Material组件之MaterialApp、Scaffold、AppBar学习笔记

一、MaterialApp

flutter的路由方式有两种：新建路由和注册路由

1.1 新建路由

Navigator.push负责将新建的路由添加到Navigator管理的route堆栈的栈顶，Navigator.pop用于弹出route堆栈最顶层的Route。其中页面进入动画是向上滑动并淡出，退出动画是向下滑动并淡出。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('这是第一页'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('跳到第二页'),
              onPressed: (){
                //将新建的路由添加到Navigator管理的route堆栈的栈顶
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context)=>SecondPage()),
                );
              },
          ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('这是第二页'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('回到第一页'),
              onPressed: (){
                //弹出route堆栈最顶层的Route
                Navigator.pop(context);
              }
          ),
      ),
    );
  }

}

1.2 注册路由

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: FirstPage(),
      //初始化一个路由列表。当推送路由时，在routes中查找路径名称。如果
      //名称存在，则关联的WidgetBuilder用于构造MaterialPageRoute
      routes: <String,WidgetBuilder>{
        '/first':(BuildContext context)=>FirstPage(),
        '/second':(BuildContext context)=>SecondPage(),
      },
      initialRoute: '/first',
    );
  }
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('这是第一页'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('跳到第二页'),
              onPressed: (){
                //将路由添加到Navigator管理的route堆栈的栈顶，参数为路由名称
                Navigator.pushNamed(context, '/second');
              },
          ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('这是第二页'),
      ),
      body: Padding(
          padding: EdgeInsets.all(30.0),
          child: RaisedButton(
              child: Text('回到第一页'),
              onPressed: (){
                Navigator.of(context).pop();
              }
          ),
      ),
    );
  }

}

二、 Scaffold

实现了Material Design的基本布局结构，因此它经常会作为MaterialApp的子Widget, Scaffold会自动填充可用的空间，这通常意味着它将占据整个窗口或屏幕，并且Scaffold会自动适配屏幕。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

        //scaffold
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold'),
        ),
        body: Padding(padding: EdgeInsets.all(30.0),child: Text('Scaffold')),
        bottomNavigationBar: BottomAppBar(child: Container(height: 50)),
        drawer: Drawer(child: Center(child: Text('抽屉'),),),
        floatingActionButton: FloatingActionButton(child: Icon(Icons.add),),
      ),
    );
  }
}

用到的属性：

• appBar：用于设置顶部的标题栏。
• body：显示Scaffold的主要内容。
• bottomNavigationBar：用于设置Scaffold的底部导航栏，
• drawer：用于设置抽屉效果。
• floatingActionButton：用于设置位于右下角的按钮。
  

三、AppBar

AppBar由toolbar和其他的可选Widget组成

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

        home: MyScaffld(),
    );
  }
}
class MyScaffld extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar例子'),
        leading: FlutterLogo(colors: Colors.lightGreen,),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: (){
              print('添加按钮');
            },
          )
        ],
      ),
    );
  }

}