Flutter列表组件学习：从入门到实践-原创手记-慕课网

概述

本文全面介绍了flutter列表组件的学习，包括ListView和GridView的基本用法和应用场景。通过动态生成和性能优化等技巧，帮助开发者轻松创建高效、响应式的用户界面。文中还提供了丰富的示例代码，详细讲解了如何实现列表项的交互和状态管理。

Flutter 列表组件简介

列表组件是 Flutter 开发中最常见的组件之一，它们用于展示和管理大量元素的集合。列表组件可以帮助开发者轻松地创建动态、响应式的用户界面，广泛应用于新闻应用、社交媒体、电商应用、待办事项列表等场景。

列表组件的作用和应用场景

列表组件的主要作用包括：

展示内容

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(title: Text('好友列表示例')),
       body: ListView(
         children: [
           ListTile(title: Text('好友1')),
           ListTile(title: Text('好友2')),
           ListTile(title: Text('好友3')),
           ListTile(title: Text('好友4')),
         ],
       ),
     ),
   );
 }
}

用户交互
用户可以通过点击、长按等操作与列表中的元素进行交互，实现跳转、编辑等行为。
性能优化
通过使用 ListView.builder 和 GridView.builder，可以显著提高渲染大量数据时的性能。
状态管理
列表组件可以方便地实现状态管理，例如选中、删除等功能。

常见的列表组件类型介绍

在 Flutter 中，常见的列表组件类型有 ListView 和 GridView。它们可以根据需求选择不同类型的布局来展示内容。

ListView

ListView 是最常用的列表组件，可以展示垂直或水平排列的项目。常用的构造方法包括 ListView.builder 和 ListView.separated，它们可以优化性能和间距管理。
GridView

GridView 用于展示网格布局的内容，常见的有正方形网格、长方形网格，甚至可以实现复杂的自定义单元格样式。GridView.builder 和 GridView.count 是常用的构造方法。

ListView 基础使用

ListView 的基本构造方法

ListView 提供了多种构造方法，常用的是 ListView.builder 和 ListView.separated。

ListView.builder：适用于需要动态生成大量列表项的场景，例如新闻列表、商品列表等。
ListView.separated：适用于需要自定义间距的场景，可以在项目之间插入分割线或其他自定义组件。

创建简单的垂直列表和水平列表

下面将展示如何创建一个简单的垂直列表和一个水平列表。

垂直列表示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('垂直 ListView 示例')),
        body: ListView(
          children: [
            ListTile(title: Text('项目1')),
            ListTile(title: Text('项目2')),
            ListTile(title: Text('项目3')),
            ListTile(title: Text('项目4')),
          ],
        ),
      ),
    );
  }
}

水平列表示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('水平 ListView 示例')),
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(child: Text('项目1')),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(child: Text('项目2')),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Center(child: Text('项目3')),
            ),
          ],
        ),
      ),
    );
  }
}

ListView 与滚动条的关系

ListView 默认支持滚动条。滚动条会根据屏幕的大小自动调整，当内容超出屏幕高度时，会自动显示滚动条。如果需要自定义滚动条样式，可以通过 Scrollbar 组件来实现。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('自定义滚动条示例')),
        body: Scrollbar(
          child: ListView(
            children: [
              ListTile(title: Text('项目1')),
              ListTile(title: Text('项目2')),
              ListTile(title: Text('项目3')),
              ListTile(title: Text('项目4')),
            ],
          ),
        ),
      ),
    );
  }
}

GridView 的应用

GridView 的基本概念和构造方法

GridView 用于展示网格布局的内容，常用的构造方法包括 GridView.builder 和 GridView.count。

GridView.builder：适用于动态生成大量网格项的场景。
GridView.count：适用于固定数量的网格项。

实现网格布局的示例

下面展示如何使用 GridView.builder 实现一个简单的网格布局。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView 示例')),
        body: GridView.builder(
          itemCount: 100,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
          ),
          itemBuilder: (context, index) {
            return Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(child: Text('项目 $index')),
            );
          },
        ),
      ),
    );
  }
}

动态添加网格项

动态添加网格项是通过 setState 来实现的，每次添加新的项目时都需要更新状态，确保界面重新渲染。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<int> items = List.generate(10, (index) => index);

  void addItem() {
    setState(() {
      items.add(items.length);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('动态 GridView')),
        body: GridView.builder(
          itemCount: items.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
          ),
          itemBuilder: (context, index) {
            return Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(child: Text('项目 ${items[index]}')),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: addItem,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

列表组件的优化

应用 ListView.builder 和 GridView.builder 进行性能优化

ListView.builder 和 GridView.builder 用于在需要渲染大量数据时优化性能。它们在需要渲染的项目时才创建视图，从而减少内存占用和提高渲染效率。

示例代码：使用 ListView.builder

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView.builder 示例')),
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(title: Text('项目 $index'));
          },
        ),
      ),
    );
  }
}

示例代码：使用 GridView.builder

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView.builder 示例')),
        body: GridView.builder(
          itemCount: 100,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
          ),
          itemBuilder: (context, index) {
            return Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(child: Text('项目 $index')),
            );
          },
        ),
      ),
    );
  }
}

使用 SliverList 和 SliverGrid 实现复杂列表

SliverList 和 SliverGrid 用于构造复杂的列表和网格布局。与 ListView 和 GridView 相比，它们可以更好地处理复杂的布局需求。

示例代码：使用 SliverList

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SliverList 示例')),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 250,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverList 示例'),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                children: [
                  for (int i = 0; i < 50; i++)
                    ListTile(title: Text('项目 $i')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

示例代码：使用 SliverGrid

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SliverGrid 示例')),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 250,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverGrid 示例'),
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 1.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    color: Colors.primaries[index % Colors.primaries.length],
                    child: Center(child: Text('项目 $index')),
                  );
                },
                childCount: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

优化列表滚动性能的小技巧

减少不必要的布局计算：避免在滚动时进行复杂的布局计算。
使用 ListView.separated：避免每次构建时都创建分割组件。
复用子项：使用 ListView.builder 和 GridView.builder 复用列表项，减少不必要的资源消耗。
使用 shouldRebuild：在 ListView.builder 的 itemBuilder 中使用 shouldRebuild 来优化渲染。

列表组件的交互

为列表项添加点击事件

通过 onTap 事件监听器可以实现列表项的点击事件处理。下面是一个简单的示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('列表项点击示例')),
        body: ListView(
          children: [
            ListTile(
              title: Text('项目1'),
              onTap: () {
                print('项目1 点击');
              },
            ),
            ListTile(
              title: Text('项目2'),
              onTap: () {
                print('项目2 点击');
              },
            ),
          ],
        ),
      ),
    );
  }
}

列表项的长按事件处理

通过 onLongPress 事件监听器可以实现列表项的长按事件处理。下面是一个示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('列表项长按示例')),
        body: ListView(
          children: [
            ListTile(
              title: Text('项目1'),
              onLongPress: () {
                print('项目1 长按');
              },
            ),
            ListTile(
              title: Text('项目2'),
              onLongPress: () {
                print('项目2 长按');
              },
            ),
          ],
        ),
      ),
    );
  }
}

列表项的状态管理（选中、删除等）

列表项的状态管理可以通过 setState 更新列表项的状态。下面是一个简单的示例，展示如何实现列表项的选择和删除。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> items = ['项目1', '项目2', '项目3'];

  void toggleSelection(int index) {
    setState(() {
      items[index] = items[index] + ' (选中)';
    });
  }

  void deleteItem(int index) {
    setState(() {
      items.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('列表项状态管理示例')),
        body: ListView(
          children: items.map((item) {
            return ListTile(
              title: Text(item),
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  IconButton(
                    icon: Icon(Icons.check),
                    onPressed: () => toggleSelection(items.indexOf(item)),
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => deleteItem(items.indexOf(item)),
                  ),
                ],
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

实战演练：构建一个简单的待办事项列表

设计数据模型

首先，设计一个待办事项的数据模型。我们将使用 List 来存储待办事项列表。

class Todo {
  final String title;
  bool isDone;

  Todo({required this.title, this.isDone = false});
}

实现添加、删除、编辑待办事项的功能

接下来，实现添加、删除和编辑待办事项的功能。我们将使用 StatefulWidget 来管理状态。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Todo> todos = [];

  void addTodo(String title) {
    setState(() {
      todos.add(Todo(title: title));
    });
  }

  void deleteTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  void toggleTodo(int index) {
    setState(() {
      todos[index].isDone = !todos[index].isDone;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('待办事项列表示例')),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(todos[index].title),
                    trailing: Checkbox(
                      value: todos[index].isDone,
                      onChanged: (bool? value) {
                        toggleTodo(index);
                      },
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: InputDecoration(labelText: '添加新的待办事项'),
                onFieldSubmitted: (value) {
                  if (value.isNotEmpty) {
                    addTodo(value);
                  }
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                  // 额外功能
                },
                child: Text('显示已完成'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Todo {
  final String title;
  bool isDone;

  Todo({required this.title, this.isDone = false});
}

添加样式和布局

最后，为待办事项列表添加一些样式和布局，使其更美观。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Todo> todos = [];

  void addTodo(String title) {
    setState(() {
      todos.add(Todo(title: title));
    });
  }

  void deleteTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  void toggleTodo(int index) {
    setState(() {
      todos[index].isDone = !todos[index].isDone;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('待办事项列表示例'),
          backgroundColor: Colors.blue,
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(todos[index].title),
                    trailing: Checkbox(
                      value: todos[index].isDone,
                      onChanged: (bool? value) {
                        toggleTodo(index);
                      },
                    ),
                    onTap: () {
                      deleteTodo(index);
                    },
                  ).paddingSymmetric(vertical: 8, horizontal: 16);
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: InputDecoration(
                  labelText: '添加新的待办事项',
                  border: OutlineInputBorder(),
                ),
                onFieldSubmitted: (value) {
                  if (value.isNotEmpty) {
                    addTodo(value);
                  }
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                  // 额外功能
                },
                child: Text('显示已完成'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Todo {
  final String title;
  bool isDone;

  Todo({required this.title, this.isDone = false});
}