Flutter 滚动型容器组件之 ListView 详解

2023-10-05 01:52:57

ListView 基础用法

ListView 的基本用法非常简单，只需要在 Scaffold 中添加一个 ListView 组件即可。以下是一个简单的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <Widget>[
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
          ],
        ),
      ),
    );
  }
}

这个示例创建了一个简单的列表，包含三个文本项。当用户滚动列表时，这些文本项将依次显示。

处理长列表

当列表项数量较多时，ListView 会自动启用滚动条，允许用户滚动列表。但是，如果列表项数量非常多，则滚动条可能会变得很长，影响用户体验。为了解决这个问题，可以使用 ListView.builder 来创建列表。

ListView.builder 与 ListView 类似，但它不是一次性创建所有列表项，而是根据需要动态创建。这意味着，当用户滚动列表时，ListView.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(
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Text('Item $index');
          },
        ),
      ),
    );
  }
}

这个示例创建了一个包含 100 个文本项的长列表。当用户滚动列表时，ListView.builder 只需创建当前可见的文本项，从而可以提高性能。

自定义列表项

ListView 的列表项可以是任意类型的 Widget。这意味着，我们可以自定义列表项的外观和行为。例如，以下是一个自定义列表项的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.person),
              title: Text('John Doe'),
              subtitle: Text('johndoe@example.com'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Jane Smith'),
              subtitle: Text('janesmith@example.com'),
            ),
          ],
        ),
      ),
    );
  }
}