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

文章概述

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

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

示例效果以下

建立项目

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

引入第三方库

列表项目咱们须要使用第三库来实现，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<RandomWord> {

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


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

复制代码

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

接下来咱们完成列表

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<void>(
        builder: (BuildContext context) {
          //
          final Iterable<ListTile> tiles = _saved.map(
                  (WordPair pair) {
                return ListTile(
                  title: Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              }
          );

          final List<Widget> 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有兴趣能够关注个人公众号。