Flutter开发⽇记（⼀）
Android 原⽣的开发任务，暂时告⼀段落，然后扒开了安装了好久的Flutter，准备开始正⼉⼋经的学习⼀下，然后了⼀个⼩的Demo，试着理解与编写这门语⾔;
下⾯就是Demo的效果图，开发⼯具是⽤的android Studio,
Demo的右上⾓的是跳转按钮 使⽤到的依赖在我们的 pubspec.yaml ⽂件中
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.0#使⽤的依赖
⾸先我们来看看我们的RandomWords⽅法⾥⾯都有什么
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new RandomWordsState();
}
}
class RandomWordsState extends State<RandomWords> {
//变量前⾯加下划线  _  代表私有化类似java 中的private
final _suggestions = <WordPair>[]; //⽤来存储的列表
final _biggerFont = const TextStyle(fontSize: 18.0);
final _saved = new Set<WordPair>(); //⽤来存储收藏的键值对
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
centerTitle: true, //这个属性⽤来让Title居中显⽰
title: new Text("呦呵，有点意思"), //这⾥⽤来设置我们的title
actions: <Widget>[
//添加在顶部右侧的导航栏
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)        ],
),
body: _buildSuggestions(), //这⾥是我们title下⽅的展⽰内容
);
}
//这个⽅法是添加⼀个ListView控件
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(0.0),
// 对于每个建议的单词对都会调⽤⼀次itemBuilder，然后将单词对添加到ListTile⾏中
// 在偶数⾏，该函数会为单词对添加⼀个ListTile row.
/
/ 在奇数⾏，该函数会添加⼀个分割线widget，来分隔相邻的词对。
itemBuilder: (context, i) {
if (i.isOdd) return new Divider(); //在⼀个item之前添加⼀个⼀像素的线
// 语法 "i ~/ 2" 表⽰i除以2，但返回值是整形（向下取整），⽐如i为：1, 2, 3, 4, 5
// 时，结果为0, 1, 1, 2, 2，这可以计算出ListView中减去分隔线后的实际单词对数量
final index = i ~/ 2;
print("zzzzzzzzzzzzz  ${index}"); //这⾥⽤来打印log ⽇志，应该在info⼀级
if (index >= _suggestions.length) {
//⽣成
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
//这个⽅法⽤来给listView中的每⼀个item添加数据
Widget _buildRow(WordPair suggestion) {
final alreadySaved = _ains(suggestion);
return new ListTile(
title: new Text(
flutter sdk//这⾥⽤来给每⼀个lIstView的item添加⼀个头部内容
suggestion.asPascalCase, //此处进⾏数据的添加 Demo中使⽤的是⼀个添加第三⽅插件⽤来进⾏数据的添加
style: _biggerFont, //设置⽂字⼤⼩
),
trailing: new Icon(
//添加红⼼
alreadySaved ? Icons.favorite : Icons.favorite_border,
//这⾥的图标是Flutter本⾝⾃带的
color: alreadySaved ? d : null,
),
onTap: () {
//        在Flutter的响应式风格的框架中，调⽤setState() 会为State对象触发build()⽅法，从⽽导致对UI的更新
setState(() {
if (alreadySaved) {
_ve(suggestion); //删除
} else {
_saved.add(suggestion); //添加
}
});
},
);
}
}
这⾥⾯得代码只是创建了⼀个类，并将主题⽅法抽出到我们的RandomWordsState()⾥⾯，这⾥的new RandomWordsState() 我个⼈理解为应该算是把那⼀整段 代码拿了过来，然后在⾥⾯设置我们的title,body，等等这些内容，这时候运⾏程序我们已经可以看到⼀个⽆限的listView了，接下来我们就是需
要向我们的列表添加交互了 这⾥我在写的时候还去了⼀张 桃⼼的图⽚，结果发现不需要，因为系统的素材库⾃带有相当多的素材，基本上我们写demo 是⾜够使⽤了;
这⾥以及基本够我们进⾏代码的交互了，点击选择的item,⼩红⼼就变红了，然后你会注意到我们的页⾯右上⾓有⼀个导航键，点击是没有反应的,
这⾥的我⽤来做页⾯交互了，在我们的_pushSaved ⽅法中添加⽅法,
//  RandomWordsState类添加⼀个 _pushSaved() ⽅法.
void _pushSaved() {
Navigator.of(context).push(new MaterialPageRoute(
// ignore: missing_return
builder: (context) {
final tiles = _saved.map((suggestion) {
return new ListTile(
title: new Text(
suggestion.asPascalCase,
style: _biggerFont,
),
);
});
final divided = ListTile.divideTiles(
tiles: tiles,
context: context,
).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text("Saved Suggestions"),
),
body: new ListView(children: divided),
);
},
));
}
⽤来进⾏我们选中数据的传递，以及页⾯的跳转；不过写这个⽅法的时候因为括号太多，好⼏次都⼩括号套花括号，把我套蒙了，暂时还没有到⼀个可以⾃动补全括号的插件；如果有的话可以给我留⾔；暂时第⼀个⼩⼩的demo就写到这⾥了；如果那⾥有不对，欢迎⼤家指正
留下demo的传送门

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。