iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >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://www.lsjlt.com/news/139204.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter如何轻松实现动态更新ListView浅析
    目录前言数据集触发器展示视图完整代码总结前言 在 App 开发过程中,ListView 是 比较很常见的控件,用来处理 列表类的数据展示。当然 Flutter 也是支持的,由于 Fl...
    99+
    2022-11-13
  • Flutter listview如何实现下拉刷新上拉加载更多功能
    目录下拉刷新 RefreshIndicator 上拉加载更多 总结:下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式...
    99+
    2022-11-12
  • CentOS 7如何实现DNS+DHCP动态更新
    这篇文章给大家分享的是有关CentOS 7如何实现DNS+DHCP动态更新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。windows域里有一个功能,dhcp把新分发的ip数据发给DNS服务器,这样只要知道一个人...
    99+
    2023-06-10
  • 如何通过脚本实现数据动态更新
    在数据填报的场景中,常常会遇到根据条件动态更新数据的需求,例如:在条件 A 下将页面所有数据插入到数据库表中,而在条件 B 下则将页面中做了修改的数据更新到数据库表中。遇到这种需求,脑海中的第一个想法就是:存储过程更新、或者 java 代码...
    99+
    2023-06-02
  • 如何浅析C++动态加载DLL在Windows Mobile下实现
    如何浅析C++动态加载DLL在Windows Mobile下实现,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。静态加载DLL的方法使用Native C++的开发...
    99+
    2023-06-17
  • ASP.NET Core如何实现简单的静态网站滚动更新
    目录IntroFileProviderConstruct HostDemoMore总结Intro 最近我们老板想让我实现一个静态网站“滚动更新”的功能,其实就是希望网站部署的时候网...
    99+
    2022-11-12
  • Vue.set()如何实现动态新增与修改数据以及触发视图更新
    小编给大家分享一下Vue.set()如何实现动态新增与修改数据以及触发视图更新,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!参数...
    99+
    2022-10-19
  • 如何结合ECharts和php接口实现统计图的动态更新
    如何结合ECharts和PHP接口实现统计图的动态更新引言:数据可视化在现代应用程序中起着至关重要的作用。ECharts是一个优秀的JavaScript图表库,可以帮助我们轻松创建各种类型的统计图表。而PHP则是一种广泛应用于服务器端开发的...
    99+
    2023-12-17
    echarts PHP接口 统计图
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作