从零开始写第一个Flutter app（五）——ListView添加图标

目录

• 从零开始写第一个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,
      ),
    );
  }
}