这篇主要讲flutter最基本的操作。我们从一个实例入手，先不需要知道它里面的每一行是什么意思，我会慢慢说。
main.dart
import 'package:flutter/material.dart';
import 'model/post.dart'; void main() => runApp(App()); class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
theme: ThemeData(
primarySwatch: Colors.red
),
);
}
} class Home extends StatelessWidget {
Widget _listItemBuilder (BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.network(posts[index].imageUrl),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.title,
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subhead,
),
SizedBox(height: 8.0),
],
),
);
} @override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.grey[],
appBar: AppBar(
title: Text('Hello'),
elevation: 4.0,
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
} class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'hello liwenchi',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: ,
color: Colors.blue
),
)
);
}
}
第一行是指引入flutter自带的material风格的组件库。
第二行是指引入了一个自己定义的文件，同级目录下的model文件夹的post.dart，是自己创建的，里面有一些post，以便练习ViewList。
post.dart
import 'package:english_words/english_words.dart';
class Post {
const Post({
this.title,
this.author,
this.imageUrl
});
final title;
final author;
final imageUrl;
}
var wordPair = new WordPair.random();
final List<Post> posts = [
Post (
title: wordPair.asPascalCase,
author: wordPair.asPascalCase,
imageUrl: 'https://img1.gamersky.com/image2019/04/20190420_ljt_red_220_4/gamersky_020small_040_201942016592D9.jpg'
),
Post (
title: wordPair.asPascalCase,
author: wordPair.asPascalCase,
imageUrl: 'https://img1.gamersky.com/image2019/04/20190420_ljt_red_220_4/gamersky_019origin_037_2019420165980D.jpg'
),
Post (
title: wordPair.asPascalCase,
author: wordPair.asPascalCase,
imageUrl: 'https://img1.gamersky.com/image2019/04/20190420_ljt_red_220_4/gamersky_002small_004_201942016591DC.jpg'
),
Post (
title: wordPair.asPascalCase,
author: wordPair.asPascalCase,
imageUrl: 'https://img1.gamersky.com/image2019/04/20190420_ljt_red_220_4/gamersky_010origin_019_20194201659245.jpg'
)
];
void main() => runApp(App());
这里是main函数的箭头函数写法，runApp()的参数是一个widget，例如，这里的参数是App类的实例，因此可以推断，App类是Widget类的继承。
widget可以翻译为组件、部件，整个flutter应用就是由一个个widget组成的。
当一个类继承自widget部件的时候，要重写它的build方法，而这个build方法的返回值也是一个widget。就像上面的App类一样。
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
theme: ThemeData(
primarySwatch: Colors.red
),
);
}
}
因此，可以推断出，MaterialApp也是一个widget。但是我们可以看到，代码段中并没有定义MaterialApp类，因此可以推断出，他是package:flutter/material.dart中导入的widget。
根据我目前的学习，widget分为两种，StatelessWidget和StatefulWidget，大概是说，前者是无状态的（静态的，内容不会发生改变），而后者是有状态的，内容可以动态变化。
ListView
在本例的Home部件中，返回了一个Scaffold部件作为MaterialApp的home属性的值。其中，设置了backgroundColor属性为灰色和appBar，一个内容为Hello的导航栏，且导航栏的阴影大小为4.0，如果想设计成扁平化风格，还可以把elevation的值设为0。
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.grey[],
appBar: AppBar(
title: Text('Hello'),
elevation: 4.0,
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
其中主体部分是一个列表，在这里用的两个值 itemCount和 itemBuilder。
这里的 itemCount是这个 ListView的长度，且要小于等于真实的数量，否则会以找不到索引而报错。
itemBuilder的值应该是一个返回值是 widget的函数，在本例中是一个 container，一个 container包含一张图片，两行文字，和两个空高度作为分割文字的行高来使用。
Widget _listItemBuilder (BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Image.network(posts[index].imageUrl),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.title,
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subhead,
),
SizedBox(height: 8.0),
],
),
);
}
注意，这个函数的第二个参数index，是从0迭代到 itemCount - 1。