flutter笔记4：使用material原生控件开发一个APP

2018-03-04 本文已影响688人燃烧的鱼丸

接着上一篇，我们做一个这样的APP：

flutter官方案例

开始之前，我发现了一个好玩的东西，每次我们在终端中输入命令：

flutter run

终端里会有这个东西：

APP调试器

按照上图所示，我们的进入这个网页看看是个啥:

调试器主页

好高大上的感觉，具体是干嘛的，我也不知道，有兴趣的同学可以点进去把玩把玩，以后搞明白了再更吧。

第一步

先创建一个列表。

回到main.dart中，把原来的代码全部清空，复制以下代码：

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: 'Startup Name Generator',
      home: new RandomWords(),//定义子组件为有状态控件RandomWords类的实例
    );
  }
}

//定义有状态控件RandomWords类
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();//创建有状态控件RandomWords的状态类实例：RandomWordsState
}

//定义状态类RandomWordsState
class RandomWordsState extends State<RandomWords> {
  @override
  final _suggestions = <WordPair>[];  //用于保存随机字符串词组，注意这是一个数组变量
  final _biggerFont = const TextStyle(fontSize: 18.0);   //用于标识字符串的样式

  //构建一个脚手架，里面塞入前面定义好的_buildSuggestions类
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(), 
    );
  }

  //定义一个子控件，这个控件就是放置随机字符串词组的列表
  Widget _buildSuggestions() {
    return new ListView.builder(  //ListView(列表视图)是material.dart中的基础控件
      padding: const EdgeInsets.all(16.0),  //padding(内边距)是ListView的属性，配置其属性值
      //通过ListView自带的函数itemBuilder，向ListView中塞入行，变量 i 是从0开始计数的行号
      //此函数会自动循环并计数，咋结束的我也不知道，走着瞧咯
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();//奇数行塞入分割线对象
        final index = i ~/ 2;  //当前行号除以2取整，得到的值就是_suggestions数组项索引号
        // 如果计算得到的数组项索引号超出了_suggestions数组的长度，那_suggestions就再生10个随机组合的字符串词组
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);//把这个数据项塞入ListView中
      }
    );
  }

  //定义的_suggestions数组项属性
  Widget _buildRow(WordPair pair) {
    //ListTile和Text都是material.dart中的基础控件
    return new ListTile(
      title: new Text(
        pair.asPascalCase,  //使用驼峰样式
        style: _biggerFont,
      ),
    );
  }
    
}

看到这里，是不是有点晕，各种声明、各种引用，还有回调，把上面的代码，用下面的图解析下结构，看看到底怎么个情况：

代码图解

可以发现在StatelessWidget和State类中都有一个Widget类型的函数build()，感觉有点像类的初始化方法construct()，而RandomWords对象为什么只使用了createState()却没有build()，我也不知道，走着瞧吧。当对象实例化的时候，首先执行Widget build(BuildContext context){}函数，函数中BuildContext类型的参数context，到目前为止还不知道干嘛用的，暂且忽略其意义吧。

material类型的子控件都通过回调函数的方式创建，我读起来有些不习惯，但通过回调，免去了先声明再使用的麻烦，并且可以直接对对象的属性进行配置，通过build()一层层回调，代码简洁不少，而代码中使用到的material内置控件，我就不一一介绍了，有兴趣的同学请参考material官方API，注意material控件索引在页面右边的列表，别找到左边去了。

注意，遇到这种声明类属性的格式：_[变量名]。按官方的意思是，如果变量名的前缀有_下划线，表示强制转换为私有变量，相当于声明变量为private，但使用这个变量的时候，还是要将下划线进行完整的书写。

保存代码后运行一下，可以看到APP变成了这个样子：

无限滚动的列表

向下滚动试试，发现可以一直滚下去~

第二步

向列表里加个收藏标签按钮，使每行可以标记收藏或取消收藏。这个收藏标签就是状态，既然要修改状态，肯定要到state中进行啦。

到对象RandomWordsState中定义一个对象，用于存储标记。为什么要单独存储标记呢？因为这样就不需要往行对象(ListTile)中添加标记，降低了对象的复杂度。如下：

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();  //新加这一句

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

为什么存储标记的是对象而不是一个数组呢？大概是想顺便教我们使用一下Set对象吧，据说Set对象不允许有重复的项目，方便后面模拟堆栈的效果，非常适合这种场景。然后我们到每个行添加一个标记收藏的控件：

Widget _buildRow(WordPair pair) {
    //定义一个布尔变量，用于判断行控件ListTile是否被标记为收藏
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      //安放图标控件
      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);
          }
        });
    },
    );
  }

注意，在onTap事件中，使用到了setState()方法（用过vue或react的玩家是不是很熟悉呀），在这个方法里修改变量值，即可触发state对象执行build()方法重绘对象。这里每次变更对象_saved后，都会重绘ListTile对象，而静态变量alreadySaved也被重新定义，因此不用担心alreadySaved值不被更新的问题，如果去除final关键字，Dart语法会报错，还请路过大神点拨一下原因。

保存代码后，可以看到APP刷新了，每一行都添加了一个心型图标，反复戳这个行，还自动配有动画效果：

实现标记按钮

第三步

加入一个导航栏样式的堆栈。

先往主页面控件(AppBar)中添加一个可以进入收藏列表的入口：

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        //为AppBar对象的actions属性添加一个IconButton对象，actions属性值可以是Widget类型的数组
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), 
          //可以试试添加这两行后APP上有什么效果
          new IconButton(icon: new Icon(Icons.add), onPressed: _pushSaved), 
          new IconButton(icon: new Icon(Icons.create), onPressed: _pushSaved), 
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

由于没有定义_pushSaved函数，直接复制上面注释说明的代码会报错，因此，定义一个void类型的函数_pushSaved:

class RandomWordsState extends State<RandomWords> {
  ...
  void _pushSaved() {
  }
}

这时候可以看到右上角多了3个图标，如图：

创建收藏夹入口图标

然后我们往_pushSaved()函数中添加代码，让收藏夹玩起来：

void _pushSaved() {
    //创建导航栏控件Navigator，然后往里面塞入MaterialPageRoute控件
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          //通过遍历_saved对象，获取已收藏的行对象
          final tiles = _saved.map(
                (pair) {
              return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          //函数的的链式调用，获取到添加好分割线的ListTile控件
          final divided = ListTile
              .divideTiles(            //divideTiles()函数，向每个tile间隔插入一个1像素宽的边框
                context: context, 
                tiles: tiles,
              )
              .toList();  //不要漏掉这个函数，否则进入收藏夹直接崩溃
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('收藏的列表项目'),
            ),
            body: new ListView(children: divided),  //直接将准备好的ListTile塞入其中，完成内容填充
          );
        },
      ),
    );
  }

保存代码后，刷新APP，如图：

两个页面相互跳转

如上图所示，红色的箭头表示点击按钮后页面的切换，绿色箭头表示收藏夹的值的对照，有没有发现我们并没有写返回主页按钮的代码，这个返回按钮从哪来的呢？是由Navigator对象自动生成的，并且自动指向到主页面的路由，不过遗憾的是，没有加入返回手势的支持，如有需要，还得自己写，具体怎么写，跟着我的笔记走吧，我现在也不知道。

大家注意看主页列表和收藏夹列表的区别，两者都是列表，都是使用的ListView和ListTile对象，但实现的方式完全不同，插入行对象和分割线的差异很有意思，有兴趣的同学可以自行修改下代码，看看能不能将两种列表的构建方法对调一下，参考官方资料ListView和ListTile

第四步

变更UI主题风格。

这一步超级简单，往MaterialApp对象里添加theme属性值即可：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      //添加theme属性值，塞入ThemeData对象
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

再保存，刷新APP试试，主题变成了白色风格：

变更风格

ThemeData()方法本身提供了很多配色方案，玩家可以参考ThemeData官方说明，掌握其强大功能。没想到变更主题如此轻松，在当前APP界越来越追求视觉体验升级的趋势下，使用flutter开发APP的玩家应该欣慰不少吧~

好勒，这次官方萌新课程的搬运就到这里，我是真的超喜欢这个萌新课程，连课程总结都帮我写好了:

从头开始创建一个Flutter应用程序。
书写了Dart语言的代码。
学会了调用外部的第三方库。
体验热更新带来的开发周期加速。
学会使用有状态控件，增强了应用的交互。
使用ListView和ListTiles创建了一个支持懒加载的无限滚动列表。
创建了一组路由并实现了主路由和新路由之间的跳转逻辑。
了解如何使用主题更改应用UI的外观。

自我总结一下，flutter是一个控件高度集成化的开发平台，控件的完整度极高，控件之间的交互实现也倾向于傻瓜化，比如自动生成返回按钮、主题风格全局可控。只要把握好状态值和控件之间的嵌套关系，开发者几乎不需要单独敲代码实现跳转逻辑，代码简直不要太简洁，不知不觉间就写好了一个APP。而VScode中的Dart Code插件也实在太好用，代码提示、函数用法和参数都有详尽的说明，看得出谷歌拿出了十足的诚意要在跨平台开发上面大搞特搞一番。

Dart Code插件提示

当然了，满屏幕的回调函数让我这种编程思维还停留在C语言时代的菜鸟来说，扶墙~ 头有点晕，还需要点时间慢慢适应一下下，也由于我没有那么深厚的技术功底，对这个教程的理解还比较有限，可能有写的不对或不好的地方，也欢迎大家指正，尤其我花了一天一夜写了这篇稿也是蛮不容易了，有路过的高手不说两句也是哪啥了是吧。当然，我有空的时候抓紧读一读Dart 语法基础和官方原版，有了新的发现也会写稿分享出来。

好啦就写到这里，广告时间，对flutter感兴趣的小伙伴可以关注我，欢迎大家到Flutter圈子中投稿，也可以联系管理员加入我们的flutter微信群嗨聊，谢谢捧场~！
flutter 中文社区（官方QQ群：338252156）

flutter笔记4：使用material原生控件开发一个APP

第一步

第二步

第三步

第四步

猜你喜欢

热点阅读