返回顶部
首页 > 资讯 > 移动开发 >Flutter如何轻松实现动态更新ListView浅析
  • 464
分享到

Flutter如何轻松实现动态更新ListView浅析

2024-04-02 19:04:59 464人浏览 安东尼
摘要

目录前言数据集触发器展示视图完整代码总结前言 在 App 开发过程中,ListView 是 比较很常见的控件,用来处理 列表类的数据展示。当然 Flutter 也是支持的,由于 Fl

前言

在 App 开发过程中,ListView 是 比较很常见的控件,用来处理 列表类的数据展示。当然 Flutter 也是支持的,由于 Flutter 是归属于声明式 UI 编程,其处理起来要更加的简单与便捷。

本文将通过一个极简单的例子来说明一下 如何 实现动态更新数据。 在贴代码之前,先介绍一些概念和内容

数据集

final _names = ['Andrew', 'Bob', 'Charles'];
int _counter = 0;

新的数据Item 'Someone($_counter)' 会被触发加入到 _names 数组中。

触发器

通常触发加载数据是分页数据加载完成,这里我们使用一个 FloatingActionButton 的点击操作等价模拟。

floatingActionButton: FloatingActionButton(
 onPressed: () {
   setState(() {
     _names.add('Someone($_counter)');
     _counter ++;
   });
 },
 tooltip: 'Add TimeStamp',
 child: const Icon(Icons.add),

展示视图

Expanded(
 child: ListView.builder(
     itemCount: _names.length,
     itemBuilder: (BuildContext context, int index) {
       return Container(
           width: double.infinity,
           height: 50,
           alignment: Alignment.center,
           child: Text(_names[index]));
     }),
),

上述代码

需要Expanded 包裹 ListView 确保空间展示填充 使用 ListView.builder 方法实现 ListView

总体来说,Flutter 中实现 ListView 数据动态添加和展示,真的很便捷,少去了传统UI 编程中显式的 Adapter 等内容,编码效率提升不少。

完整代码

import 'package:flutter/material.dart';

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

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

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({Key? key, required this.title}) : super(key: key);

 final String title;

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final _names = ['Andrew', 'Bob', 'Charles'];
 int _counter = 0;

 @override
 Widget build(BuildContext context) {

   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Column(
       children: [
         Expanded(
           child: ListView.builder(
               itemCount: _names.length,
               itemBuilder: (BuildContext context, int index) {
                 return Container(
                     width: double.infinity,
                     height: 50,
                     alignment: Alignment.center,
                     child: Text(_names[index]));
               }),
         ),
       ],

     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () {
         setState(() {
           _names.add('Someone($_counter)');
           _counter ++;
         });
       },
       tooltip: 'Add TimeStamp',
       child: const Icon(Icons.add),
     ), // This trailing comma makes auto-fORMatting nicer for build methods.
   );
 }
}

以上。

总结

到此这篇关于Flutter如何轻松实现动态更新ListView的文章就介绍到这了,更多相关Flutter动态更新ListView内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Flutter如何轻松实现动态更新ListView浅析

本文链接: https://lsjlt.com/news/139204.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter如何轻松实现动态更新ListView浅析
    目录前言数据集触发器展示视图完整代码总结前言 在 App 开发过程中,ListView 是 比较很常见的控件,用来处理 列表类的数据展示。当然 Flutter 也是支持的,由于 Fl...
    99+
    2024-04-02
  • Flutter listview如何实现下拉刷新上拉加载更多功能
    目录下拉刷新 RefreshIndicator 上拉加载更多 总结:下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式...
    99+
    2024-04-02
  • CentOS 7如何实现DNS+DHCP动态更新
    这篇文章给大家分享的是有关CentOS 7如何实现DNS+DHCP动态更新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。windows域里有一个功能,dhcp把新分发的ip数据发给DNS服务器,这样只要知道一个人...
    99+
    2023-06-10
  • flutter如何实现带删除动画的listview功能
    这篇文章将为大家详细讲解有关flutter如何实现带删除动画的listview功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。个人开发app中,需要开发一个带有删除功能的ListView效果如下需求动画...
    99+
    2023-06-15
  • 如何通过脚本实现数据动态更新
    在数据填报的场景中,常常会遇到根据条件动态更新数据的需求,例如:在条件 A 下将页面所有数据插入到数据库表中,而在条件 B 下则将页面中做了修改的数据更新到数据库表中。遇到这种需求,脑海中的第一个想法就是:存储过程更新、或者 java 代码...
    99+
    2023-06-02
  • Android实现Listview异步加载网络图片并动态更新的方法
    本文实例讲述了Android实现Listview异步加载网络图片并动态更新的方法。分享给大家供大家参考,具体如下: 应用实例:解析后台返回的数据,把每条都显示在ListView...
    99+
    2022-06-06
    网络图 更新 方法 图片 listview 动态 Android
  • flutter如何实现更新弹窗内容例子
    这篇文章将为大家详细讲解有关flutter如何实现更新弹窗内容例子,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是FlutterFlutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和And...
    99+
    2023-06-14
  • 如何浅析C++动态加载DLL在Windows Mobile下实现
    如何浅析C++动态加载DLL在Windows Mobile下实现,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。静态加载DLL的方法使用Native C++的开发...
    99+
    2023-06-17
  • vue如何动态实时的显示时间浅析
    vue动态实时显示时间有两种方法 1.可以用day.js,处理日期和时间的js库 用法 npm install dayjs --save 引入import dayjs from 'd...
    99+
    2024-04-02
  • Android如何实现APP自动更新
    先来看看要实现的效果图: 对于安卓用户来说,手机应用市场说满天飞可是一点都不夸张,比如小米,魅族,百度,360,机锋,应用宝等等,当我们想上线一款新版本APP时,先不说渠道打...
    99+
    2022-06-06
    更新 app Android
  • ASP.NET Core如何实现简单的静态网站滚动更新
    目录IntroFileProviderConstruct HostDemoMore总结Intro 最近我们老板想让我实现一个静态网站“滚动更新”的功能,其实就是希望网站部署的时候网...
    99+
    2024-04-02
  • 如何实现动态域名解析
    在linux系统中实现动态域名解析的方法首先,在linux系统中搭建一个动态域名解析环境;yum install dhcp -ycd /etc/dhcp cp /usr/share/doc/dhcp*/dhcpd.conf.example ...
    99+
    2024-04-02
  • 更新应用时如何实现K8s中断滚动更新
    本篇文章给大家分享的是有关更新应用时如何实现K8s中断滚动更新,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Kubernetes 集群中,业务通常采用 Deployment +...
    99+
    2023-06-04
  • c# 如何实现自动更新程序
    目录主要功能介绍客户端main方法入口主窗体代码更新帮助类版本xml文件解析服务端版本xml文件自动升级服务Controller版本文件自动生成帮助类结语主要功能介绍 实现文件的自动...
    99+
    2024-04-02
  • 如何结合ECharts和php接口实现统计图的动态更新
    如何结合ECharts和PHP接口实现统计图的动态更新引言:数据可视化在现代应用程序中起着至关重要的作用。ECharts是一个优秀的JavaScript图表库,可以帮助我们轻松创建各种类型的统计图表。而PHP则是一种广泛应用于服务器端开发的...
    99+
    2023-12-17
    echarts PHP接口 统计图
  • Vue.set()如何实现动态新增与修改数据以及触发视图更新
    小编给大家分享一下Vue.set()如何实现动态新增与修改数据以及触发视图更新,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!参数...
    99+
    2024-04-02
  • PostgreSQL如何实现自动更新时间戳
    这篇文章主要介绍PostgreSQL如何实现自动更新时间戳,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是PostgreSQL时间戳数据类型?在PostgreSQL中,下一个数据类型是 TIMESTAMP ,它可...
    99+
    2023-06-21
  • .Net Core如何配置与实现自动更新
    这篇文章给大家分享的是有关.Net Core如何配置与实现自动更新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。.Net Core 将之前Web.Config中的配置迁移到了appsettings.json文件中...
    99+
    2023-06-19
  • Linux系统如何实现自动更新时间
    这篇文章主要介绍“Linux系统如何实现自动更新时间”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Linux系统如何实现自动更新时间”文章能帮助大家解决问题。安装NTP客户端 yum&nb...
    99+
    2023-06-28
  • scrapy如何实现ip动态代理与更换ip
    这篇文章将为大家详细讲解有关scrapy如何实现ip动态代理与更换ip,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。请自行准备一个ip代理的平台例如我用的这个平台,每次提取10个ip从上面可以看到数据格式...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作