跟上时代潮流，一起实践Flutter开发

文章概述

上一篇文章我们初体验了Flutter，了解了如何创建项目与热加载。本文我们通过完成一个列表的例子来进一步感受Flutter的使用效果。通过阅读本文你讲了解如下内容：

• 如何使用Android Studio开发Flutter应用
• 如何引入第三方库
• 了解Flutter项目的主要结构

示例效果如下

image

创建项目

打开Android Studio，File->New->New Flutter Project… 选择 Flutter Application， 输入项目名称、位置、描述等信息，选择Next，输入公司信息，点击FInish完成。项目打开后我们主要用如下图的功能：

image

引入第三方库

列表项目我们需要使用第三库来实现，Flutter的第三方库依赖放在pubspec.yaml文件中。 打开此文件，键入如下内容：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

dev_dependencies:

cupertino_icons 是一个字体图标库，english_words 是一个生成英文单词的库。

之后再命令行中执行如下命令

~/my/flutter/flutter_frist $ flutter packages get

你可能会遇到内容下载不下来的问题，这是墙的原因，通过修改国内镜像可以解决，

~/my/flutter/flutter_frist $ export PUB_HOSTED_URL=https://pub.flutter-io.cn
~/my/flutter/flutter_frist $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

再次执行 flutter packages get 即可获取依赖。

列表实现

准备好了上面内容，我们就可以去写代码完成今天的任务了。打开 main.dart ，清空里面的代码。输入如下代码：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; //引入第三方库头文件

void main() => runApp(MyApp()); //项目入口

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { //启动项目会自动执行build方法。
    return MaterialApp(
      title: "Startup Name Generator",
      home: RandomWord()
    );
  }
}

这段代码中我们引入了第三方文件，创建项目入口。

StatelessWidget 继承自 Widget。Widget是Flutter框架中的核心组件，StatelessWidget表示的是一个不可变的Widget。

当然上面代码还不能执行，我们需要实现RandomWord。

class RandomWordsStatus extends State {

  Widget _buildRow(WordPair pair) {
    @override
    Widget build(BuildContext context) {
      return Scaffold (
        appBar: AppBar(  //导航栏
          title: Text('Startup Name Generator'), //标题
          actions: [  //按钮
            IconButton(icon: Icon(Icons.list), onPressed: _pushSaved ,) 
          ],
        ),
        // body: _buildSuggestions(),
      );
    }
  }
}


class RandomWord  extends StatefulWidget {
  @override
  RandomWordsStatus createState() => RandomWordsStatus();
}

此时运行项目，你可得到一个带有导航条的空白页。

image

接下来我们完成列表

 Widget _buildSuggestions() {
    _suggestions.clear();
    _suggestions.addAll(generateWordPairs().take(20)); // 数据源 随机生成20个单词
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
        itemCount: _suggestions.length,
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider(); //显示分割线
        return _buildRow(_suggestions[i]); //显示文档
      });
  }

//渲染cell
Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile (
      title: Text(pair.asPascalCase,
      style: _biggerFont,
      ),
      trailing: Icon(
          alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors
            .red : null,
      ),
      onTap: () {  //点击事件
        setState( //此方法自动刷新界面。
            (){
              if(alreadySaved) {
                _saved.remove(pair);
              } else {
                _saved.add(pair);
              }
            }
        );
      },
    );

到这一步我们就能看到一个列表了。

下面我们实现点击事件。

void _pushSaved() {
    Navigator.of(context).push( //push下一个页面
      MaterialPageRoute(
        builder: (BuildContext context) {
          //
          final Iterable tiles = _saved.map(
                  (WordPair pair) {
                return ListTile(
                  title: Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              }
          );

          final List divided = ListTile
              .divideTiles(
              context: context,
              tiles: tiles
          ).toList();

          return Scaffold(
            appBar: AppBar(title: Text('saved Suggestions'),),
            body: ListView(children: 
                           divided,),
          );
        }
      )
    );
  }

总结

OK，到此我们的列表页面写完了，不知道你的程序有没有跑起来，你可以参照我的源代码来完善你的代码。
本文参考资料Flutter官方Demo，体验了Flutter的开发流程，个人觉得Flutter的开发体验要比React Native高效的多。当然本文中还有很多我们不明白的地方，在之后的文章中都会一一讲解。如果你对Flutter有兴趣可以关注我的公众号。

image