flutter 实战 之 ListView 进阶

已于 2023-07-29 16:29:33 修改
阅读量77 收藏 1
点赞数 2
分类专栏： flutter 文章标签： flutter
于 2023-07-29 12:02:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wniuniu_/article/details/131992503
版权

有哪些好看的壁纸值得推荐？ - 知乎

 这一章我们来学习动态构造List

如果要实现上面的效果，我们可以用枚举的形式实现

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView(
              children: [
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
                ListTile(
                  title: Text("这是一个简单话"),
                ),
              ],

          ),
        ),

    );
  }

}

 那有没有什么改进的方法呢？
我们可以利用循环构造出这样的效果呢
看看代码是如何实现的

定义了 _initListData 方法，该方法返回一个包含20个 ListTile 小部件的列表，且我们是利用循环来实现list的构造

如果要利用动态构造实现下面的效果呢

 我们上代码：

import 'package:flutter/material.dart';
// import 'package:hive/hive.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {
  

  List <Widget> _initListData (){

    List <Widget> listTemp = [];

    for(var i = 0; i< listData.length ;i++)
      {
        listTemp.add(
          ListTile(
            leading: Image.network("${listData[i]["imageUrl"]}"),
            title: Text("${listData[i]["title"]}"),
            subtitle: Text("${listData[i]["author"]}"),
          )
        );
      }

    return listTemp;
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView(
              children: _initListData()

          ),
        ),

    );
  }

}

List  listData = [
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://p.qqan.com/up/2021-7/16275387033501829.jpg",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic1.zhimg.com/v2-b59b1fe5c979f7cb7cdde7bf788a4f3a_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic2.zhimg.com/v2-d6d0c956d30aa63894cc1cc96901ce07_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.0382d85bc77f87547a0d263d727ac78a?rik=DeEpYNkFDhNYwQ&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190815%2f2422bae53bbe495eadb8c35e4115f971.JPG&ehk=EXo1y564J33smY0E4iRbb%2b6Uf8x9szvNt480zkQXHyk%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://tse1-mm.cn.bing.net/th/id/OIP-C.aBs3l0c_sS5UmTWOaK7wgAAAAA?pid=ImgDet&rs=1",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic2.zhimg.com/v2-8176dbd89ee8edecf5956bae2dd0642d_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.7538a1d27d1eb2bdaf4f7fe5171d3bb4?rik=Xo3lEaJdBdyZQQ&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2fg5%2fM00%2f02%2f0F%2fChMkJlbK7JeIFhACAArOl2v-eCMAALKjgJtPOEACs6v923.jpg&ehk=o0LZfd%2fE2nk5E2n%2fxNapnr%2fCMkZLHYMbO25hE4LLq60%3d&risl=&pid=ImgRaw&r=0",
  },

  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.c316b5a061d2e6f534ea4669efaf4202?rik=CcnSN0WU9U1clA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f6%2f1106.jpg&ehk=HKvV9IRto0udrSWZrpOzTssWQ3oJBuwMAbT1T%2bKEWQw%3d&risl=&pid=ImgRaw&r=0",
  },

];

分析一下上面的代码，首先写一个 listData ，里面装载页面里面所需要的数据， 在方法 _initListData 中 再定义一个新的 List 数组来装载ListView
我们可以改进一下代码
对于 _initListData 方法，我们可以升级一下代码

List<Widget> _initListData() {
  var tempList = listData.map((value) {
    return ListTile(
      leading: Image.network("${value["imageUrl"]}"),
      title: Text("${value["title"]}"),
      subtitle: Text("${value["author"]}"),
    );
  });

  return tempList.toList();
}

如何理解上面的代码呢：

  1. listData.map((value) { ... }) 是一个高阶函数（Higher-order function），它将 listData 中的每个元素 value 进行处理并返回一个新的迭代器（Iterable）。

  2. toList() 方法将迭代器 tempList 转换为一个真正的 List<Widget>，这样就得到了包含所有列表项小部件的列表。

下面我们来学习如何利用ListView.Builder
看看代码：

import 'package:flutter/material.dart';
// import 'package:hive/hive.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {


  List <String> list = [];
  test({Key ? key}) : super(key : key){
    for(var i = 0; i< 20 ;i++)
      {
        list.add("我是第${i+1}条数据");
      }
  }


  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView.builder(   //类比于循环，itemCount
              itemCount: list.length,
              itemBuilder: (context , index){
                return ListTile(
                  title: Text("${list[index]}"),
                );

              } )
        ),

    );
  }

}

效果如下：

 我们在构造器里面初始化了一个列表，然后在ListView.Builder里面构造

那如何用ListView.Builder 来实现下面这个呢？

import 'package:flutter/material.dart';
// import 'package:hive/hive.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {


  List <String> list = [];


  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView.builder(   //类比于循环，itemCount
              itemCount: listData.length,
              itemBuilder: (context , i){
              return ListTile(
                leading: Image.network("${listData[i]["imageUrl"]}"),
                title: Text("${listData[i]["title"]}"),
                subtitle: Text("${listData[i]["author"]}"),
              );

              } )
        ),

    );
  }

}

List  listData = [
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://p.qqan.com/up/2021-7/16275387033501829.jpg",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic1.zhimg.com/v2-b59b1fe5c979f7cb7cdde7bf788a4f3a_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic2.zhimg.com/v2-d6d0c956d30aa63894cc1cc96901ce07_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.0382d85bc77f87547a0d263d727ac78a?rik=DeEpYNkFDhNYwQ&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190815%2f2422bae53bbe495eadb8c35e4115f971.JPG&ehk=EXo1y564J33smY0E4iRbb%2b6Uf8x9szvNt480zkQXHyk%3d&risl=&pid=ImgRaw&r=0",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://tse1-mm.cn.bing.net/th/id/OIP-C.aBs3l0c_sS5UmTWOaK7wgAAAAA?pid=ImgDet&rs=1",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://pic2.zhimg.com/v2-8176dbd89ee8edecf5956bae2dd0642d_r.jpg?source=1940ef5c",
  },
  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.7538a1d27d1eb2bdaf4f7fe5171d3bb4?rik=Xo3lEaJdBdyZQQ&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2fg5%2fM00%2f02%2f0F%2fChMkJlbK7JeIFhACAArOl2v-eCMAALKjgJtPOEACs6v923.jpg&ehk=o0LZfd%2fE2nk5E2n%2fxNapnr%2fCMkZLHYMbO25hE4LLq60%3d&risl=&pid=ImgRaw&r=0",
  },

  {
    "title" : 'Candy Shop',
    "author":"Mohanmed Chin",
    "imageUrl" :"https://ts1.cn.mm.bing.net/th/id/R-C.c316b5a061d2e6f534ea4669efaf4202?rik=CcnSN0WU9U1clA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f6%2f1106.jpg&ehk=HKvV9IRto0udrSWZrpOzTssWQ3oJBuwMAbT1T%2bKEWQw%3d&risl=&pid=ImgRaw&r=0",
  },

];

 

wniuniu_
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter开发之——可滑动组件—ListView
2401_84123113的博客
05-05 249
说一千道一万，不如自己去行动。要想在移动互联网的下半场是自己占有一席之地，那就得从现在开始，从今天开始，马上严格要求自己，既重视业务实现能力，也重视基础和原理。基础夯实好了，高楼才能够平地而起，稳如泰山。最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2020-2021面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有。
Flutter入门到进阶
aixuexi2345的博客
02-28 920
Flutter从入门到进阶 实战APP 从Dart基础语法开始，领略Flutter之美，轻松全面的掌握Flutter开发核心技术。通过本课程的学习，可以让你的Flutter技术能力和项目经验都得到前所未有的提升！课程具体收获【可直接看章节描述】：Flutter必备Dart基础，Flutter入门，AI语音，网络编程，数据存储，异步编程，自定义组件， 原生模块封装调用 ，Flutter混合开发，Fl...
flutter 实战之 hive 进阶
wniuniu_的博客
08-20 656
在Hive中，TypeAdapters是用于处理自定义对象序列化和反序列化的概念。Hive是一个适用于Flutter和Dart编程的轻量级、快速的键值存储库。总而言之，为什么要使用 TypeAdater 呢？box 里面装的只能是一般的数据类型，如果我们需要装其他的数据类型就要借助 TypeAdapter 来转换当你想让Hive使用一个TypeAdapter时，你需要将其注册。这需要两个要素：适配器的实例和一个类型ID（typeId）。
Flutter基础之ListView的基本使用
Eqiqi的博客
07-19 1174
Flutter作为史上最强UI框架，拥有很多丰富的UI组件，为仿抖音项目的实战，本文简单介绍一下基础组件使用最多的列表ListView的用法。常用属性如下表所示属性类型概述AxisAxis.horizontal ：水平列表，Axis.vertical：垂直列表padding内边距reversebool组件反向排序childrenList列表元素shrinkWrapbool是否根据item高度来决定总高度。
Flutter ListView详解(1)
2401_84415567的博客
05-03 21
/设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直//内间距//是否倒序显示 默认正序 false 倒序true//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。//确定每一个item的高度 会让item加载更加高效//内容适配//item 数量//滑动类型设置//cacheExtent 设置预加载的区域//滑动监听分享一份NDK基础开发资料。
Flutter项目实战之Flutter_Gank
2401_84149444的博客
05-05 754
终于说了一点和标题相关的了，不然有人要说我标题党了，其实做完之后感觉也没什么特色，就列一些用到了哪些知识点吧还有一些基础控件ListView，TabBar，TabBarView，Button，Text，TextField，SnakeBar……的使用开过过程中还遇到了一些小坑，比如，侧滑抽屉Drawer可以通过 _globalKey.currentState.openDrawer()打开却没有提供Close，或者Hide之类的方法关闭，需要通过Navigator.pop(context)来隐藏菜单。
Flutter ListView详解
2401_84132496的博客
04-17 2073
/设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直//内间距//是否倒序显示 默认正序 false 倒序true//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。//确定每一个item的高度 会让item加载更加高效//内容适配//item 数量//滑动类型设置//cacheExtent 设置预加载的区域//滑动监听。
ALI Flutter进阶笔记
2401_84123171的博客
04-21 910
,),}}5.如果应用程序正在运行，请使用热重载按钮新正在运行的应用程序。每次单击热重载或保存项目时，都会在正在运行的应用程序中随机选择不同的单词对。这是因为单词对是在build 方法内部生成的。每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时build 都会运行.如果您的应用程序运行不正常，请查找是否有拼写错误。如果需要，使用下面链接中的代码来对比更正。(The。
Flutter基础学习之进阶
09-06
Flutter基础学习之进阶篇，里面有相比之前基础内容有不少的提升文档。
Flutter之ListView
01-08
Flutter ListView 列表进阶 基础用法 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class ListViewPage extends StatefulWidget { @override State createState() { ...
Flutter教程从入门到进阶实战某网APP
10-06
53讲
Flutter列表组件ListView
01-20
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件...
Flutter实战.pdf
12-09
离线版本Flutter实战,github开源版本，感谢开源。学习Flutter必备资料。混合APP开发
Flutter IOS 打包上架踩坑
我码玄黄的博客
06-16 854
Flutter IOS 打包上架踩坑
2024高频前端面试题（含答案）(1)
2401_85124233的博客
06-12 905
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明
m0_73660699的博客
06-19 831
文章涉及了在 Flutter 桌面应用中如何通过 C++ 和 Win32 API 实现窗口透明效果，并介绍了如何在 main.cpp 中修改代码以实现透明窗口。此外，还讨论了两个 Flutter 包 bitsdojo_window 和 window_manager 的区别及如何同时使用它们来管理和自定义窗口。最终提供了示例代码和注意事项，帮助开发者理解和实现窗口透明化功能。
Flutter showModalBottomSheet用法
最新发布
yaochangliang的博客
06-21 174
flutter showModalBottomSheet
flutter从入门到进阶 实战携程网app资料
01-05
下面我将介绍从入门到进阶的学习路径，并给出实战携程网应用程序的资料。 1. 入门阶段： - 学习Dart语言基础：Dart 是 Flutter 的编程语言，掌握其基本语法和特性非常重要。 - 安装Flutter SDK：根据官方指南下载...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wniuniu_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值