目录
- 从零开始写第一个Flutter app(一)——Hello World
- 从零开始写第一个Flutter app(二)——引用第三方包
- 从零开始写第一个Flutter app(三)——有状态的部件StatefulWidget
- 从零开始写第一个Flutter app(四)——无限滑动的ListView
- 从零开始写第一个Flutter app(五)——ListView添加图标
- 从零开始写第一个Flutter app(六)——添加点击事件交互
- 从零开始写第一个Flutter app(七)——弹出toast
- 从零开始写第一个Flutter app(八)——修改主题颜色
- 从零开始写第一个Flutter app(九)——route跳转新页面
- 从零开始写第一个Flutter app(十)——最终代码
这节课要实现的功能是在上节实现的基础上,在ListVIew的Item右边添加一个小图标,功能比较简单,先看下实现的效果
主要是修改_buildRow()方法,ListTitle的属性设置一个Icon,Icon的参数Icons.favorite_border是一个常量,这个图标是在Flutter SDK中内置的,无需再添加
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: Icon(
Icons.favorite_border, // 这是一个心形图标
),
);
}
到此为止就实现了添加图标的功能,比较简单,但是今天的这节是为下一节的添加交互做准备的,下一节代码量会多点
最终的lib/main.dart可运行的完整代码如下:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
home: RandomWords(),
);
}
}
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[]; // ListView用的数据源
final _biggerFont = const TextStyle(fontSize: 18.0); // 字体大小
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(), // body为一个ListView
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0), // 设置padding
itemBuilder: (context, i) {
if (i.isOdd) return Divider(); // 如果为基数,返回分割线
final index = i ~/ 2; // 由于divider也占一个位置,所以需除以2计算实际的index
// 若数据源不够,则一次性生成10条数据,这样就可以实现ListView无限滑动的效果
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
// 生成每一条item布局
return _buildRow(_suggestions[index]);
});
}
// 创建ListView的Item
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: Icon(
Icons.favorite_border,
),
);
}
}