Flutter 基础（四） ListView 的四种构建方式

最新推荐文章于 2024-11-08 17:51:51 发布

AboBack

最新推荐文章于 2024-11-08 17:51:51 发布

阅读量636

点赞数

分类专栏： Flutter 基础文章标签： Flutter ListView Flutter基础

本文链接：https://blog.youkuaiyun.com/jhbxyz/article/details/100667254

版权

Flutter 基础专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Flutter中ListView的四种构建方式：默认构造、ListView.builder、ListView.separated和ListView.custom，详细讲解了每种方式的特点和用法，包括如何创建子View、处理大量数据、添加分割线样式以及自定义Widget。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter ListView 的四种构建方式

1.Default constructor 默认构造形式

你可以构建一个个具体的子 View

默认构造

class ListViewPageState extends State<ListViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView(
        padding: EdgeInsets.all(8.0),
        children: <Widget>[
          Container(
            height: 50.0,
            color: Colors.amber[500],
            child: Center(
              child: Text('Entry A'),
            ),
          ),
          Container(
            height: 50.0,
            color: Colors.amber[300],
            child: Center(
              child: Text('Entry B'),
            ),
          ),
          Container(
            height: 50.0,
            color: Colors.amber[100],
            child: Center(
              child: Text('Entry C'),
            ),
          ),
        ],
      ),
    );
  }
}

效果
在这里插入图片描述

2.ListView.builder 形式

你可以利用数组构建一组子 View 用于大量或无限的数据

ListView.builder

class ListViewPageState extends State<ListViewPage> {
  var entries = ['A', 'B', 'C'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView.builder(
          itemCount: entries.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Entry ${entries[index]}'),
            );
          }),
    );
  }
}

3.ListView.separated 形式

separatorBuilder 参数可以增加分割线样式

ListView.separated

class ListViewPageState extends State<ListViewPage> {
  var entries = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView.separated(
        itemCount: entries.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Entry ${entries[index]}'),
          );
        },
        //分割线样式
        separatorBuilder: (context, indext) {
          return Divider(
            height: 1,
          );
        },
      ),
    );
  }
}

效果
在这里插入图片描述

4.ListView.custom 形式

提供了自定义子Widget的能力

5.完整代码

完整代码

import 'package:flutter/material.dart';

void main() => runApp(ListViewApp());

class ListViewApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView',
      theme: ThemeData.light(),
      home: ListViewPage(),
    );
  }
}

class ListViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ListViewPageState();
  }
}

class ListViewPageState extends State<ListViewPage> {
  var entries = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView.separated(
        itemCount: entries.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Entry ${entries[index]}'),
          );
        },
        //分割线样式
        separatorBuilder: (context, indext) {
          return Divider(
            height: 1,
          );
        },
      ),
    );
  }
}