Flutter - ListTile 的循环答案

【问题标题】：Flutter - Loops for ListTileFlutter - ListTile 的循环
【发布时间】：2017-11-17 06:37:20
【问题描述】：

不知道如何通过循环的方式生成多个ListTiles，比如for()。

我不知道 Flutter 是如何渲染小部件的，因为在 Angular 2 中只需在布局 (html) 中插入 *ngFor 指令。

我在 Flutter 文档中找不到这样的主题。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Myapp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView (
      children: <Widget>[
        new Card(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                leading: const Icon(Icons.album),
                title: const Text('The Enchanted Nightingale'),
                subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
              ),
            ],
          ),
        ),
      ],
    )    
  );
}

【问题讨论】：

标签： dart flutter

【解决方案1】：

List.generate() 对于制作小列表很有用。对于更大或无限的列表，请使用 ListView.builder() 而不是 ListView。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Myapp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: new Color(0xFF26C6DA),
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            child: const ListTile(
              leading: const Icon(Icons.album),
              title: const Text('The Enchanted Nightingale'),
              subtitle: const Text(
                'Music by Julie Gable. Lyrics by Sidney Stein.',
              ),
            ),
          );
        },
      ),
    );
  }
}

【讨论】：

【解决方案2】：

这是 List.generate 的示例：-

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Myapp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('List.generate demo'),
      ),
      body: new ListView(
        padding: const EdgeInsets.all(8),
        children: new List.generate(
          10,
          (index) => new ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
    );
  }
}

【讨论】：