flutter - Flutter中如何设计和实现一个多列的列表视图?
问题描述
我正在开发一个新的应用程序,它将以表格格式列出数据库内容。就像我想在回收站视图中显示它一样,那里有 4 列和单独的列头。我不知道如何在支持多列的颤振中使用列表视图。
我尝试了以下替代方案
Widget listViewWidget(List<DashboardResponse> dashboard) {
var listView = ListView.builder(
itemCount: dashboard.length,
itemBuilder: (context, position) {
return new Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text ('${dashboard[position].spvName}'),
),
Flexible(
child: Text ('${dashboard[position].mobileCount}'),
),
Flexible(
child: Text ('${dashboard[position].webCount}'),
),
],
);
}
);
return listView;
}
另一种方式
var listView = ListView.builder(
itemCount: dashboard.length,
itemBuilder: (context, position) {
return ListTile(
title: Text(
'${dashboard[position].spvName}',
style: TextStyle(
fontSize: 18.0,
color: Colors.amber,
fontWeight: FontWeight.bold),
),
);
}
);
return listView;
}
[![Multicolumn listview][1]][1]
[1]: https://i.stack.imgur.com/EoVxy.jpg
解决方案
对于 ListView 添加列标题需要额外注意,请参考this。Flutter:我可以将标题行添加到 ListView 代码片段吗
通过 itemBuilder 将标题作为第一行返回:
ListView.builder(
itemCount: data == null ? 1 : data.length + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
// return the header
return new Column(...);
}
index -= 1;
// return row
var row = data[index];
return new InkWell(... with row ...);
},
);
DataTable 支持列标题,您可以考虑使用 DataTable 实现,请查看下面的示例。
完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: DataTableDemo(),
);
}
}
class User {
String firstName;
String lastName;
User({this.firstName, this.lastName});
static List<User> getUsers() {
return <User>[
User(firstName: "Aaryan", lastName: "Shah"),
User(firstName: "Ben", lastName: "John"),
User(firstName: "Carrie", lastName: "Brown"),
User(firstName: "Deep", lastName: "Sen"),
User(firstName: "Emily", lastName: "Jane"),
];
}
}
class DataTableDemo extends StatefulWidget {
DataTableDemo() : super();
final String title = "Data Table Flutter Demo";
@override
DataTableDemoState createState() => DataTableDemoState();
}
class DataTableDemoState extends State<DataTableDemo> {
List<User> users;
List<User> selectedUsers;
bool sort;
@override
void initState() {
sort = false;
selectedUsers = [];
users = User.getUsers();
super.initState();
}
onSortColum(int columnIndex, bool ascending) {
if (columnIndex == 0) {
if (ascending) {
users.sort((a, b) => a.firstName.compareTo(b.firstName));
} else {
users.sort((a, b) => b.firstName.compareTo(a.firstName));
}
}
}
onSelectedRow(bool selected, User user) async {
setState(() {
if (selected) {
selectedUsers.add(user);
} else {
selectedUsers.remove(user);
}
});
}
deleteSelected() async {
setState(() {
if (selectedUsers.isNotEmpty) {
List<User> temp = [];
temp.addAll(selectedUsers);
for (User user in temp) {
users.remove(user);
selectedUsers.remove(user);
}
}
});
}
SingleChildScrollView dataBody() {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
sortAscending: sort,
sortColumnIndex: 0,
columns: [
DataColumn(
label: Text("FIRST NAME"),
numeric: false,
tooltip: "This is First Name",
onSort: (columnIndex, ascending) {
setState(() {
sort = !sort;
});
onSortColum(columnIndex, ascending);
}),
DataColumn(
label: Text("LAST NAME"),
numeric: false,
tooltip: "This is Last Name",
),
],
rows: users
.map(
(user) => DataRow(
selected: selectedUsers.contains(user),
onSelectChanged: (b) {
print("Onselect");
onSelectedRow(b, user);
},
cells: [
DataCell(
Text(user.firstName),
onTap: () {
print('Selected ${user.firstName}');
},
),
DataCell(
Text(user.lastName),
),
]),
)
.toList(),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
verticalDirection: VerticalDirection.down,
children: <Widget>[
Expanded(
child: dataBody(),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: OutlineButton(
child: Text('SELECTED ${selectedUsers.length}'),
onPressed: () {},
),
),
Padding(
padding: EdgeInsets.all(20.0),
child: OutlineButton(
child: Text('DELETE SELECTED'),
onPressed: selectedUsers.isEmpty
? null
: () {
deleteSelected();
},
),
),
],
),
],
),
);
}
}
推荐阅读
- vue.js - 是否有任何库或包可以在 vuejs 中显示和实时编辑?
- wpf - TreeView.ItemTemplate HierarchicalDataTemplate 中的数据在切换 Selected TreeItem 时被擦除
- javascript - 如果我在 mousedown 事件中使用 mousemove 事件,event.movementX 在 IE11 中不起作用
- wordpress - Wordpress 开发人员检索到文本框的永久链接
- javascript - 如果至少一个字段已填充值,则启用提交按钮
- python - 使用 LSTM 进行人脸图像识别
- java - 从 HQL 中的时间戳中提取日期以在 where 子句中进行比较
- javascript - 如何将时间格式更改为另一种格式?
- terraform - 有没有办法使用 terraform 在已经存在的基础设施中运行脚本
- wpf - 自动从 ddMM 获取完整日期 dd/mm/YYYY