flutter项目：启动名称生成器（代码解析）

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’,
theme: new ThemeData(
primaryColor: Colors.yellow,//改变主题的颜色
),
home: new RandomWords(),
);
}
}
//RandomWords除了创建State类，没有任何其他的东西
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
//RandomWordsState存放主要的代码
class RandomWordsState extends State < RandomWords > {
//_suggestions列表，保存建议的单词对Dart语言中使用下划线前缀标识符，会强制其变成私有的。另外添加biggerFont变量来增大字体大小。
final _suggestions = < WordPair >[];
//添加一个_saved Set集合到RandomWordState。这个集合存储用户喜欢（收藏）的单词对。在这里Set比List更合适，因为Set中不允许重复的值
final _saved = new Set< WordPair >();
//字体大小设置
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
//build
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Startup Name Generator’),
//提示: 某些widget属性需要单个widget（child），而其它一些属性，如action，需要一组widgets(children），用方括号[]表示。
//在RandomWordsState的build方法中为AppBar添加一个列表图标。当用户点击列表图标时，包含收藏夹的新路由页面入栈显示:
actions: < Widget >[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)
],
),
body: _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]);
},
);
}
//对于每一个单词对，_buildSuggestions函数都会调用一次_BuildRow。这个函数在ListTile中显示每个新词对，这可以让你在下一步中可以生成漂亮的显示行_buildRow函数。
Widget _buildRow(WordPair pair) {
//_buildRow()中添加alreadySaved来检查确保单词对还没有添加到收藏夹中
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
//同时在_buildRow()中，添加一个心形图标到ListTiles以启用收藏的功能。接下来就能给心形图标添加交互功能了，重新启动，就能在每一行看到心形了，但是他们还没有交互（点击）
trailing: new Icon(
alreadySaved ? Icons.adb: Icons.stars,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
//调用setState()函数来通知框架状态已经改变了，即是点击心形收藏，再次点击从收藏夹中删除
setState(
() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
},
);
},
);
}
//提示: 在Flutter的响应式风格的框架中，调用setState() 会为State对象触发build()方法，从而导致对UI的更新

//向RandomWordsState类添加一个 _pushSaved() 方法
当用户点击导航栏中的列表图标时，建立一个路由，并将其推入到导航管理器栈中。
此操作会切换页面已显示新路由。
新页面的内容在MaterialPageRoute的builder属性中构建，builder是一个匿名函数。
void _pushSaved() {
//添加Navigator.push调用，这使路由入栈（路由入栈皆指推入到导航管理器的栈）
Navigator.of(context).push(
//添加MaterialPageRoute及其Builder
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
//ListTile的divideTiles()方法在每个ListTile之间添加1像素的分割线。该divided变量持有最终的列表项。
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
//builder返回一个Scaffold，其中包含名为“Saved Suggestions”的新路由的应用栏。
新路由的Body由包含ListTiles行的ListView组成；每行通过一个分割线分隔
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Saved Suggestions’),
),
body: new ListView(children: divided),
);
},
),
);
}
}

flutter项目：启动名称生成器（代码解析）相关推荐

Flutter项目启动时黑屏解决办法
我的flutter项目是带一个动画启动页的,在真机上开启app时,遇到以下现象: 白屏几秒->黑屏几秒->动画启动页. 研究了很多文献,一直想解决这个问题,目前已经得到了安卓上的解决办法. ...
嵌入式linux的u-boot系统启动过程,嵌入式linux操作系统u-boot启动顺序以及代码解析...
嵌入式linux操作系统u-boot启动顺序以及代码解析 (9页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 Bootloader/u-bo ...
【项目实战】WaveNet 代码解析 —— train.py 【更新中】
WaveNet 代码解析 -- train.py 文章目录 WaveNet 代码解析 -- train.py 简介代码解析全局变量解析函数解析 main() get_arguments() va ...
java中项目启动时加载_如何在项目启动时，加载或解析某配置文件
在web项目中有很多时候需要在项目启动时就执行一些方法,而且只需要执行一次,比如:加载解析自定义的配置文件.初始化数据库信息等等,在项目启动时就直接执行一些方法,可以减少很多繁琐的操作. 在工作中遇到 ...
Flutter学习笔记02：初探Flutter项目
文章目录一.创建Flutter项目二.项目目录文件说明 (一)android目录 (二)ios目录 (三)lib目录 (四)test目录 (五)pubspec.yaml文件三.调试运行App ( ...
flutter 项目实战二网络请求
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...
flutter 项目实战四列表数据展示
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...
根据名称获得treeview节点_冶金行业首个！中冶赛迪正式启动工业互联网标识解析二级节点建设...
近日,国家工业和信息化部信息技术发展司公示了"2020年工业互联网创新发展工程-工业互联网标识解析二级节点(特定行业应用服务平台)项目"候选人名称.由中冶赛迪重庆信息技术有限公司牵 ...
网络云盘项目——HTTP接口介绍、功能介绍、服务端/客户端代码解析
一.本文目的本项目分为6篇博客文章完成: 1.项目总体介绍:https://blog.csdn.net/qq_41453285/article/details/107871393. 2.Redis部 ...

flutter项目：启动名称生成器（代码解析）

flutter项目：启动名称生成器（代码解析）相关推荐

最新文章

热门文章