Flutter 开发日记(一)
Android 原生的开发任务,暂时告一段落,然后扒开了安装了好久的Flutter,准备开始正儿八经的学习一下,然后找了一个小的Demo,试着理解与编写这门语言;
下面就是Demo的效果图,开发工具是用的android Studio,
Demo的右上角的是跳转按钮 使用到的依赖在我们的 pubspec.yaml 文件中
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.0#使用的依赖
开始找了半天,因为一直做得是android开发,不由自主的就去找android的字眼了;还有一个Ios,这里都不是我们页面所在的位置,直接点击上图的定位按钮,定位到我们的main.dart页面
这个是我的主页面代码也相对的非常简单
_第4张图片](http://img.e-com-net.com/image/info8/90a197a4ea0e4d2ca66dc5bce3e07701.jpg)
因为把我们的方法体抽出去了,所以看起来很简练,
runApp这里从名字就可以看出来使我们的程序主入口了
title 是我们的标题
那个theme这是改变我们的title的颜色的方法
具体的代码就是图上画红框的地方了,也就是我们的body体
首先我们来看看我们的RandomWords方法里面都有什么
class RandomWords extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return new RandomWordsState();
}
}
class RandomWordsState extends State {
//变量前面 加下划线 _ 代表私有化 类似java 中的private
final _suggestions = []; //用来存储的列表
final _biggerFont = const TextStyle(fontSize: 18.0);
final _saved = new Set(); //用来存储收藏的键值对
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
centerTitle: true, //这个属性用来让Title居中显示
title: new Text("呦呵,有点意思"), //这里用来设置我们的title
actions: [
//添加在顶部右侧的导航栏
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 = _saved.contains(suggestion);
return new ListTile(
title: new Text(
//这里用来给每一个lIstView的item添加一个头部内容
suggestion.asPascalCase, //此处进行数据的添加 Demo中使用的是一个添加第三方插件用来进行数据的添加
style: _biggerFont, //设置文字大小
),
trailing: new Icon(
//添加红心
alreadySaved ? Icons.favorite : Icons.favorite_border,
//这里的图标是Flutter本身自带的
color: alreadySaved ? Colors.red : null,
),
onTap: () {
// 在Flutter的响应式风格的框架中，调用setState() 会为State对象触发build()方法，从而导致对UI的更新
setState(() {
if (alreadySaved) {
_saved.remove(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的传送门
git传送门