有段时间没写博客了,这段时间一直在看flutter,刚开始看感觉有点怪怪的。于是先去撸了一遍官方文档,
Flutter官方文档,感觉有些收获啊!
前期还是环境的搭建,由于之前在公司写vue一直用的vscode,这次决定换成android studio,有完整的ide体验哦!
环境搭建有些小坑啊,因为刚换了电脑,所以这个flutter环境搞了两边~,蓝瘦。
flutter是用dart语言写的,我觉得除了ui构建有的怪以外,其他的跟js很相似。
进入正题吧
先看下面这段代码
import 'package:flutter/material.dart';
//import 'package:flutter_app/strings.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'start up',
theme: new ThemeData(
primaryColor: Colors.white
),
home: new Randomwords()
);
}
}
class Randomwords extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new RandomwordsState();
}
}
class RandomwordsState extends State<Randomwords> {
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(
title: new Text('start up appbar'),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
new IconButton(icon: new Icon(Icons.add), onPressed: _pushSaved),
new IconButton(icon: new Icon(Icons.create), onPressed: _pushSaved),
],
),
body: _buildSuggeststions(),
);
}
如果要导入dart文件直接import 就够了,跟html差不多
void main() => runApp(new MyApp()); 启动函数
StatelessWidget 是不需要可变状态的widget
StatefulWidget 是需要可变状态的widget。
import 'package:flutter/material.dart’ 这个地方导入的是flutter自带的组件库
Scaffold 可以理解为布局脚手架
class Scaffold extends StatefulWidget {
/// Creates a visual scaffold for material design widgets.
const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding = true,
this.primary = true,
}) : assert(primary != null), super(key: key);
对于flutter的布局,我觉得跟html有很多相似之处,就是堆积木的感觉,不管是什么界面,拆分开就好,
image.png
就拿上面这个界面来说,很明显可以拆分成,一个appbar,和一个listview,
而appbar我们在scaffold中就可以构建出来,listView就需要单独构建,可以放到body的位置,记住,所有的控件都是widget。
listView构造方法, listView有很多种构造方法,builder只是其中一种,
Widget _buildSuggeststions() {
return new ListView.builder(
padding: EdgeInsets.all(10.0), //padding
scrollDirection: Axis.vertical,//滑动方向
itemBuilder: (context, i) { //构建cell
if (i.isOdd) return new Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
下面是构建cell的方法,在onTap点击事件中,在setState中更新全局变量 _saved的数量,然后驱动状态UI更新。具体的原理就要设计flutter的生命周期了。
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
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);
}
});
},
);
}
第一篇先到这吧,这段时间应该会一直学习flutter了
https://github.com/Butteryflyyer/FlutterStudyDemo这是我学习flutter的代码地址,平时写的demo都会放到这里面。
网友评论