import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';//包
void main() => runApp(new MyApp());//主函数指向的方式允许该APP
class MyApp extends StatelessWidget {//全部class写在一块
@override
Widget build(BuildContext context) {//组件构造器
return new MaterialApp(//返回本组件构造器的内容
title: 'Startup Name Generator',//标题
home: new RandomWords(),//内容,内容用一个class实现
);
}
}
class RandomWords extends StatefulWidget {//这是一个有状态的组件
@override
createState() => new RandomWordsState();//里面创建的一个状态,新建一个方法
}
class RandomWordsState extends State<RandomWords> {//这个状态是通过一个随机字的库实现的
final _suggestions = <WordPair>[];//_suggestions列表以保存建议的单词对
final _saved = new Set<WordPair>();//私有变量,这个集合存储用户喜欢(收藏)的单词对
final _biggerFont = const TextStyle(fontSize: 18.0);//biggerFont变量来增大字体大小
@override
Widget build(BuildContext context) {//先是创建个组件构造器
return new Scaffold (//接下来就是return,下面就是内容了
appBar: new AppBar(//条栏,新建一个条栏,下面是内容
title: new Text('Startup Name Generator'),//字
actions: <Widget>[//导航到新页面
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),//就是一个按钮,点击的时候调用方法
],
),
body: _buildSuggestions(),//内容
);
}
void _pushSaved() {//列表图标将会出现在导航栏中
Navigator.of(context).push(//添加Navigator.push调用,这会使路由入栈
new MaterialPageRoute(//新页面的内容在此构建
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(//每个ListTile之间添加1像素的分割线
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),//新路由的body由包含ListTiles行的ListView组成; 每行之间通过一个分隔线分隔。
);
},
),);
}
Widget _buildSuggestions() {//_buildSuggestions() 函数. 此方法构建显示建议单词对的ListView
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// 对于每个建议的单词对都会调用一次itemBuilder,然后将单词对添加到ListTile行中
// 在偶数行,该函数会为单词对添加一个ListTile row.
// 在奇数行,该函数会添加一个分割线widget,来分隔相邻的词对。
// 注意,在小屏幕上,分割线看起来可能比较吃力。
itemBuilder: (context, i) {//接受两个参数- BuildContext和行迭代器i。迭代器从0开始, 每调用一次该函数,i就会自增1,对于每个建议的单词对都会执行一次。
// 在每一列之前,添加一个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]);
}
);
}
Widget _buildRow(WordPair pair) {//_buildSuggestions函数都会调用一次_buildRow。 这个函数在ListTile中显示每个新词对
final alreadySaved = _saved.contains(pair);//添加 alreadySaved来检查确保单词对还没有添加到收藏夹中
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(//添加一个心形 ❤️ 图标到 ListTiles以启用收藏功能
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {//在 _buildRow中让心形❤️图标变得可以点击。如果单词条目已经添加到收藏夹中, 再次点击它将其从收藏夹中删除。
// 当心形❤️图标被点击时,函数调用setState()通知框架状态已经改变
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
}
Flutter 官网的列表点击收藏
最新推荐文章于 2023-02-20 16:54:46 发布