Flutter表格视图插件idkit_tableview的使用
Flutter表格视图插件idkit_tableview的使用
1. 简介
该组件支持两种类型的列表显示，即单列表和分组列表。它支持列表中指定元素视图的更新、指定分组视图的更新以及整个列表的更新。它不支持表格中元素视图的移动和删除。
2. 两种类型的列表
enum TableViewStyle {
plain, // 普通表格视图
group, // 分组在一起的分段
}
默认情况下为普通列表。
3. 表格视图的控制更新对象
1. 类名: IDKitUpdateControl
2. 类定义
class IDKitUpdateControl {
/// 工厂方法初始化对象。
factory IDKitUpdateControl() => IDKitUpdateControl._();
/// 基本构造方法。
IDKitUpdateControl._() {
_updateStreamController = StreamController<IDKitUpdateType>();
}
/// 默认生成事件转发订阅者。
StreamController<IDKitUpdateType>? _updateStreamController;
StreamController<IDKitUpdateType>? get updateStreamController {
_updateStreamController =
_updateStreamController ?? IDKitUpdateControl().updateStreamController;
return _updateStreamController;
}
...... // 省略代码
}
3. 更新方法
/// 更新表格视图的头部视图。
void updateHeaderTableView()
/// 更新表格视图的底部视图。
void updateFotterTableView()
/// 更新分组的头部视图。
void updateHeaderSection(int section)
/// 更新分组的底部视图。
void updateFotterSection(int section)
/// 更新分组内某一行的视图。
void updateRowInSection(IDKitIndexPath indexPath)
/// 更新分组内的分割视图。
void updateSeparateInSection(int section)
/// 更新分组内的所有视图。
void updateRowsInSection(int section)
/// 更新所有表格视图。
void updateTableView()
4. 组件的一些功能介绍
// 设置表格视图的头部视图
1. headerInTableView: (Widget view) -> Widget
// 设置表格视图的底部视图
2. footerInTableView: (Widget view) -> Widget
// 设置一组表格视图的头部视图
3. headerInSection: (_, int section) -> Widget
// 设置一组表格视图的底部视图
4. footerInSection: (_, int section) -> Widget
// 表格视图中的分组数量
5. numberOfSection: (_) -> Int
// 表格视图中每个分组的所有元素数量
6. numberOfRowInSection: (_, int section) -> Int
// 构建包含表格视图中所有元素的每个分组的视图
7. itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) -> Widget
// 在表格视图中每个分组之间的分割视图
8. separateInSection: (_, int section) -> Widget
5. 组件示例演示
1. 单一分组列表实例
/// 单个表格视图
class SingleTableView extends StatefulWidget {
const SingleTableView({Key? key}) : super(key: key);
[@override](/user/override)
_SingleTableViewState createState() => _SingleTableViewState();
}
class _SingleTableViewState extends State<SingleTableView> {
final List<int> list = List<int>.generate(10, (int index) => 0);
final IDKitUpdateControl updateControl = IDKitUpdateControl();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('单个列表'),
),
body: Container(
alignment: Alignment.center,
child: IDKitTableView(
updateControl: updateControl,
itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) {
return Container(
height: 60,
alignment: Alignment.center,
color: Colors.red,
child: Row(
children: <Widget>[
const Icon(Icons.ac_unit_outlined),
GestureDetector(
onTap: () {
list[indexPath.row] += 1;
updateControl.updateRowInSection(indexPath);
},
child: Text('项目 -- ${indexPath.row}'),
),
const Spacer(),
Text(list[indexPath.row].toString()),
],
),
);
},
numberOfRowInSection: (_, __) {
return list.length;
},
),
),
);
}
}
2. 多分组列表实例
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final Map<String, String> map = <String, String>{
'Num': '110',
'Count': '220'
};
List<int> list = <int>[1, 2, 3, 4, 5, 6];
final IDKitUpdateControl _updateTableView = IDKitUpdateControl();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('多个列表'),
),
body: Container(
alignment: Alignment.center,
child: IDKitTableView(
style: TableViewStyle.group,
updateControl: _updateTableView,
headerInTableView: (Widget view) {
return Container(
height: 100,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GestureDetector(
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(),
),
child: Text(' 单独更新-${map['Num']}'),
),
onTap: () {
map['Num'] = '330';
_updateTableView.updateHeaderTableView();
},
),
GestureDetector(
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(),
),
child: Text('多次更新-${map['Num']}'),
),
onTap: () {
map['Num'] = '430';
list = list.map((int e) => e * 10).toList();
_updateTableView.updateRowsInSection(1);
},
),
GestureDetector(
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(),
),
child: Text('全部更新-${map['Num']}'),
),
onTap: () {
_updateTableView.updateTableView();
},
)
],
),
);
},
footerInTableView: (_) {
return Container(
height: 100,
color: Colors.pink,
child: Text('表格视图底部 - ${map['Num']}'),
);
},
headerInSection: (_, int section) {
return Container(
height: 60,
color: Colors.yellow,
child: Text(
'第 $section 组表格视图头部 - ${map['Num']}'),
);
},
footerInSection: (_, int section) {
return Container(
height: 60,
color: Colors.yellow,
child: Text('第 $section 组表格视图底部'),
);
},
numberOfSection: (_) => 4,
numberOfRowInSection: (_, int section) {
final int res = section % 2;
return res == 0 ? 2 : 6;
},
itemForRowAtIndexPath: (_, IDKitIndexPath indexPath) {
if (indexPath.section == 1) {
return Card(
child: Text('卡片 - ${list[indexPath.row]}'),
);
} else {
return Container(
alignment: Alignment.center,
child: Row(
children: const <Widget>[
Icon(Icons.access_alarm_outlined),
Text('项目'),
],
),
height: 100,
);
}
},
hideDivider: false,
separateInSection: (_, int section) {
return Container(
height: 20,
color: Colors.white,
child:
Text('------------ 分组分割视图 -$section ------------'),
);
},
),
),
);
}
}
更多关于Flutter表格视图插件idkit_tableview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter表格视图插件idkit_tableview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
idkit_tableview 是一个 Flutter 插件，用于在 Flutter 应用中实现类似于 iOS 的 UITableView 的表格视图。它提供了高性能的表格视图组件，支持多种自定义选项，如行高、分割线、头部和尾部视图等。
安装
首先，你需要在 pubspec.yaml 文件中添加 idkit_tableview 依赖：
dependencies:
flutter:
sdk: flutter
idkit_tableview: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
基本使用
以下是一个简单的例子，展示如何使用 idkit_tableview 创建一个基本的表格视图：
import 'package:flutter/material.dart';
import 'package:idkit_tableview/idkit_tableview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('IDKitTableView Example'),
),
body: MyTableView(),
),
);
}
}
class MyTableView extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return IDKitTableView(
sectionCount: 1, // 表格的节数
rowCount: (section) => 10, // 每节的行数
cellBuilder: (context, indexPath) {
return ListTile(
title: Text('Row ${indexPath.row}'),
);
},
headerBuilder: (context, section) {
return Container(
color: Colors.grey[300],
padding: EdgeInsets.all(8.0),
child: Text('Header for Section $section'),
);
},
footerBuilder: (context, section) {
return Container(
color: Colors.grey[300],
padding: EdgeInsets.all(8.0),
child: Text('Footer for Section $section'),
);
},
);
}
}
参数说明
sectionCount: 表格的节数。rowCount: 每节的行数，它是一个函数，接收节索引并返回该节的行数。cellBuilder: 用于构建每个单元格的 Widget，接收BuildContext和IndexPath对象。headerBuilder: 用于构建每节的头部视图，接收BuildContext和节索引。footerBuilder: 用于构建每节的尾部视图，接收BuildContext和节索引。
自定义选项
idkit_tableview 还支持多种自定义选项，例如：
cellHeight: 设置单元格的高度。separatorColor: 设置分割线的颜色。separatorHeight: 设置分割线的高度。separatorInsets: 设置分割线的内边距。
示例
以下是一个更复杂的例子，展示如何自定义单元格高度和分割线：
class MyTableView extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return IDKitTableView(
sectionCount: 2,
rowCount: (section) => section == 0 ? 5 : 10,
cellBuilder: (context, indexPath) {
return ListTile(
title: Text('Row ${indexPath.row} in Section ${indexPath.section}'),
);
},
headerBuilder: (context, section) {
return Container(
color: Colors.grey[300],
padding: EdgeInsets.all(8.0),
child: Text('Header for Section $section'),
);
},
footerBuilder: (context, section) {
return Container(
color: Colors.grey[300],
padding: EdgeInsets.all(8.0),
child: Text('Footer for Section $section'),
);
},
cellHeight: (indexPath) => indexPath.section == 0 ? 60.0 : 80.0,
separatorColor: Colors.grey,
separatorHeight: 1.0,
separatorInsets: EdgeInsets.symmetric(horizontal: 16.0),
);
}
}