上一篇我们已经配置完所有的Flutter环境，那接下来开始创建第一个Flutter应用。
1.打开IDEA选择Flutter
Snip20190702_2.png
然后创建项目填写项目名称，注意：项目名称中不能包含大写字母！！！
Snip20190702_11.png
2.此时我们可以在项目目录中找到Android和iOS的项目
Snip20190702_13.png
打开iOS应用，创建一个唯一的bundleID，能在手机中运行即可
image.png
3.创建文件，复制代码
- 在
lib下找到mian.dart文件，删除main下的所有代码，替换为下面的代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
- 在项目目录中找到
pubspec.yaml，在文件中添加
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
但是在pubspec,yaml中，发现只是缺少english_words: ^3.1.0,添加这行代码
image.png
然后单击右上角的 Packages get这样就会将依赖包安装到项目中
pubspec.yaml
控制台中会显示以下内容
image.png
- 创建一个有状态的
StatefulWidget这个是用于展示ListView，根据不同的状态来展示不同的状态下的ListView。
import 'package:flutter/widgets.dart';
import 'package:fluttertest/RandomWordsState.dart';
//动态组件类,用于显示listview
class RandomWords extends StatefulWidget {
//返回状态,告诉widget不同情况下如何展示
@override
State<StatefulWidget> createState() {
return new RandomWordsStat();
}
}
- 构建
ListView创建RandomWordsState类
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:fluttertest/RandomWords.dart';
import 'package:english_words/english_words.dart';
//State 是当 Widget 被渲染或者在其生命周期中状态改变时，能同步读到相关信息的对象。当实例StatefulWidget 时
// 必须保证能正确使用 State.setState 来告知该 Widget的状态发生了变化。
class RandomWordsStat extends State<RandomWords>{
//Dart中加上 _表示私有化
final _suggestions = <WordPair>[]; //分析 1
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0); //分析 2
@override
Widget build(BuildContext context) {
return new Scaffold (
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[ //右上角按钮点击事件，跳转到下一个页面，所以要实现`_pushSaved`这个方法
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
// 在偶数行，该函数会为单词对添加一个ListTile row.
// 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
// 注意，在小屏幕上，分割线看起来可能比较吃力。
itemBuilder: (context, i) {
// 在每一列之前，添加一个1像素高的分隔线widget
//当时奇数时返回true
if (i.isOdd) return new Divider();
// 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
// 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
final index = i ~/ 2;
// 如果是建议列表中最后一个单词对
if (index >= _suggestions.length) {
// ...接着再生成10个单词对，然后添加到建议列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
//listView中的行,相当于cell
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
//右边的图标
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
//右上角跳转
void _pushSaved() {
Navigator.of(context).push( // 分析 1//通过Navigator.of(context).push来跳转页面
new MaterialPageRoute( // 分析 2 跳转的话我们需要一个路由
builder: (context) {
final tiles = _saved.map( //数据，从set中获取的数据
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return new Scaffold( // 分析 3 将要跳转的页面,body的内容是一个listView.展示的数据
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
}
}
在此处可以看到，onTap时调用了state.setState，这时会告诉框架重绘RandomWords这个widget
- 在main.dart中
import 'package:flutter/material.dart';
import 'package:fluttertest/RandomWords.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
);
}
}
此时我们就可以在手机上运行项目了。
Jul-03-2019 18-14-42.gif
虽说这个小demo已经出来了，但还是有一些不太了解的地方，下面列出了我觉得需要注意的地方。
- 首先我们需要知道
main.dart是程序的入口文件，类似iOS的AppDelegate文件，而在main文件中，默认执行的第一行代码就是
void main() => runApp(new MyApp());，也就是会最先执行下面的代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
);
}
}
-
StatelessWidgetStatefulWidget这两个是什么鬼，有什么区别？-
StatelessWidget是只有一种状态的组件，我理解的意思是不会变化的控件 -
StatefulWidget是有多种状态的组件，例如在demo中，点击的心形按钮发生改变，state的改变就会引起StatefulWidget的重绘
-
-
Widget build(BuildContext context)重写这个函数是干什么？BuildContext的作用是什么？- 首先要先解释
widget，这个可以理解为iOS中的基础控件UIVIiew，存放渲染内容、视图布局信息。然而Widget build就是起构建的方法，返回的Scaffold就是widget的布局信息。 -
BuildContext看下文档就知道这是一个抽象类，所以抽象类是不能直接调用方法的，implement或者extend都可以
image.png
再往上翻，我们会看到BuildContext的介绍，A handle to the location of a widget in the widget tree.，翻译过来就是widget在widget树中位置的句柄，句柄是widget资源、内存的标示号，所以我理解通过这个BuildContext可以获取或者更新对应的widget。
- 首先要先解释
关于
Set，这里默认继承的是LinkedHashSet，是按照元素插入的顺序迭代的，所以是有序的，而不是HashSet，因为HashSet是无序的。WordPair你可以把他理解为变异的String，当然是有所不同的，WordPair是两个String的拼接，在初始化的时候就已经将first second赋值了。
asPascalCase first和seconde首字母大写
asString 返回原始的string，不做修改
asLowerCase first 和second的首字母都是大写
asUpperCase 所有字母都大写
asCamelCase first首字母小写，second首字母大写
