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

目录

前言

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

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

数据集

final _names = ['andrew', 'bob', 'charles'];int _counter = 0;

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

触发器

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

floatingactionbutton: floatingactionbutton( onpresd: () {   tst中国好声音排名a黑白手抄报te(() {     _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(       onpresd: () {         tstate(() {           _names.add('someone($_counter)');           _counter ++;         });       },       tooltip: 'add timestamp',       child: const icon(icons.add),     ), // this trailing comma makes auto-formatting nicer for build methods.   )2020年高考分数线; }}

以上。

总结

到此这篇关于flutter如何轻松实现动态更新listview的文章就介绍到这了,更多相关flutter动态更新listview内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！