Flutter中的 列表组件的详解

最新推荐文章于 2024-05-23 09:37:56 发布
最新推荐文章于 2024-05-23 09:37:56 发布
阅读量1.5k 收藏 5
点赞数 3
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42433094/article/details/109515493
版权

一、Flutter 列表组件概述

        在开发项目的时候，列表布局的使用频率是相当高的。在Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。列表的横向和纵向的滑动可以通过一个属性控制。

  • flutter列表组件有以下几种分类：

1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

二、Flutter 列表参数

                                     参数名称                                      参数类型                                                    说明
scrollDirectionAxis

Axis.horizontal  ： 水平列表

Axis.vertical      ：垂直列表

paddingEdgeInsetsGeometry内边距
resolvebool组件反向排序
childrenList<Widget>列表元素

三、垂直列表

以下为一个垂直列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//列表组件讲解

void main() {
  int i = 0;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  int i = 0;
  int j = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(15),
      //组件数组
      children: <Widget>[                                                                            
        ListTile(
     //leading为主题图片
          leading: Icon(Icons.airplay,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.add_box,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.home,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.directions_car,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.phone,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.email,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.forward, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.print, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.add, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.map, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),
      ],
    );
  }
}

效果：

三、垂直图文列表

以下为一个垂直图文列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//垂直图文列表组件讲解

void main() {
  int i = 0;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('垂直列表图文展示'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  int i = 0;
  int j = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          child: Text(
            'Image1',
            style: TextStyle(fontSize: 20),
          ),
          margin: EdgeInsets.all(20),
        ),
        Image.network(
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg',
        ),
        Container(
          child: Text(
            'Image2',
            style: TextStyle(fontSize: 20),
          ),
          margin: EdgeInsets.all(20),
        ),
        Image.network(
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2219902027,2497484543&fm=26&gp=0.jpg',
        )
      ],
    );
  }
}

效果：

四、水平列表

如果需要水平的列表效果，则只需要修改 ListView组件中的scrollDirection参数，ListView默认是垂直的列表，给scrollDirection参数传Axis.horizontal即可。

Axis.horizontal  ： 水平列表

Axis.vertical      ：垂直列表

以下为一个水平列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//水平列表组件讲解

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('水平列表展示'),
          elevation: 15.0,
        ),
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
    //这里设置水平效果
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Image.network(
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2219902027,2497484543&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3801470056,3792883664&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1799226807,1142896872&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2362004499,1903765256&fm=26&gp=0.jpg',
        ),
      ],
    );
  }
}

效果：

四、动态列表

1.通过直接定义每一个列表组件内容返回列表
  List<Widget> _getData() {
    return [
      ListTile(
        title: Text('列表项1'),
      ),
      ListTile(
        title: Text('列表项2'),
      ),
      ListTile(
        title: Text('列表项3'),
      ),
    ];
  }

2.使用循环语句创建内容返回列表

  List<Widget> _getData() {
    List<Widget> list = List();
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(title: Text('列表$i')));
    }
    return list;
  }

3.使用后台返回的动态内容返回列表

        假数据（模拟后台动态返回的数据列表）：

  List listData=[
    {
      "title" :"深圳",
      "subtitle":"南山",
      "image":'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1837532015,2536059094&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"罗湖",
      "image":'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=222594181,3693555163&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"福田",
      "image":'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019620494,1782150996&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"宝安",
      "image":'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1397034868,2057056005&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"龙岗",
      "image":'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2423078734,3185076253&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"龙华",
      "image":'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=272656705,3144629240&fm=26&gp=0.jpg'
    },
  ];

         调用返回要显示的图文列表（把以上拿到的数据制作成一个图文列表）：

  List<Widget> _getData() {
    //map()返回的是一个（'12','22','33'）形式的值
    var tempList = listData.map((value){
      return ListTile(
        leading: Image.network(value['image'],width: 100,height: 100,),
        title: Text(value["title"],style: TextStyle(fontSize:30),),
        subtitle: Text(value["subtitle"],style: TextStyle(fontSize:20),),
      );
    });
   //所以这里使用tolist返回列表
    return  tempList.toList();
  }

 效果：

四、矩阵式列表

1）通过 命名构造函数GridView.count 实现网格布局
2）通过 命名构造函数GridView.builder 实现网格布局

                         参数名称                                               参数类型                                                        说明
scrollDirectionAxis滚动方向
paddingEdageInsetsGeometry内边距
resolvebool组件反向排序
crossAxisSpacingdouble水平子Widget之间间距
mainAxisSpacingdouble垂直子Widget之间间距
crossAxisCountint一行的Widget数量
childAspectRatiodouble子Widget宽高比例
children <Widget>[ ]
gridDelegate 
SliverGridDelegateWithFixedCrossAxisCount，
SliverGridDelegateWithMaxCrossAxisExtent
控制布局，主要用在GridView.builder里面
   
   

1.通过 命名构造函数GridView.count 实现网格布局

 

 

未完待续。。。。。。。。。

码龙-
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Flutter--List列表组件
Gaga246的博客
04-08 762
列表组件的常用参数： (1) scrollDirection Axis Axis.horizontal表示水平列表，Axis.vertical垂直列表 (2) padding EdgeInsetsGeometry 内边距 (3) resolve bool 组件反向排序 (4) children List 列表元素。(2)图片列表 我们不仅仅可以使用上述的ListTile实现图片列表，使用Image和Text也是可以实现图文列表的。使用ListTile可以配合ListView快速实现垂直列表的效果。
flutter之列表——ListView
wangsf789的专栏
06-28 1496
Android中实现列表的方式有ListView、GrildView、ExpandableListView，后边出来另一个非常好用的RecyclerView，那么今天我们就看看flutter如何实现列表显示的。 import 'package:flutter/material.dart'; //数据源 final Set<Person> sets = new Set<Pers...
推荐开源项目：Flutter Music App — 演奏音乐的优雅方式
最新发布
gitblog_00021的博客
05-23 478
推荐开源项目：Flutter Music App — 演奏音乐的优雅方式 项目地址:https://gitcode.com/obnil/flutter_music_app 在寻找一个功能齐全、设计精美的音乐播放器吗？那么，这款基于Flutter开发的开源音乐应用将会是你的理想之选。不仅拥有迷人的界面和多语言支持，更可在线搜索歌曲，给你带来无与伦比的听觉体验。 项目介绍 Flutter Music ...
Flutter项目实战之女装商城------商品分类模块实现之数据模型、model测试、分类Provide、编写一级分类界面、首页分类导航处理、编写二级分类界面
webor2006的博客
09-21 838
继续接着上一次博文阅读密码验证 - 博客园的Flutter项目往下学习，在上一次是开始对分类界面的数据已经准备好了，整体APP的样子回忆一下： 其中目前分类的数据请求已经准备好了： 接下来则根据数据接口来实现界面的搭建了，这个页面的逻辑稍复杂一点，不着急，慢慢来实现。 分类数据模型： 首先得要先根据接口的JSON数据来定义咱们的VO实体模型，先将分类的JSON结构贴出来： { "code":"0", "message":"success",
Flutter中数组list的浅拷贝和深拷贝问题
haoxuhong的博客
02-24 4132
浅拷贝：拷贝指针 深拷贝：拷贝一份新的对象 浅拷贝出现的问题：操作一个数组另一个数组也发生改变 List list = ['1', '2', '3', '4', '5']; List copyList = list; copyList[0] = 'abc'; print(list);///打印： [abc,2,3,4,5] print(copyList);///打印： [abc,2,3,4,5] 上面问题解决办法：使用深拷贝list.from() List list = ['1', '2
FlutterJson数组转换为List对象及Dio请求结果换为List对象
chuyouyinghe的专栏
09-04 1688
1.实体类 class VideoInfo { String body; int id; String title; int userId; VideoInfo({this.body, this.id, this.title, this.userId}); factory VideoInfo.fromJson(Map<String, dynamic> json) { return VideoInfo( body: json['body'], ...
Flutter完整开发实战详解系列.pdf
07-15
Flutter完整开发实战详解系列.pdf
Flutter实战之自定义日志打印组件详解
08-26
Flutter自定义日志打印组件详解 本文主要介绍了Flutter中自定义日志打印组件的详细实现过程。自定义日志打印组件是为了解决Flutter中默认的日志打印方式不友好的问题。如果不进行自定义，我们只能使用自带的print()...
Flutter 首页必用组件NestedScrollView的示例详解
08-19
Flutter 首页必用组件NestedScrollView的示例详解 Flutter 中的 NestedScrollView 组件是应用程序首页中必不可少的组件之一，大部分的 App 首页都会用到这个组件。今天，我们将详细介绍这个组件的用法和相关知识点...
Flutter 局部路由实现详解
08-25
Navigator Widget 是 Flutter 中的一个核心组件，用于实现路由的跳转和管理。它可以用来实现局部路由，例如在一个页面中跳转到另一个页面。 二、Navigator 的使用 Navigator 的使用需要指定三个属性：initialRoute...
列表类组件ListView
Black_Cat_33的博客
03-05 1083
ListView的简单用法 用于展示数据，这些数据可以是从网上下载的，也可以是从数据库中读取的，允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据则会滚动出屏幕，比如QQ聊天记录。 新建一个ListViewTest项目，自动创建好项目，修改main_layout.xml中的代码，如下： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orient
Flutter女装商城实战(含源码)
04-04
课程目标本课程以实战案例的方式带领大家如何编写一个复杂的App。课程简介Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的用户界面。本课程以实战案例的方式带领大家编写Flutter女装商城案例。案例中使用了真实的开发接口，采用工程化开发标准开发。
【Flutter 专题】123 图解简易 GroupList 二级分组列表
m0_70082867的博客
04-27 1399
class SubCategoryBean { String name; String url; bool _isChecked = false; SubCategoryBean({this.name, this.url}); bool get isChecked => _isChecked ?? false; set isChecked(bool value) => _isChecked = value; } 2. 一级列表 小菜先展示一级列表，可根据使用场景确认是否使用 SliverList
Flutter之 动态列表
日积月累
05-23 1730
** 动态赋值 ** void main() => runApp(MyApp( list: new List<String>.generate(100, (i) => "list $i"), )); class MyApp extends StatelessWidget { final List<String> list; ...
Flutter 基础-上
woyebuzhidao321的博客
01-12 665
下载并导入字体加压压缩包,将字体文件复制到Flutter项目中在pubspec.yaml中声明字体使用为整个应用设置默认自定义字体为某个组件设置自定义字体。
5-flutter 布局和列表
github_36850997的博客
08-09 604
布局和列表 1 Row 横向 布局 @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text("111"),Text("222"),Text("333...
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转
热门推荐
Crook的专栏
07-30 1万+
这里写链接内容ListView控件是APP开发中最为常见的控件之一，回想Android开发中是重写BaseAdapter中的四个方法，尤其是getView()方法，返回我们最终显示的视图，并且在其中进行复用处理。在Flutter中，这个过程是怎样实现的呢?首先给定要显示的数据List<String> items=<String>['A','B','C','D','E','F','G','H','J'
flutter学习--列表组件
pgg_cold的博客
05-17 2257
基本使用 使用ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了listTite组件（列表瓦片），在组件中放置了图标和文字。 body: new ListView( children:<Widget>[ new ListTile( leading:new Icon(Icons.access...
Flutter 实现图文并茂的列表
Flutter 跨平台技术研究
11-18 1230
列表在 App 中是最常见的形式了，在 Flutter 中提供了 ListView 这个组件来实现列表，本篇将通过 ListView 实现一个图文并茂的列表。 界面布局分析 本篇要实现的列表如上图所示。我们拿到界面设计稿之后，在 UI 开发工作第一件事就是考虑界面的元素和布局。以上面的界面为例，实际的界面元素包括了列表和列表元素，而列表元素是关键，列表元素包括了左边的一张图片，图片右侧的标题和查看次数（带前置图标）。列表的元素的布局如下图所示。 纵向上，列表元素的布局高度由图片决定。图标和浏览数的高.
Flutter之自带组件（覆盖 80%场景使用的基础组件，带完整示例）.docx
02-20
在 Flutter 开发中，基础组件是构建用户界面的关键元素。Flutter 提供了两种主要的组件风格：Material 和 Cupertino。Material 风格遵循 Google 的 Material Design 规范，提供了广泛且一致的视觉效果，适用于多种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值