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.
);
}
}
以上。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
