最近看了一些代码上的东西,偶然看到了 Flutter,感觉他的代码很高级,而且调试起来很简单,所以想来尝试一下。我计划以一个图片浏览器为出发点来开始这个语言的学习,希望能继续下去。

配置 Flutter 环境

参考Flutter很容易配置好 linux 下面的环境。

检测安装

在配置过程中,可能会遇到 android-license 的问题,此时执行lutter doctor --android-licenses即可

安装好后,执行 Flutter doctor,可以得到

Flutter doctor

就可以开始下一步的编写了。

开始新项目

我习惯用 vscode 来编写我的代码,此时,我们可以执行命令Flutter new project

new proj

便可构建出一个模板项目

temple hello

我们的主要逻辑也是在这个main.dart中执行的,按下 F5 我们便可以得运行。

debug

得到运行结果:

有状态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

无状态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';
import '../generated/l10n.dart';

class SettingsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(S.of(context).setPage),
),
body: Center(
child: Text(S.of(context).setPageDesc),
),
);
}
}

导航页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class NaviBar extends StatefulWidget {
@override
NaviBar({Key key, this.title}) : super(key: key);
final String title;
_NaviBarState createState() => _NaviBarState();
}

class _NaviBarState extends State<NaviBar> {
int _currentIndex = 0;
final List<Widget> _children = [
TestWidget('set1'),
TestWidget('set2'),
SettingsWidget()
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text(S.of(context).home)),
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text(S.of(context).favorite)),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text(S.of(context).settings))
],
),
);
}

void onTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}