Flutter 应用组件

Flutter 应用组件(MaterialApp)，MaterialApp代表使用Material设计风格的应用，里面包含了其所需要的基本控件。一个完整的Flutter项目就是从MaterialApp这个主组件开始的。

MaterialApp组件常见属性见表:

设置主页

使用home属性设置应用的主页，即整个应用的主组件。示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这是整个应用的主组件
  @override
  Widget build(BuildContext context) {
    // Material风格应用
    return MaterialApp(
      // 设置首页
      home: MyHomePage(),
      title: 'MaterialApp示例',
    );
  }
}

// 这是一个可改变的Widget
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MaterialApp示例'),
      ),
      body: Center(
        child: Text(
          '主页',
          style: TextStyle(fontSize: 28.0),
        ),
      ),
    );
  }
}

上述示例代码的视图展现大致如图所示:

路由处理

routes对象是一个Map<String, WidgetBuilder>。当使用Navigator.pushNamed来路由的时候，会在routes中查找路由名字，然后使用对应的WidgetBuilder来构造一个带有页面切换动画的MaterialPageRoute。如果应用只有一个界面，则不用设置这个属性，使用home设置这个界面即可。

通过routes可以给MaterialApp组件初始化一个路由列表，跳转到指定页面，代码如下所示：

Navigator.pushNamed(context, '/somePage');

在MaterialApp组件使用initialRoute属性可以给应用添加一个初始化路由。这两个属性的代码如下：

routes: {
'/first': (BuildContext context) => FirstPage(), //添加路由
'/second': (BuildContext context) => SecondPage(),
},
initialRoute: '/first',                               //初始路由页面为first页面

为了便于演示，这里我们需要添加两个页面，在第一个页面里添加一个Button，当点击Button时路由到第二个页面。页面跳转代码如下：

Navigator.pushNamed(context, '/second');

在第二个页面里也添加一个Button，当点击Button时路由到第一个页面。页面跳转代码如下：

Navigator.pushNamed(context, '/first');

注意 第一个页面和第二个页面的路由标识是/first及/second而不是first及second。

完整的路由示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这是整个应用的主组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      title: 'MaterialApp示例',
      // 路由配置
      routes: {
        '/first': (BuildContext context) => FirstPage(), //添加路由
        '/second': (BuildContext context) => SecondPage(),
      },
      initialRoute: '/first', //初始路由页面为first页面
    );
  }
}

// 这是一个可改变的Widget
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
appBar: AppBar(
  title: Text('MaterialApp示例'),
),
body: Center(
  child: Text(
'主页',
style: TextStyle(fontSize: 28.0),
  ),
),
  );
}
}

// 第一个路由页面
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
appBar: AppBar(
  title: Text('这是第一页'),
),
body: Center(
  child: RaisedButton(
onPressed: () {
  // 路由跳转到第二个页面
  Navigator.pushNamed(context, '/second');
},
child: Text(
  '这是第一页',
  style: TextStyle(fontSize: 28.0),
),
  ),
),
  );
}
}

// 第二个路由页面
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
appBar: AppBar(
  title: Text('这是第二页'),
),
body: Center(
  child: RaisedButton(
onPressed: () {
  // 路由跳转到第一个页面
  Navigator.pushNamed(context, '/first');
},
child: Text(
  '这是第二页',
  style: TextStyle(fontSize: 28.0),
),
  ),
        ),
      );
    }
  }

上述示例代码的视图展现大致如图所示：

自定义主题

应用程序的主题，各种定制的颜色都可以设置，用于程序主题切换。示例代码如下所示：

MaterialApp(
  theme: ThemeData(
    // 主题色
    primarySwatch: Colors.blue,
  ),
);