跨平台技术篇 - 尝试编写一个 Flutter app

现在来跟着编写一个简单的 Flutter app。

创建 Flutter app
使用外部包 (package)
添加一个有状态的部件 (Stateful widget)
创建一个无限滚动 ListView
添加交互
导航到新页面
使用主题更改 UI

1. 创建 Flutter app

这一步可以参考上篇文章：跨平台技术篇 - Flutter 安装配置，里面有创建 flutter app 的步骤。

1.1 修改 main.dart 的代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

1.2 运行

扫描二维码关注公众号，回复： 5957367 查看本文章

1.3 代码分析

来分析一下 main.dart 代码所做的事：

本示例创建一个 Material APP，Material 是一种标准的移动端和 web 端的视觉设计语言，Flutter提供了一套丰富的 Material widgets。
main() 函数使用了 (=>) 符号, 这是 Dart 中单行函数或方法的简写。
该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个 widget。在 Flutter 中，大多数东西都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。
Scaffold 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。widget 树可以很复杂。
widget 的主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widget 来显示自己。
本示例中的 body 的 widget 树中包含了一个 Center widget, Center widget 又包含一个 Text 子 widget。 Center widget 可以将其子 widget 树对齐到屏幕中心。

2. 使用外部包 (package)

在这一步中，你将开始使用一个名为 english_words 的开源软件包，其中包含数千个最常用的英文单词以及一些实用功能。你可以在 https://pub.dartlang.org/flutter/ 上找到 english_words 软件包以及其他许多开源软件包。

2.1 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

2.2 Package get 获取依赖包

点击右上角的 Package get 获取依赖包，控制台输出：

/Users/kuangzhongwen/Documents/flutter/bin/flutter --no-color packages get
Running "flutter packages get" in flutter_app...                    1.8s
Process finished with exit code 0

2.3 main.dart 中引入 english_words

import 'package:english_words/english_words.dart';

2.4 使用 english_words 中的文字

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random()
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
//          child: new Text('Hello World'),
            // “驼峰命名法” (称为 “upper camel case” 或 “Pascal case” ), 
          //  表示字符串中的每个单词（包括第一个单词）都以大写字母开头。
          // 所以，“uppercamelcase” 变成 “UpperCamelCase”
            child: new Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

运行，或者热重载，可以看到，会随机显示一个字符：

3. 添加一个有状态的部件 (Stateful widget)

Stateless widgets 是不可变的，这意味着它们的属性不能改变，即所有的值都是最终的。Stateful widgets 持有的状态可能在widget 生命周期中发生变化，实现一个 stateful widget 至少需要两个类:

一个 StatefulWidget 类。
一个 State类。 StatefulWidget 类本身是不变的，但是 State 类在 widget 生命周期中始终存在.

在这一步中，你将添加一个有状态的 widget-RandomWords，它创建其 State 类 RandomWordsState。State 类将最终为 widget维护建议的和喜欢的单词对。

3.1 添加有状态的 RandomWords widget 到 main.dart

它也可以在 MyApp 之外的文件的任何位置使用，但是本示例将它放到了文件的底部。RandomWords widget 除了创建 State 类之外几乎没有其他任何东西。

class RandomWords extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new RandomWordsState();
  }
}

3.2 添加 RandomWordsState 类

该应用程序的大部分代码都在该类中，该类持有 RandomWords widget 的状态。这个类将保存随着用户滚动而无限增长的生成的单词对，以及喜欢的单词对，用户通过重复点击心形 ❤️ 图标来将它们从列表中添加或删除。

class RandomWordsState extends State<RandomWords> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

3.3 实现 RandomWordsState 的 build 函数

class RandomWordsState extends State<RandomWords> {

  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

3.4 将生成单词对代的码从 MyApp 移动到 RandomWordsState 中

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
            child: new RandomWords(),
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new RandomWordsState();
  }
}

class RandomWordsState extends State<RandomWords> {

  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

每次热重载或重新启动应用程序时都会随机显示一个单词对。

4. 创建一个无限滚动 ListView

在这一步中，你将扩展 (继承) RandomWordsState 类，以生成并显示单词对列表。当用户滚动时，ListView 中显示的列表将无限增长。 ListView 的 builder 工厂构造函数允许你按需建立一个懒加载的列表视图。

4.1 向 RandomWordsState 类中添加一个 _suggestions 列表以保存建议的单词对

该变量以下划线 _ 开头，在 Dart 语言中使用下划线前缀标识符，会强制其变成私有的。另外，添加一个 biggerFont 变量来增大字体大小。

class RandomWordsState extends State<RandomWords> {

  // 数据源
  final _suggestions = <WordPair>[];
  // 字体大小 style
  final _biggerFont = const TextStyle(fontSize: 18.0);

  // ...
}

看不懂 Dart 语法没关系，下一篇将来详细写 Dart 的语法。

4.2 向RandomWordsState 类添加一个 _buildSuggestions() 函数

ListView 类提供了一个 builder 属性，itemBuilder 值是一个匿名回调函数，接受两个参数：BuildContext 和行迭代器 i。迭代器从 0 开始，每调用一次该函数，i 就会自增 1，对于每个建议的单词对都会执行一次。该模型允许建议的单词对列表在用户滚动时无限增长。

  Widget _buildSuggestions() {
    return new ListView.builder(padding: const EdgeInsets.all(16.0),
        // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
        // 在偶数行，该函数会为单词对添加一个ListTile row.
        // 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
        // 注意，在小屏幕上，分割线看起来可能比较吃力。
        itemBuilder: (context, i) {
          // 在每一列之前，添加一个1像素高的分隔线widget
          if (i.isOdd) return new Divider();
          // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
          // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
          final index = i ~/ 2;
          // 如果是建议列表中最后一个单词对
          if (index >= _suggestions.length) {
            // ...接着再生成10个单词对，然后添加到建议列表
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

4.3 对于每一个单词对，_buildSuggestions 函数都会调用一次 _buildRow

这个函数在 ListTile 中显示每个新词对，这使你在下一步中可以生成更漂亮的显示行，在 RandomWordsState 中添加一个 _buildRow 函数 :

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

4.4 更新 RandomWordsState 的 build 方法以使用 _buildSuggestions()

class RandomWordsState extends State<RandomWords> {

  // 数据源
  final _suggestions = <WordPair>[];
  // 字体大小 style
  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return new ListView.builder(padding: const EdgeInsets.all(16.0),
        // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
        // 在偶数行，该函数会为单词对添加一个ListTile row.
        // 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
        // 注意，在小屏幕上，分割线看起来可能比较吃力。
        itemBuilder: (context, i) {
          // 在每一列之前，添加一个1像素高的分隔线widget
          if (i.isOdd) return new Divider();
          // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
          // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
          final index = i ~/ 2;
          // 如果是建议列表中最后一个单词对
          if (index >= _suggestions.length) {
            // ...接着再生成10个单词对，然后添加到建议列表
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
}

4.5 修改 MyApp 代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

4.6 查看效果

重新运行或者热重载，效果如下：

那么每个 item 都创建一个 Text widget，是不是不太妥，有没有缓存机制，后面的文章我们会来分析探讨。当然对于 Flutter 的下拉刷新这种控件，早就有人做出来了：

import 'package:pull_to_refresh/pull_to_refresh.dart';

这篇文章先不做探讨。

5. 添加交互

在这一步中，你将为每一行添加一个可点击的心形 ❤️ 图标。当用户点击列表中的条目，切换其"收藏"状态时，将该词对添加到或移除出"收藏夹"。

5.1 添加一个 _saved Set (集合) 到 RandomWordsState

这个集合存储用户喜欢 (收藏) 的单词对。在这里 Set 比 List 更合适，因为 Set 中不允许重复的值。

class RandomWordsState extends State<RandomWords> {
  // 数据源
  final _suggestions = <WordPair>[];

  // 收藏的数据集合
  final _saved = new Set<WordPair>();

  // 字体大小 style
  final _biggerFont = const TextStyle(fontSize: 18.0);

  // ...
}

5.2 在 _buildRow 方法中添加图标

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      // trailing 为 item 后置图标
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
    );
  }

5.3 添加交互

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      // trailing 为 item 后置图标
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

为 item 添加点击事件，setState() 会触发 build 方法，使 widget 刷新。

5.4 查看效果

点击 item ❤️ 就会变红，再点击这个 item ❤️ 就会变灰。

6. 导航到新页面

在这一步中，你将添加一个显示收藏夹内容的新页面 (在 Flutter 中称为路由 (route))。你将学习如何在主路由和新路由之间导航(切换页面)。在 Flutter 中，导航器管理应用程序的路由栈。将路由推入 (push) 到导航器的栈中，将会显示更新为该路由页面。从导航器的栈中弹出 (pop) 路由，将显示返回到前一个路由，和原生 Android 一个道理。

6.1 在 RandomWordsState 的 build 方法中为 AppBar 添加一个列表图标

将该图标及其相应的操作添加到 build 方法中：

  void _pushSaved() {
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

6.2 向 RandomWordsState 类添加一个 _pushSaved() 方法

  void _pushSaved() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          final tiles = _saved.map(
                (pair) {
              return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = ListTile
              .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();

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

当用户点击导航栏中的列表图标时，建立一个路由并将其推入到导航管理器栈中，此操作会切换页面以显示新路由。
新页面的内容在 MaterialPageRoute 的 builder 属性中构建，builder 是一个匿名函数。添加 Navigator.push 调用，这会使路由入栈 (以后路由入栈均指推入到导航管理器的栈)。
添加 MaterialPageRoute 及其 builder。现在，添加生成 ListTile 行的代码。ListTile 的 divideTiles() 方法在每个 ListTile 之间添加 1 像素的分割线，该 divided 变量持有最终的列表项。
builder 返回一个 Scaffold，其中包含名为 "Saved Suggestions" 的新路由的应用栏。新路由的 body 由包含 ListTiles 行的ListView 组成，每行之间通过一个分隔线分隔。

6.3 查看效果

热重载应用程序。收藏一些选项，并点击应用栏中的列表图标，在新路由页面中显示收藏的内容。请注意，导航器会在应用栏中添加一个 "返回" 按钮。你不必显式实现 Navigator.pop，点击后退按钮返回到主页路由。

点击右上角图标跳转：

7. 使用主题更改 UI

在这最后一步中，你将会使用主题。主题控制您应用程序的外观和风格，你可以使用默认主题，该主题取决于物理设备或模拟器，也可以自定义主题以适应你的品牌。

7.1 通过配置 ThemeData 类轻松更改应用程序的主题

你的应用程序目前使用默认主题，下面将更改 primary color 颜色为白色。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

热重载应用，请注意，整个背景将会变为白色，包括应用栏。Material library中的 Colors 类提供了许多可以使用的颜色常量，你可以使用热重载来快速简单地尝试、实验。

7.2 查看效果

跨平台技术篇 - 尝试编写一个 Flutter app

猜你喜欢