【自学Flutter】20.2 ListView.builder 的使用

最新推荐文章于 2025-07-03 22:00:45 发布

原创最新推荐文章于 2025-07-03 22:00:45 发布 · 9.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文深入讲解了Flutter中ListView.builder组件的使用方法，包括如何通过itemCount设置列表项的数量，itemExtent定义每一项的高度，以及itemBuilder函数动态生成列表项。通过实例代码展示了如何创建一个包含50个列表项的滚动列表。

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

20.2 ListView.builder 的使用

1.源代码

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView.builder(
                itemCount: 50,
                itemExtent: 50.0,
                itemBuilder: (BuildContext context, int index){
                  return ListTile(title: Text("我是列表$index"),);
                },
              )
            ),
          ),
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView.builder(
                //列表数量
                itemCount: 50,
                //列表高度
                itemExtent: 50.0,
                //动态生成
                itemBuilder: (BuildContext context, int index){
                  return ListTile(title: Text("我是列表$index"),);
                },
              )
            ),
          ),
        )
    );
  }
}

3.效果图

效果图