Flutter 入门实现 ListView 列表页面以及收藏页面

于 2019-01-06 21:34:41 发布
阅读量4.3k 收藏 7
点赞数 2
分类专栏： Flutter 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITxiaodong/article/details/85951992
版权

相关文章
Flutter 环境搭建以及填坑指南（Win10 系统且已有 Android 开发环境 ）
Flutter 入门实现 ListView 列表页面以及收藏页面
Flutter Widget 静态布局实战
Flutter 容器类 Widget

实现的效果图（官网示例）

官网示例

作为一个 Android 开发者，实现这个功能那肯定是分分钟的事，但是现实是用 flutter 实现，那么需要如何来实现呢？

通过拆分我们可以得到如下要实现的功能：

  • 顶部标题栏
  • 可滑动的列表
  • 可收藏和取消的点击图标
  • 页面跳转

在开始实现效果之前，我们先来了解一下代码结构，入口在lib/main.dart,目前所有的代码都先在里面实现。

在这里使用了一个第三方库，用于提供随机的英文词组，所以需要先添加第三方库，我们在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

然后在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(),
    );
  }
}

从上面的代码可以看出我们的MyApp是继承自StatelessWidget的，这将会使应用本身也成为一个widget。

这里的widget有两种，一种是StatelessWidget，另一种是StatefulWidget.。

前者是无状态的widget也就是不可进行交互，后者是有状态的widget，可进行交互且自己维护自身的状态。(这块本人愚钝还有点说不清楚，待日后再详解，网上也有文章介绍)。

在Flutter中，大多数东西都是widget。在上面的代码中RandomWords是我们自定义的一个Widget。它的实现如下：

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

可以看出它继承的是StatefulWidget，也就是继承了有状态的widget。

dart中可以通过=>创建一个widget，这里就通过createState() => new RandomWordsState();创建了一个自定义的widget。

RandomWordsState的实现如下：


class RandomWordsState extends State<RandomWords> {
  // 保存建议的单词对
  final _suggestions = <WordPair>[];
  // 集合存储用户喜欢（收藏）的单词对
  final _saved = new Set<WordPair>();

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


  @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(),
    );
  }

  // listView 列表
  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]);
        }
    );
  }
  // listView 每一行的内容和样式
  Widget _buildRow(WordPair pair) {
    // 检查确保单词对还没有添加到收藏夹中
    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);
          }
        });
      },
    );
  }

  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,
              ),
            );
          },
        );
        // 添加1像素的分割线
        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),
        );
      },
    ),);
  }
}

可以看出自定义一个有状态的widget需要继承自State，默认需要重载 build方法。在build方法中可以看到好几个new出来的widget。

而在appBar中就可以设置标题栏的内容。
body:_buildSuggestions()中设置的就是列表显示的内容，在dart中方法名前的_表示私有方法。

在_buildSuggestions中创建了ListView widget用于显示列表，而列表中的文字是通过ListTile widget来实现的。

在列表中的收藏和取消收藏的实现 是由final _saved = new Set<WordPair>();来控制的。如果在_saved中存在则移除收藏，不存在则添加收藏。

分页的实现 是通过判断是否是最后一条数据，是的话直接再获取10条数据添加到列表中。

// 如果是建议列表中最后一个单词对
if (index >= _suggestions.length) {
   // ...接着再生成10个单词对，然后添加到建议列表
    _suggestions.addAll(generateWordPairs().take(10));
}

如果我们觉得蓝色的背景的样式不好看，可以通过在MyApp中添加theme修改：

// 修改主题颜色
 theme: new ThemeData(
 primaryColor: Colors.white,
),

至此，我们的第一个应用就实现到这了，后续学习了新的知识再完善。

参考

官网示例 ：https://flutterchina.club/get-started/codelab/

完整代码如下：

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: 'Startup Name Generator',
      // 修改主题颜色
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  // 保存建议的单词对
  final _suggestions = <WordPair>[];
  // 集合存储用户喜欢（收藏）的单词对
  final _saved = new Set<WordPair>();

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


  @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(),
    );
  }

  // listView 列表
  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]);
        }
    );
  }
  // listView 每一行的内容和样式
  Widget _buildRow(WordPair pair) {
    // 检查确保单词对还没有添加到收藏夹中
    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);
          }
        });
      },
    );
  }

  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,
              ),
            );
          },
        );
        // 添加1像素的分割线
        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),
        );
      },
    ),);
  }

}
_龙衣
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_龙衣

赏杯快乐水喝喝

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值