Flutter列表组件（ListView，GrideView）

最新推荐文章于 2024-05-30 16:17:46 发布
最新推荐文章于 2024-05-30 16:17:46 发布
阅读量4.8k 收藏 13
点赞数 2
分类专栏： Flutter 文章标签： flutter android dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46527751/article/details/122440642
版权

Flutter列表组件

ListView介绍

Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
分类：
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

ListView参数列表

名称类型说明
scrollDirectionAxisAxis.horizontal 水平列
Axis.vertical 垂直列表(默认)
paddingEdgeInsetsGeometry内边距
resolvebool组件反向排序
childrenList< Widget>列表元素

基本列表

对于ListTile组件我的理解是相当于我们以前Java Android时列表中的单个条目，不过Flutter已经帮我们封装好了，条目中有以下几个常用属性

    this.leading,   //放在条目前面（左边）的图片
    this.title,     //条目的主标题
    this.subtitle,  //条目的副标题
    this.trailing,  //放在条目后面（右边）的图片

children: < Widget>[ …]中返回的的是一个组件集合，里面包含多个组件，每个子组件就相当于我们列表中的一个条目，常与ListTile组件结合显示类似新闻列表

垂直列表
// ignore_for_file: non_constant_identifier_names, prefer_const_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding:EdgeInsets.all(10),
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.ac_unit,size: 30,),
          title: Text("解决github下载速度慢问题"),
          subtitle: Text("我们需要从github拉取一套代码到我们本地，我们国内下载速度非常慢，现在分享一种解决方案提高下载速度。"),
        ),
          ListTile(
            leading: Image.asset("images/a.jpg",),
          title: Text("final属性值能被反射修改吗？"),
          subtitle: Text("有网友询问反射给final修饰的字段设值，为啥设值会失败，之前也深入学习一下反射。"),
        ),
          ListTile(
            leading: Icon(Icons.access_time_filled,color: Colors.yellow,),
          title: Text("当Jetpack Compose遇到Navigation"),
          subtitle: Text("Jetpack Compose作为一个声明式UI框架经常拿来与React 、Flutter等作对比"),
        ),
          ListTile(
          title: Text("Android Canvas画布解析"),
          subtitle: Text("在开发中，我们经常需要自定义View去实现各种各样的效果，经常需要用到Canvas画布去绘制各种各样的图形和图案"),
          trailing: Icon(Icons.access_time_sharp),
        ),
      ],
    );
  }
}

在这里插入图片描述

水平列表

注意：下边例子中我们在listview外部又加了一个Container，原因是当我们设置方向为水平时，条目中高度属性会失效，默认为对齐父组件，因此我们在listview外部又加了一个Container，然后指定高度，这样listview高度就被限制。同样的在垂直方向时listview内部条目默认宽度于父布局一致，设置宽度无效
这里listview里面用的是container组件展示每个条目

// ignore_for_file: non_constant_identifier_names, prefer_const_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
        //设置列表为水平列表
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            Container(
                width: 180.0,
                color: Colors.amber,
                child: ListView(
                  children: <Widget>[
                    Image.network(
                        'https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg'),
                    SizedBox(height: 16.0),
                    Text(
                      '这是一个文本信息',
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 16.0),
                    )
                  ],
                )),
            Container(
              width: 180.0,
              color: Colors.deepOrange,
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

在这里插入图片描述

动态列表

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  //自定义方法
  List<Widget> _getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第$i个条目"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }
}

在这里插入图片描述
获取外部list生成列表（源码来自IT营）

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];


// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  //自定义方法
  List<Widget> _getData() {
    var list = <Widget>[];
    /*
    遍历外部listData获取数据生成listtile集合的两种方法
    */
    //第一种
    var tempList = listData.map((e) {
      return ListTile(
        leading: Image.network(e["imageUrl"]),
        title: Text(e["title"]),
        subtitle: Text(e["author"]),
      );
    });
    //第二种
    for (int i = 0; i < listData.length; i++) {
      list.add(ListTile(
        leading: Image.network(listData[i]["imageUrl"]),
        title: Text(listData[i]["title"]),
        subtitle: Text(listData[i]["author"]),
      ));
    }
    return list;
    //  return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }
}

在这里插入图片描述

ListView.builder遍历数据生成列表
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List list = [];
  HomeContent({Key? key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("我是第$i个条目");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(list[index]),
          );
        });
  }
}

在这里插入图片描述
使用外部数据

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  Widget _getListData(context, index) {
    return ListTile(
      leading: Image.network(listData[index]["imageUrl"]),
      title: Text(listData[index]["title"]),
      subtitle: Text(listData[index]["author"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        //注意这里是赋值不是调用方法，因此不加（）
        itemBuilder: _getListData
        );
  }
}

在这里插入图片描述

GrideView组件

当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组
件 GridView 实现布局。
GridView 创建网格列表有多种方式，下面我们主要介绍两种。

  1. 可以通过 GridView.count 实现网格布局
  2. 通过 GridView.builder 实现网格布局

参数说明

名称类型说明
scrollDirectionAxis滚动方法
paddingEdgeInsetsGeometry内边距
resolvebool组件反向排序
crossAxisSpacingdouble水平子 Widget 之间间距
mainAxisSpacingdouble垂直子 Widget 之间间距
crossAxisCountint一行的 Widget 数量
childAspectRatiodouble子 Widget 宽高比例
children< Widget>[ ]
gridDelegate（常用）SliverGridDelegateWithFixedCrossAxisCount
SliverGridDelegateWithMaxCrossAxisExtent		控制布局主要用在GridView.builder 里面
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          "这是第$i个条目",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        color: Colors.blue,
        height: 500,
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
    //水平子元素之间的距离
        crossAxisSpacing: 20,
      //垂直子元素之间的距离
        mainAxisSpacing: 20,
        padding: EdgeInsets.all(10),
        crossAxisCount: 3,
        //内部设置单个条目宽高无效，可以改变宽高比例达到目的，
        childAspectRatio: 0.7,
        children: _getListData());
  }
}

在这里插入图片描述

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 12),
            Text(value["title"],
                textAlign: TextAlign.center,
                 style: TextStyle(fontSize: 20)
            ),
          ],
        ),
        decoration: BoxDecoration(    
            border: Border.all(
                color: Color.fromRGBO(230, 230, 230, 0.9), 
                width: 1.0),
                borderRadius: const BorderRadius.all(
                Radius.circular(15),
              )
                ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
        padding: EdgeInsets.all(20),
        crossAxisCount: 2,
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
        childAspectRatio: 0.7,
        children: _getListData());
  }
}

在这里插入图片描述

GrideView.builder遍历数据生成列表

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 12),
          Text(listData[index]["title"],
              textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
              color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: _getListData,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 2, //纵轴间距
          mainAxisSpacing: 20.0, //横轴间距
          crossAxisSpacing: 10.0, //子组件宽高长度比例
          childAspectRatio: 1.0),
    );
  }
}

在这里插入图片描述

s－010101
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter列表组件ListView
蓝枫
02-04 630
基本使用 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都...
Flutter ListView列表组件、动态列表
蓝枫
02-04 710
//导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件 //使...
Flutter开发（三）——ListView组件——简单使用、横纵向列表以及动态列表
追风者
08-05 2544
首先我先来介绍一哈Icon Icon就是图标，Flutter有丰富的Icon库，提供了常用的Icon供开发者选择 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new MyApp(), )); } class MyApp extends Statele...
39、Flutter之 ListView组件详解
wywinstonwy的专栏
01-19 1万+
ListView ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持列表项懒加载（在需要时才会创建）。我们看看ListView的默认构造函数定义： ListView({ ... //可滚动widget公共参数 Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollP
Flutter基础 -- Dart 语言 -- 列表集合枚举
最新发布
原来45的博客
05-30 1045
dart list map set enum
Flutter中的 列表组件的详解
码龙-的博客
11-09 1581
一、Flutter 列表组件概述 在开发项目的时候，列表布局的使用频率是相当高的。在Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。列表的横向和纵向的滑动可以通过一个属性控制。 flutter列表组件有以下几种分类： 1、垂直列表 2、垂直图文列表 3、水平列表 4、动态列表 5、矩阵式列表 二、Flutter 列表参数 参数名称 ...
Flutter-列表
c_liufeng的博客
12-10 938
Flutter-列表、ListView、SingleChildScrollView、GridView
Flutter快学快用12 列表样式：实践 Flutter 中内容多样式展示方式
fegus的博客
09-21 980
以上就是本课时的所有内容，学完本课时，你要掌握 ListView.separated 的应用，并且了解 ListView 其他构造函数的使用。你要熟练应用 ListView.separated 实现三种内容展示的样式实现方法，并且能进一步熟悉界面效果转化组件设计的实践方法。本课时已经完成了首页推荐内容，但是还缺乏内容的更新机制，下一课时我将介绍下拉刷新当前数据以及上拉更新列表数据的功能。点击此链接查看本课时源码。
Flutter--List列表组件
Gaga246的博客
04-08 869
列表组件的常用参数： (1) scrollDirection Axis Axis.horizontal表示水平列表，Axis.vertical垂直列表 (2) padding EdgeInsetsGeometry 内边距 (3) resolve bool 组件反向排序 (4) children List 列表元素。(2)图片列表 我们不仅仅可以使用上述的ListTile实现图片列表，使用Image和Text也是可以实现图文列表的。使用ListTile可以配合ListView快速实现垂直列表的效果。
Flutter列表ListView学习
01-07
Flutter热重载:在我们调试布局的时候,更改代码,模拟器上可以立即看到代码改动的效果;而不是iOS和Android单独开发需要重新编译,启动,耗时极长。 开发效率：Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加...
Flutter ListView列表布局
10-05
ListView 是最常用的滚条列表，它继承至 CustomScrollView，大多 CustomScrollView 的属性都可用。
Flutter组件化开发方案
01-27
【Flutter组件化开发方案】 组件化开发是一种将大型应用程序拆分为独立、可重用的模块化组件的方法，有助于提升代码的可维护性、可扩展性和团队协作效率。在Flutter中，随着业务需求的增长，单纯地将Flutter作为...
Flutter快学快用24讲--13 列表样式：实践 Flutter 中内容多样式展示方式
g_z_q_的博客
03-19 407
以上就是本课时的所有内容，学完本课时，你要掌握 ListView.separated 的应用，并且了解 ListView 其他构造函数的使用。你要熟练应用 ListView.separated 实现三种内容展示的样式实现方法，并且能进一步熟悉界面效果转化组件设计的实践方法。本课时已经完成了首页推荐内容，但是还缺乏内容的更新机制，下一课时我将介绍下拉刷新当前数据以及上拉更新列表数据的功能。点击此链接查看本课时源码。
Flutter一天一控件之ListTile（列表的实现）
江上清风山间明月的博客
05-22 3187
Flutter中的ListTile控件是一种常用的列表项控件，它可以用于显示列表中的每一个项，通常包含标题、副标题、图标等内容。ListTile控件的外观和行为类似于Android中的ListView中的列表项。
Flutter常用组件-ListView-列表组件
m0_54926105的博客
03-17 685
/@override//标题//副标题//前置图标//后置图标//内容内边距//是否选中状态实现效果如下图：[外链图片转存中…(img-5qJr3SBR-1710659969435)]/**实现效果如下图：使用ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了listTite组件，在组件中放置了前置图标和文字。横向列表如何使用。
Flutter ListView详解
热门推荐
trues的博客
11-15 5万+
ListView详解ListView常用构造ListViewListView ListTileListView builderListView separatedListView custom ListView常用构造 ListView ListView ListTile ListView builder ListView separated ListView custom ...
Flutter中ListView用法
juer2017的博客
03-28 1214
Flutter中ListView用法
flutter怎么用ListView动态渲染列表
05-10
在Flutter中，ListView是一种常用的用于展示列表的组件，可以通过动态渲染来实现列表的展示。 以下是一个简单的例子，用于展示如何使用ListView动态渲染列表： ```dart class MyListPage extends StatelessWidget ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值