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

klb 2019-06-26

接着上一篇,我们做一个这样的APP:
flutter笔记4:使用material原生控件开发一个APP

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

flutter run

终端里会有这个东西:
flutter笔记4:使用material原生控件开发一个APP

按照上图所示,我们的进入这个网页看看是个啥:
flutter笔记4:使用material原生控件开发一个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,
      ),
    );
  }
    
}

看到这里,是不是有点晕,各种声明、各种引用,还有回调,把上面的代码,用下面的图解析下结构,看看到底怎么个情况:
flutter笔记4:使用material原生控件开发一个APP

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

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

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

保存代码后运行一下,可以看到APP变成了这个样子:
flutter笔记4:使用material原生控件开发一个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刷新了,每一行都添加了一个心型图标,反复戳这个行,还自动配有动画效果:
flutter笔记4:使用material原生控件开发一个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个图标,如图:

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

然后我们往_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,如图:
flutter笔记4:使用material原生控件开发一个APP

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

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

第四步

变更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试试,主题变成了白色风格:

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

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

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

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

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

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

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

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

相关推荐