flutter之列表——ListView

最新推荐文章于 2025-05-29 10:21:46 发布

原创最新推荐文章于 2025-05-29 10:21:46 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #listview #列表

flutter 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Flutter中如何使用ListView组件创建列表，对比了Android中的ListView、RecyclerView等，详细解析了Flutter列表显示的方法。

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

Android中实现列表的方式有ListView、GrildView、ExpandableListView，后边出来另一个非常好用的RecyclerView，那么今天我们就看看flutter如何实现列表显示的。

import 'package:flutter/material.dart';
//数据源
final Set<Person> sets = new Set<Person>();

void main() {
  runApp(new MaterialApp(
    title: 'flutter 示例',
    home: new ListViewWidget()
  ));
}

class ListViewWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new ListViewState();
  }
}

class ListViewState extends State<ListViewWidget> {

  List<ItemWidget> list = new List<ItemWidget>();

  add() {
    print('回调了add()');
    setState(() {
      sets.add(new Person('战士 ${sets.length + 1}', '我是第${sets.length + 1}个兵'));
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('列表示例'),
        centerTitle: true,
      ),
      body: new ListView(
        children: sets.map((p) {
          return new ItemWidget(p);
        }).toList(),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: add,
//        onPressed: null,
        tooltip: 'add',
        child: new Icon(Icons.add),
        backgroundColor: Colors.blue[400],
      ),
    );
  }
}
//数据实体
class Person {
  String name;
  String info;

  Person(this.name, this.info);
}
//liveview子项
class ItemWidget extends StatelessWidget {
  final Person _person;

  ItemWidget(this._person);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListTile(
      leading: new CircleAvatar(
        child: new Text(_person.name[0]),
        backgroundColor: Colors.blue[400],
      ),
      title: new Text(_person.name),
      subtitle: new Text(_person.info),
    );
  }
}