内容简介:这是一次独立尝试,即独立完成实现Flutter文档第一个项目的最终效果,实现目标即首页为一个可无限滚动的单词列表,点击单词右边的小心心即可收藏或者取消收藏,可以在右上角的列表页查看收藏的单词,自己实现的效果如下: 首页:单词收藏页:看到这样一个功能,即可以分为两个页面,第一个页面本质就是一个列表页,每个列表分为两部分,即单词和收藏按钮,而第二个页面只需要显示单词,布局简单拆解:
这是一次独立尝试,即独立完成实现Flutter文档第一个项目的最终效果,实现目标即首页为一个可无限滚动的单词列表,点击单词右边的小心心即可收藏或者取消收藏,可以在右上角的列表页查看收藏的单词,自己实现的效果如下: 首页:
单词收藏页:
实现思路
看到这样一个功能,即可以分为两个页面,第一个页面本质就是一个列表页,每个列表分为两部分,即单词和收藏按钮,而第二个页面只需要显示单词,布局简单拆解:
接下我们就可以动手实践了,第一步添加需要用到的单词包english_words
,即在pubspec.yaml 中,将 english_words(3.1.0或更高版本)添加到依赖项列表:
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 english_words: ^3.1.0 复制代码
构建首页:
构建首页的appBar,同时注册第二个页面的路由和跳转按钮,以及定制一个简易棕色主题
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( // 去掉右上角的debug标识 debugShowCheckedModeBanner: false, title: 'First Flutter', // 为第二个页面注册路由 routes: { 'love_page': (context) => LovePage(), }, theme: ThemeData( primaryColor: Colors.grey, ), home: HomePage(), ); } } // 首页 class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Words List'), actions: <Widget>[ IconButton( // 第二个页面跳转按钮 icon: Icon(Icons.list), onPressed: () { Navigator.pushNamed(context, 'love_page'); }, ), ], ), // 单词列表页面 body: RandomWords()); } } 复制代码
构建单词列表及样式制定
构建一个单词列表,并定制列表单行(Container)的样式,比如背景white-black渐变效果,单词(child)字体大小及颜色,单词和按钮的布局,比如利用Expanded实现空白部分的扩充,使得“小心心”按钮靠右,利用ListView实现一个无线懒加载的单词列表等
// 单词列表页 class RandomWords extends StatelessWidget { @override Widget build(BuildContext context) { return new ListView.builder( itemBuilder: (BuildContext context, int index) { final _wordPair = WordPair.random(); // 单个单词行的定制,包括一个单词和一个小心心按钮 return Container( padding: EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( // 制作一个下边框作为每行的分割线 border: Border( bottom: BorderSide( color: Colors.black26, style: BorderStyle.solid)), // 背景颜色渐变 gradient: LinearGradient(colors: [Colors.white30, Colors.black12])), height: 40, child: Row( children: <Widget>[ Expanded( flex: 5, child: Text('$_wordPair', style: TextStyle(color: Colors.brown, fontSize: 30))), Expanded(flex: 2, child: LoveWords(word: _wordPair)), ], )); }, ); } } 复制代码
收藏'小心心'按钮实现
由于收藏点击小心心是个状态变化的过程,所以该小部件使用 StatefulWidget
定义,同时传递一个全局变量存储收藏的单词便于传递给第二个单词收藏页面显示,该按钮部件实现点击小心心时改变小心心颜色为红色同时存储点击行的单词,或者“取消收藏”
// 收藏“小心心”按钮实现 class LoveWords extends StatefulWidget { LoveWords({Key key, this.word}) : super(key: key); // 怎么获取当列的数据 final word; @override LoveWordsState createState() => new LoveWordsState(); } // 全局变量存储 喜欢的单词 列表 var _loveList = <WordPair>[]; class LoveWordsState extends State<LoveWords> { var _colors = Colors.brown[170]; var _icons = Icons.favorite_border; @override Widget build(BuildContext context) { return new IconButton( icon: Icon(_icons, size: 30, color: _colors), onPressed: () { setState(() { var word = widget.word; if (_colors == Colors.brown[170]) { _colors = Colors.red; _icons = Icons.favorite; // 使用widget.word。 _loveList.add(word); } else { _colors = Colors.brown[170]; _icons = Icons.favorite_border; _loveList.remove(word); } }); }, ); } } 复制代码
第二个页面: 单词收藏页面的实现
即显示收藏的单词,这里同样适用ListView展示收藏的单词列表,但是提前计算了收藏单词的数量限制了列表的大小,从而防止列表溢出。
// 显示喜欢的单词列表 页面 class LovePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar(title: Text('Favorite Words')), body: ListView.builder( // 限制列表数量 itemCount: _loveList.length, itemBuilder: (BuildContext context, int index) { return new Container( padding: EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black26, style: BorderStyle.solid)), gradient: LinearGradient( colors: [Colors.white30, Colors.black12])), height: 40, child: Row( children: <Widget>[ Expanded( flex: 5, child: Text(_loveList[index].toString(), style: TextStyle(color: Colors.brown, fontSize: 30))), ], )); }, ), ); } } 复制代码
Summary
虽然实现效果和官网大致相似,但是实现代码和思路都大相径庭,可以看出官网实现的Demo对Widgets的利用确实精湛,值得深入学习! 完整代码: github.com/kavener/Flu…
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- # 前端每日实战 168# 视频演示如何利用 Web Animation API 制作一个切换英语单词的交互动画
- 算法 – 给出一个单词,打印其索引,可以相应地增加单词
- Pocketsphinx – 添加单词和提高准确性
- Spark入门(三)--Spark经典的单词统计
- 每日一道算法题--leetcode 290--单词规则--python
- go基础库之将字符串分解为单词
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解SPARK
耿嘉安 / 机械工业出版社 / 2016-1-1 / 99
《深入理解SPARK:核心思想与源码分析》结合大量图和示例,对Spark的架构、部署模式和工作模块的设计理念、实现源码与使用技巧进行了深入的剖析与解读。 《深入理解SPARK:核心思想与源码分析》一书对Spark1.2.0版本的源代码进行了全面而深入的分析,旨在为Spark的优化、定制和扩展提供原理性的指导。阿里巴巴集团专家鼎力推荐、阿里巴巴资深Java开发和大数据专家撰写。 本书分为......一起来看看 《深入理解SPARK》 这本书的介绍吧!