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[200],
            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: 30,
                    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[200],
            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。