Flutter Widgets入门（一）：MaterialApp 和 Scaffold

1 MaterialApp

1.1 什么是MaterialApp？

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的<html></html>，且它自带路由、主题色，<title>等功能。

1.2 MaterialApp的几个属性

1.2.1 title

Strig类型，该属性会在Android应用管理器的App上方显示，对于iOS设备是没有效果的。如下面代码所示：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Text('hello flutter',
          style: TextStyle(
              color: Colors.white, decoration: TextDecoration.none))));
}

title演示图

1.2.2 home

Widget类型，这是在应用程序正常启动时首先显示的Widget，除非指定了initialRoute。如果initialRoute显示失败，也该显示该Widget。

需要注意的是, 如果你指定了home属性，则在routes的路由表中不允许出现/的命名路由。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Center(
        child: Text('hello flutter',
            style: TextStyle(
                color: Colors.white, decoration: TextDecoration.none)),
      )));
}

home演示图

1.2.3 routes

Map<String, WidgetBuilder>类型，是应用的顶级路由表。当我们再使用Navigator.pushNamed进行命名路由的跳转时，会在此路表中进行查找并跳转。如果你的应用程序只有一个页面，则无需使用routes，直接指定home对应的Widget即可。

下面的例子中，定义了两个路由：/home和/detail，并使用GestureDetector定义了点击事件已实现路由跳转：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: '一个Flutter应用', home: HomePage(), routes: {
    '/home': (BuildContext context) => HomePage(),
    '/detail': (BuildContext context) => DetailPage()
  }));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/detail');
            },
            child: Text('首页，点击跳转详情页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, '/home');
            },
            child: Text('详情页，点击跳转首页',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white, decoration: TextDecoration.none))));
  }
}

routes演示图

2 Scaffold

2.1 什么是Scaffold?

Scaffold通常被用作MaterialApp的子Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。

2.2 Scaffold的几个属性

2.2.1 appBar

PreferredSizeWidget类型，显示在Scaffold的顶部区域。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用', 
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'))
        )
      )
  );
}

appBar演示图

2.2.2 drawer

Widget drawer类型，通常用来形成一个汉堡包按钮显示其侧边栏。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(title: Text('首页')),
          drawer: Drawer(
              child: Column(
            children: <Widget>[
              DrawerItem(1, '列表1'),
              DrawerItem(2, '列表2'),
              DrawerItem(3, '列表3'),
              DrawerItem(4, '列表4'),
              DrawerItem(5, '列表5')
            ],
          )))));
}

class DrawerItem extends StatelessWidget {
  final int id;
  final String name;

  DrawerItem(this.id, this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border:
            Border(bottom: BorderSide(width: 0.5, color: Color(0xFFd9d9d9))),
      ),
      height: 52.0,
      child: FlatButton(
          onPressed: () {},
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[Text(id.toString()), Text(' - '), Text(name)],
          )),
    );
  }
}

drawer演示图

2.2.3 bottomNavigationBar

Widget bottomNavigationBar类型，用户显示底部的tab栏，items必须大于2个。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ))));
}

bottomNavigationBar演示图

2.2.4 body

Widget类型，Scaffold的主题内容。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: '一个Flutter应用',
      home: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: 1,
            items: [
              new BottomNavigationBarItem(
                  icon: Icon(Icons.account_balance), title: Text('银行')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.contacts), title: Text('联系人')),
              new BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), title: Text('音乐'))
            ],
          ),
          body: Center(
            child: Text('这是联系人页面'),
          ),
      )));
}

body演示图

Flutter Widgets入门（一）：MaterialApp 和 Scaffold

1 MaterialApp

1.1 什么是MaterialApp？

1.2 MaterialApp的几个属性

1.2.1 title

1.2.2 home

1.2.3 routes

2 Scaffold

2.1 什么是Scaffold?

2.2 Scaffold的几个属性

2.2.1 appBar

2.2.2 drawer

2.2.3 bottomNavigationBar

2.2.4 body

yihui_indie

引用和评论

Serverless入门——实战部署VuePress前端项目

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合