Flutter学习笔记 ListView列表

最新推荐文章于 2024-06-25 20:40:21 发布

我好菜啊~

最新推荐文章于 2024-06-25 20:40:21 发布

阅读量376

点赞数 1

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/weixin_42215775/article/details/100940751

版权

Flutter 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Flutter中的ListView，包括ListView的四种构建方式：ListView()、ListView.builder()、ListView.separated()和ListView.custom()，并提到了ListBody和 AnimatedList。 AnimatedList在组件增删时可设置动画效果，而DataTable则用于生成数据表格，支持排序和选择行功能。 PaginatedDataTable则用于分页显示表格数据。

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

ListView（滚动列表）
在主轴方向可以滚动，在交叉轴方向填满
构建方式：ListView(), ListView.builder(), ListView.separated(), ListView.custom()

ListView() 例：

ListView(
  shrinkWrap: true,
  children: <Widget>[
    Text('List1'),
    ListTile(
      leading: Icon(Icons.sort),
      title: Text('List2'),
      trailing: Icon(Icons.arrow_forward_ios),
    )
  ],
),

在这里插入图片描述

ListView.builder() 例：

ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount: 20,
    itemExtent: 50.0,
    itemBuilder: (BuildContext context, int index){
  return ListTile(
    title: Text('List$index'),
    leading: Icon(Icons.label),
    subtitle: Text('副标题'),
    trailing: Icon(Icons.arrow_forward_ios),
    isThreeLine: true,    //是否三行显示
    dense: true,
    contentPadding: EdgeInsets.all(10.0),   //内容内边距
    enabled: true,
    onTap: (){},    //点击
    onLongPress: (){},    //长按
    selected: false,
  );
}),

在这里插入图片描述

ListView.separated() 例：

ListView.separated(
	scrollDirection: Axis.vertical,
	itemCount: 20,
	separatorBuilder: (BuildContext context, int index) {
	  return Divider(
	    height: 1.0,
	    color: Colors.black,
	  );
	},
	itemBuilder: (BuildContext context, int index) {
	  return ListTile(
	    title: Text('List$index'),
	    leading: Icon(Icons.label),
	    subtitle: Text('副标题'),
	    trailing: Icon(Icons.arrow_forward_ios),
	    isThreeLine: true,
	    //是否三行显示
	    dense: true,
	    contentPadding: EdgeInsets.all(10.0),
	    //内容内边距
	    enabled: true,
	    onTap: () {},
	    //点击
	    onLongPress: () {},
	    //长按
	    selected: false,
	  );
	}),

在这里插入图片描述

ListView.custom() 例：

ListView.custom(
   scrollDirection: Axis.vertical,
   childrenDelegate:
       SliverChildBuilderDelegate((BuildContext context, int index) {
     return Container(
       height: 50.0,
       alignment: Alignment.center,
       color: Colors.lightGreenAccent,
       child: Text('List$index'),
     );
   }),
 ),

在这里插入图片描述

ListBody（列表组件）

ListBody的父节点的主轴必须拥有无限空间，不受约束，否则会抛出异常

Column(
  children: <Widget>[
    ListBody(
      mainAxis: Axis.vertical,
      reverse: false,   //是否反向
      children: <Widget>[
        Container(
          color: Colors.red,
          width: 200.0,
          height: 200.0,
          child: Text('111111'),
        ),
        Container(
          color: Colors.blue,
          width: 200.0,
          height: 200.0,
          child: Text('222222'),
        ),
        Container(
          color: Colors.yellow,
          width: 200.0,
          height: 200.0,
          child: Text('333333'),
        ),
      ],
    ),
  ],
),

在这里插入图片描述

AnimatedList（动画滚动容器）

可以在插入或者移除组件时为其设置动画
参考：https://flutterchina.club/catalog/samples/animated-list/

DataTable（数据表格）

ListView(
  children: <Widget>[
    DataTable(
      columns: [
        DataColumn(
          label: Text('Title'),
        ),
        DataColumn(
          label: Text('Author'),
        ),
      ],
      rows: [
        DataRow(
          cells: [
            DataCell(Text('hello ~'),),
            DataCell(Text('Cyz'),),
          ]
        ),
      ],
    ),
  ],
),

在这里插入图片描述

用列表生成数据表格

rows: posts.map((i){
  return DataRow(cells: [
    DataCell(Text(posts.title)),
    DataCell(Text(posts.author)),
  ]);
}).toList(),

数据表格的排序：

class HomePageState extends State<HomePage> {
  List posts;
  int _sortColumnIndex;
  bool _sortAscending = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body:
      ListView(
        children: <Widget>[
          DataTable(
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            columns: [
              DataColumn(
                label: Text('Title'),
                onSort: (int index, bool ascending){
                  setState(() {
                    _sortColumnIndex = index;
                    _sortAscending = ascending;
                  });
                }
              ),
              DataColumn(
                label: Text('Author'),
              ),
            ],
            rows: posts.map((i){
              return DataRow(cells: [
                DataCell(Text(posts.title)),
                DataCell(Text(posts.author)),
              ]);
            }).toList(),
          ),
        ],
      ),
    );
  }
}

选择数据表格行：

class HomePageState extends State<HomePage> {
  List posts;
  int _sortColumnIndex;
  bool _sortAscending = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView(
        children: <Widget>[
          DataTable(
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            onSelectAll: (bool value){},    //全选
            columns: [
              DataColumn(
                  label: Text('Title'),
                  onSort: (int index, bool ascending) {
                    setState(() {
                      _sortColumnIndex = index;
                      _sortAscending = ascending;
                    });
                  }),
              DataColumn(
                label: Text('Author'),
              ),
            ],
            rows: posts.map((i) {
              return DataRow(
                  selected: i.selected,
                  onSelectChanged: (bool value){
                    setState(() {
                      if(i.selected != value){
                        i.selected = value;
                      }
                    });
                  },
                  cells: [
                DataCell(Text(posts.title)),
                DataCell(Text(posts.author)),
              ]);
            }).toList(),
          ),
        ],
      ),
    );
  }
}

PaginatedDataTable（分页显示表格数据）

List Posts;

class MyDataSource extends DataTableSource {
  int _selectedCount = 0;

  @override
  // TODO: implement rowCount
  int get rowCount => Posts.length; //行数

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => false;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => _selectedCount;

  @override
  DataRow getRow(int index) {
    // TODO: implement getRow
    return DataRow.byIndex(index: index, cells: <DataCell>[
      DataCell(Text(Posts[index].title)),
      DataCell(Text(Posts[index].author)),
    ]);
  }
}

class HomePageState extends State<HomePage> {
  List posts;
  int _sortColumnIndex;
  bool _sortAscending = true;

  final MyDataSource _dataSource = MyDataSource();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: ListView(
        children: <Widget>[
          PaginatedDataTable(
            header: Text('Title'),
            rowsPerPage: 10,    //每页显示行数
            source: _dataSource,
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            onSelectAll: (bool value) {},
            //全选
            columns: [
              DataColumn(
                  label: Text('Title'),
                  onSort: (int index, bool ascending) {
                    setState(() {
                      _sortColumnIndex = index;
                      _sortAscending = ascending;
                    });
                  }),
              DataColumn(
                label: Text('Author'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}