这篇文章主要是关于我第一次写flutter的一些坑，如果你是一个新手建议你先去跟着官网走，遇到了问题可以来查一下有没有解决方案。
flutter的中文官网：https://flutterchina.club/
flutter是一种自动生成跨平台app的应用，由于可以通过一次编码实现多个平台的应用，加上它的编程也比较简单，在近几年受到了广泛的应用。由于我工作上要做一个android的app，而且之后有可能要扩展到ios平台上，所以最近开始学习flutter的相关知识。
之前有一段时间在ubuntu上工作，然后就先用ubuntu试着装了一下，感觉效果不太好，而且性能的利用率比较差，所以后来又转为在windows上进行开发了。
运行示例程序
坑0.首先我没有一个安卓终端，所以得自己先搞一个模拟器，这个android studio有提供，打开Tools-AVD manager然后create一个就可以了，我要适用的华为的M6平板，所以选的是Nexus10的屏幕，+android q 10.0的这个系统版本。
这个AVD模拟器跟运行程序是分开来开的，你在运行程序之前得先启动这个AVD，然后等设备那一栏出现了可以使用的设备，才能运行程序。
坑1.卡在grade assembDebug，由于中国GFW的原因，我们登不上google，所以要把gradle的获取地址更换一下，详情请见
https://segmentfault.com/a/1190000021451897?utm_source=tag-newest
自己开始制作小样例
flutter制作的东西基本上都是由widget构成的，widget可以看作是一种，内置了一些小程序的服务，这种理念我觉得类似于java把所有的变量都搞成一个类那个样子。
flutter工具包使用的是dart语言，这个语言还是比较全栈的，基本上什么应用都能覆盖，但是问题是语法跟之前我用的其他语言都不太一样。
难0.首先在这个样例里面有两种extend的类型1.StatelessWidget（不可变） 2.StatefulWidget（可变）
其中第二个可变的类型又由一个 StatefulWidget类和一个 State类构成，是不是有点绕...
我们可以看出来其实主要的修改工作都是在这个extend为State的类当中进行，Dart的某些语法跟Java大概是一脉相承吧，比如说这个final，就是写好了不能修改的意思，有点类似于C++里的const。
简单的架构
我大概看了2个小时才把这些类里面的每个东西都搞懂，其实不是很难，但是由于语法不太熟悉，比如说这种isOdd是判断奇偶，还有这种循环的方式。
难1.这个循环并不是像我们之前学过的那种for循环或者是while循环，它更像是一种迭代器，当需要显示新的单词的时候，就会调用_buildSuggestions这个函数，然后就会一层一层往下调用，通过index >= _suggestions.length来判断是否单词库里的单词都用完了，如果用完了就往里面加，这样就实现了无限循环。（但是这里具体怎么实现往下拉的时候调用这个函数，还不是特别清楚）
然后我们开始设计一个可以选择单词的交互，如果选中了会变成填充的心，没有选中就是一个空心，是否之前选择过，要通过一个bool量来进行判断。
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.pink : null,
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
这段程序隶属于buildRow这个函数底下，每次生成单词的时候才会调用，trailing是设置心形图标的，opTap是判断整个单词的方框是否被点击的，被点击会出现效果，并对这个单词的状态进行改变。
加上任务栏
我们把选中的单词进行一个保存，然后在这个新的界面上显示出来，调用新界面是通过按下一个icon（图标）来实现的。
Widget build(BuildContext context) {
return new Scaffold (
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
这是RandomWordsState当中的build函数，里面的action就是一个按压的动作，先是创建了一个icons.list的图标，然后按压之后就会调用_pushSaved这个函数。
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Word list'),
),
body: new ListView(children: divided),
);
},
),
);
}
这些就跟上面基本上是类似的了，就是通过保存单词的数组_saved生成一个列表，map这个遍历方式，有点类似于python的map，感觉这个语言的很多函数都是其他的语言挑出来的。
最后还附加了一个修改界面颜色的配置，在myApp类的build函数里加入下面这段程序就可以改变。
theme: new ThemeData(
primaryColor: Colors.red,
最终效果
网友评论