第3节：Flutter的最基础知识

本节学习内容：通过最基础的Flutter控件等实现一个app ，让您对Flutter构建的app有一个初步的认识！

本节学习用时：30分钟

本节学习方式：推荐直接看懂代码即可

本节目录：

一、本节内容介绍

二、本节代码解释

一、本节内容介绍

本节通过实现以下界面/功能效果，为您介绍一些最基础的Flutter知识点。

1、主要介绍的知识点有：

• MaterialApp的应用

• Scaffold的应用

• 文本的应用：Text

• 按钮的应用：FloatingActionButton

• 页面的跳转

2、要实现的效果如下图所示：

3、实现本节效果的代码

本节所有代码文件为：main.dart、NewRoute.dart。

您可自己通过flutter create materialappproject创建materialappproject项目后，将其lib文件夹下的代码文件替换为如下即可。

3.1、其中完整的main.dart代码如下：

import 'package:flutter/material.dart';
import 'NewRoute.dart';

// 写法①
// >>>>>>>>>>>>> runApp写法① >>>>>>>>>>>>>
// void main() {
//   runApp(new MaterialApp(
//     title: '1.MaterialApp in main',
//     home: new HelloWorldPage(),
//   ));
// }
// <<<<<<<<<<<<< runApp写法① <<<<<<<<<<<<<


// 写法②
// >>>>>>>>>>>>> runApp写法② >>>>>>>>>>>>>
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '2.MaterialApp in MyApp',

      // 页面跳转的方式②：注册路由表
      // 详情查看[官网路由管理](https://book.flutterchina.club/chapter2/flutter_router.html)
      // 缺点：路由传递的参数无法动态修改(如果路由有参数)
      routes: {
        "new_page": (context) => NewRoute(),
      },

      home: HelloWorldPage(),
    );
  }
}
// <<<<<<<<<<<<< runApp写法② <<<<<<<<<<<<<


class HelloWorldPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
        appBar: new AppBar(
          leading: new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null,
          ),
          title: new Text('MaterialApp Example title'),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: 'Search',
              onPressed: null,
            ),
          ],
        ),
        //body占屏幕的大部分
        body: new Center(
          child: new Text('Hello, world2!'),
        ),
        floatingActionButton: new FloatingActionButton(
          tooltip: 'Add', // used by assistive technologies
          child: new Icon(Icons.add),
          // 1、无方法
          // 写法①
          // onPressed: null,
          // 写法②
          // onPressed: () {}
          // 写法③
          // onPressed: () => {}

          // 2、有方法，但该方法无参数
          // 写法①
          // onPressed: printLog,
          // 写法②
          // onPressed: () {
          //   printLog();
          // },

          // 3、有方法，且该方法有参数
          // onPressed:() {
          //   printText("Hello world");
          // }

          // 4.页面跳转方式
          // 写法①
          // onPressed: () {
          //   goNextPage(context);
          // },
          // 写法②
          // onPressed: () {
          //   Navigator.pushNamed(context, "new_page");
          // },
          // 写法③
          onPressed: () {
            Navigator.push(context, new MaterialPageRoute(builder: (context) {
              return new NewRoute();
            }));
          },
        )
    );
  }
}

void printLog() {
  print("This is printLog Method");
}

void printText($text) {
  print("The text is " + $text);
}

void goNextPage(context) {
  // 导航到新路由
  Navigator.push(context, new MaterialPageRoute(builder: (context) {
    return new NewRoute();
  }));
}

3.2、其中完整的NewRoute.dart代码如下：

import 'package:flutter/material.dart';

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

二、本节代码解释

1、MaterialApp的使用方式介绍

// 写法①
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: '1.MaterialApp in main',
    home: new HelloWorldPage(),
  ));
}


// ------------------- 我是分割线，下面介绍的是另一种写法 ------------------- //
// 写法②
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '2.MaterialApp in MyApp',
      home: HelloWorldPage(),
    );
  }
}

2、Scaffold的使用方式介绍

以创建一个新页面NewRoute.dart为例，该文件代码如下：

import 'package:flutter/material.dart';

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

3、文本Text以及按钮Button的使用介绍

class HelloWorldPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: new Text('MaterialApp Example title'),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      //body占屏幕的大部分
      body: new Center(
        child: new Text('Hello, world2!'),
      ),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: new Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

三、按钮Button

1、按钮形式

    floatingActionButton: new FloatingActionButton(
          tooltip: 'Add', // used by assistive technologies
          child: new Icon(Icons.add),
          // 点击进行页面跳转
          onPressed:() {
            goNextPage(context);
          }
          ),
    );

2、按钮的事件写法

2.1、无方法

// 写法①
onPressed: null,
// 写法②
onPressed: () {}
// 写法③
onPressed: () => {}

2.2、有方法，但该方法无参数

设方法为：

void printLog() {
  print("This is printLog Method");
}

则按钮点击事件为：

// 写法①
onPressed: printLog,

// 写法②
onPressed: () {
    printLog();
},

2.3、有方法，且该方法有参数

设方法为：

void printText($text) {
  print("The text is " + $text);
}

则按钮点击事件为：

onPressed:() {
    printText("Hello world");
}

四、新页面的创建

以创建一个新页面NewRoute.dart为例，该文件代码如下：

import 'package:flutter/material.dart';

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

五、页面的跳转 & 路由的管理

5.1 直接跳转

以跳转到上述建立的NewRoute.dart为例，则跳转方法：

方式①：

import 'NewRoute.dart';

// 按钮处的写法
onPressed: () {
    Navigator.push(context, new MaterialPageRoute(builder: (context) {
        return new NewRoute();
    }));
},

方式②：

import 'NewRoute.dart';

// 定义导航到新路由的方法
void goNextPage(context) {
  Navigator.push(context, new MaterialPageRoute(builder: (context) {
    return new NewRoute();
  }));
}

// 则按钮处的写法，自然如下：
onPressed:() {
    goNextPage(context);
}

5.2 使用路由管理

import 'NewRoute.dart';

// 在MaterialApp中注册路由表
routes: {
    "new_page": (context) => NewRoute(),
},

// 按钮位置写法
onPressed: () {
    Navigator.pushNamed(context, "new_page");
},