目录
- 前言
- 数据集
- 触发器
- 展示视图
- 完整代码
- 总结
前言
在 app 开发过程中，listview 是 比较很常见的控件，用来处理 列表类的数据展示。当然 flutter 也是支持的，由于 flutter 是归属于声明式 ui 编程，其处理起来要更加的简单与便捷。
c/c++开发分享Flutter如何轻松实现动态更新ListView浅析将通过一个极简单的例子来说明一下 如何 实现动态更新数据。 在贴代码之前，先介绍一些概念和内容
数据集
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内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
需要了解更多c/c++开发分享Flutter如何轻松实现动态更新ListView浅析，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/1058770.html