这篇文章主要是关于我第一次写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,