第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代码如下：
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代码如下：
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");
},Last updated
