转载请注明出处: https://learnandfish.com/
原文地址:http://learnandfish.com/2020/01/03/36.html
引言
本篇文章不进行Flutter和Dart的具体介绍,也不涉及具体理念,这些在后续的章节中会一一说明,本篇通过两个简单的例子展开,
体验一下Flutter的魅力。这两个都是很经典的例子:
- 案例1: 定义一个界面,中间有一个控件显示Hello World。经典案例,语言入门必备。
- 案例2: 一个简单的计数器,点击按钮显示数字增加。此案例来自官网,此处以白话讲解,更利于看懂。
案例1 -- Hello World
-
打开Android Studio
-
点击start a flutter project -- 选择flutter application,其他的几个我们后续会讲到。
-
按照提示输入工程名和包名,点击finish等待编译完成,一个新的工程就创建好了
-
接下来我们找到lib文件夹,展开之后会看到一个main.dart文件,这个文件是Android Studio自动帮我们创建的,里面就是我们要
讲的计数器应用的实现,此时我们先不看这个,因为这个对于现在的我们来说还是太复杂,等我们自己创建完案例1再回过头来看。 -
我们自己创建一个dart文件,命名为hello.dart。
- 鼠标移到lib文件夹右键 -- 选择new -- 选择Dart File -- 输入hello,扩展名不用输入,Studio已经帮我们做了。
- 我们知道一个项目必须要有入口方法,比如java的入口方法是main方法,Flutter也需要一个启动方法,也是main方法,我们先定义一个
main方法。Dart语言定义方法和变量的基本使用我们下一篇文章具体讲解,如果此处有疑惑可以暂时不用在意,只要知道是入口方法就行。
void main(){
// 此处即为flutter的入口,在这里定义我们的App内容即可。
}
image.gif
- 引入Flutter官方提供的插件包
import 'package:flutter/material.dart';
image.gif
- 接下来我们需要定义我们的App的内容,此处我们定义一个类,继承自StatelessWidget,重写build方法。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp( // 此处为固定写法,Flutter封装好的一个Material类型的控件,能提供给我们一个原生App的体验
title: "Hello Flutter",
home: Scaffold( // 默认生成一个白色的界面,类似Android的Activity
appBar: AppBar( // App的actionBar,标题栏
title: Text("I'm AppBar"), // 标题栏中的文字
),
body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
child: Text("Hello World"), // 屏幕中间显示的Text,也就是我们上面想要的内容显示。
),
),
);
}
}
image.gif
- 此时我们需要在我们的入口函数处添加我们定义个类MyApp,为了让MyApp显示到界面上。
void main(){
// 此处即为flutter的入口,在这里定义我们的App内容即可。
runApp(MyApp());
}
image.gif
- 连接手机或者模拟器,右击hello.dart文件,选择run hello.dart,第一次运行相对较慢,运行成功后,就能看到界面,在屏幕的中心显示“Hello World”。
- Flutter区别于其他语言,有热重载功能(hot reload),即我们修改文件之后,ctrl+s保存,编辑器会立刻运行代码,把修改用极短的时间渲染到我们App的界面上。
- 例如,我们修改标题栏AppBar中的title为我是为了测试热重载,然后保存ctrl+s测试一下看看喽,瞬间爱上了这种速度。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp( // 此处为固定写法,Flutter封装好的一个Material类型的控件,能提供给我们一个原生App的体验
title: "Hello Flutter",
home: Scaffold( // 默认生成一个白色的界面,类似Android的Activity
appBar: AppBar( // App的actionBar,标题栏
title: Text("我是为了测试热重载"), // 标题栏中的文字
),
body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
child: Text("Hello World"), // 屏幕中间显示的Text,也就是我们上面想要的内容显示。
),
),
);
}
}
image.gif
- 我们看到App的标题栏上已经显示我是为了测试热重载。
- 需要注意的是Dart语言有一个单行函数,就是一个函数,如果函数体只有一行,我们可以用=>代替{},所以上面的入口函数可以改写成这样。
void main() => runApp(MyApp());
image.gif
- 上面这样运行效果是一样的。
案例1 -- 计数器应用
上面我们说了计数器应用Android Studio已经帮我们生成了,我们只需要运行main.dart即可,由于生成的代码注释是英文的,为了防止
小伙伴不开心,我用中文重新注释一下,下面放上完整的代码,运行方式是一样,代码的具体写法我们后续介绍了对应控件之后,我们再重新从
零写出来,今天先大体看下,熟悉一下Flutter即可,更细化的学习放在后面的博客,防止学累。
import 'package:flutter/material.dart';
// 入口函数
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 这是应用的主题控件,定义应用的主题信息,例如状态栏颜色,背景颜色等.
// 运行main.dart文件,你能看到一个蓝色的toolbar,中间是一个text和count计数,
// 底部是一个蓝色的加号浮动按钮,点击按钮中间的计数加1
// 修改primarySwatch的值为green, 按下ctrl+s,你能看到蓝色的toolbar和浮动按钮
// 变成了绿色,没有重启App就实现了修改的加载,这就是热重载。
primarySwatch: Colors.blue,
),
// 自定义了一个页面,类似于我们上面例子写的Scaffold,只是此处抽离成了一个单独的类
// 这样会使结构更加清晰。
home: MyHomePage(title: 'Hello Flutter'),
);
}
}
class MyHomePage extends StatefulWidget { // 此处继承StatefulWidget,和StatelessWidget是对应的
MyHomePage({Key key, this.title}) : super(key: key); // 构造方法,为什么这样写后面博客再讲。
// 这个类就是我们应用的主界面
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() { // 定义一个单独的方法为了使屏幕中间的数字增加
setState(() {
// 此处我们先记住Flutter的控件都是一帧的,就是一旦绘制完成,就不能向android一样
// 通过调用内部属性(如TextView.setText("text"))进行修改。后续我们会具体针对这个
// 进行讲解,Flutter控件的刷新是怎样完成的。
// 由于Flutter控件是一帧的,所以此处调用setState方法,会重新调用build方法重新渲染数据
// 如果你是android开发者,你可以类似想一下自定义view的invalid方法
_counter++;
});
}
@override
Widget build(BuildContext context) {
// 第一次运行的时候和每次调用setState方法的时候会走到这里
return Scaffold( // 默认生成一个白色的界面,类似Android的Activity
appBar: AppBar( // 界面的toolbar
// 标题栏中的文字
title: Text(widget.title),
),
body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
child: Column(
// Column组件类似于Android的LinearLayout,一个竖直方向上排列子组件的容器,
// 也就说在该组件中的子组件都是竖直方向排列
mainAxisAlignment: MainAxisAlignment.center, // 主轴(也就是竖直方向)居中显示
children: <Widget>[
// 文本组件1
Text(
'You have pushed the button this many times:',
),
// 文本组件2
Text(
'$_counter',
// 文本组件的样式 大字体显示
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton( // Flutter提供的一个悬浮按钮
onPressed: _incrementCounter, // 点击事件,对应的是我们上面的点击数字自增1方法
tooltip: 'Increment', // 一个作用不大的提示信息,长按控件会有一个提示
child: Icon(Icons.add), // 图片控件,一个加号图片按钮
),
);
}
}
image.gif
网友评论