# 第3节：Flutter的最基础知识

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

本节学习用时：**30分钟**

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

本节目录：

一、本节内容介绍

二、本节代码解释

## 一、本节内容介绍

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

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

* MaterialApp的应用
* Scaffold的应用
* 文本的应用：Text
* 按钮的应用：FloatingActionButton
* 页面的跳转

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

> ![materialappproject效果图](/files/-LVmK9HePnclvsLrLsE6)

### 3、实现本节效果的代码

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

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

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

```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`代码如下：

```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的使用方式介绍

```dart
// 写法①
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`为例，该文件代码如下：

```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的使用介绍

```dart
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、按钮形式

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

### 2、按钮的事件写法

#### 2.1、无方法

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

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

设方法为：

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

则按钮点击事件为：

```dart
// 写法①
onPressed: printLog,

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

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

设方法为：

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

则按钮点击事件为：

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

## 四、新页面的创建

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

```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`为例，则跳转方法：

方式①：

```dart
import 'NewRoute.dart';

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

方式②：

```dart
import 'NewRoute.dart';

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

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

### 5.2 使用路由管理

```dart
import 'NewRoute.dart';

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devbook.site/1-ru-men/flutter-de-zui-ji-chu-zhi-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.