Flutter列表

ListView简介

最简单的,Flutter中可以使用ListView来实现一个列表功能

ListView的使用和Column()类似:

body: ListView(
   children: const <Widget>[
      //添加子Widget
   ],
),

  • ListView中的常用参数:
参数名称 使用
children: List 配置列表中的元素
scrollDirection: Axis 使用Axis.horizontal和Axis.vertical配置列表滑动方向
padding: EdgeInsertsGeometry 内边距,Geometry表示抽象类,使用例子:EdgeInsets.all()
reverse: bool 组件反向布局

实际上,ListView中的children一般使用ListTile()组件。它相当于ListView中的一个小单元(因为列表内容整体样式一般是统一的,只不过是内容不同)

body: ListView(
   children: const <Widget>[
      ListTile(),
      //间隔线
      Divider(),
   ],
),
  • ListTile()常用参数
参数名称 使用
leading: Widget tile最前面的组件(比如放置一个图标)
title: Widget 标题
subtitle: Widget 副标题
trailing:Widget tile最后面的组件
        body: ListView(
          children: const <Widget>[
            ListTile(
              title: Text('标题'),
              leading: Icon(MyFont.a1),
              subtitle: Text('副标题'),
              trailing: Icon(MyFont.a2),
            ),
            Divider(),
            ListTile(
              title: Text('标题2'),
              leading: Icon(MyFont.a1),
              subtitle: Text('副标题2'),
              trailing: Icon(MyFont.a2),
            ),
            Divider(),
            ListTile(
              title: Text('标题3'),
              leading: Icon(MyFont.a1),
              subtitle: Text('副标题3'),
              trailing: Icon(MyFont.a2),
            ),
            Divider(),
          ],
        ),

效果如图:


ListView动态列表

实际场景中,ListView中的数据都应该是动态的,那么,动态列表如何生成?

方法1 使用for循环来生成一个动态列表

ListView()接受一个List列表,所以只需要定义一个方法,返回一个列表即可:

  List<Widget> initListData() {
    List<Widget> list = [];
    for(var i = 0; i < 20; ++i) {
      list.add(ListTile(
        title: Text('标题$i'),
        subtitle: Text('副标题$i'),
      ));
    }
    return list;
  }

 
然后在children中调用:

body: ListView(
   children: initListData(),
),

 
如图所示:

方法2 使用ListView.builder()来生成一个动态列表

ListView.builder()可以快速的构建一个动态列表,非常常用。该方法至少需要接受两个参数:

参数名称 使用
itemCount: int 列表的长度
itemBuilder: IndexedWidgetBuilder 列表单元的构造器,函数类型,具体见下方用法

代码如下:

//注意,该类中有动态数据,实际上不应该继承StatelessWidget,应该继承StatefulWidget中
class MyListViewBuilderApp extends StatelessWidget {
  List<String> list = [];
  MyListViewBuilderApp({Key? key}) : super(key: key) {
    for(var i = 0; i < 20; ++i) {
      list.add('我是第$i条数据');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AppBar Title'),
        ),
        body: ListView.builder(
          itemCount: list.length,
          //一个函数,接受两个参数,返回Widget
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(list[index]),
            );
          },
        ),
      ),
    );
  }
}

效果如下:

以上部分内容总结自课程 https://www.bilibili.com/video/BV1S4411E7LY

posted @   KindBrave  阅读(231)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示