flutter - 01 基础介绍以及ListView

这篇主要讲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。