脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter动态更新ListView

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

 更新时间：2022年02月15日 10:21:34   作者：技术小黑屋  
在Android中通常都会用到listview.那么flutter里面怎么用呢?下面这篇文章主要给大家介绍了关于Flutter如何轻松实现动态更新ListView的相关资料,需要的朋友可以参考下

前言

在 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论