作者:00我就是我00乐乐 | 来源:互联网 | 2022-12-19 17:47
对Flutter来说很新.我已经能够利用HTTP请求数据,构建ListView,编辑该列表中的行和其他基础知识.环境优美.
我已经设法将一个构造糟糕的Header拼凑成一个ListView ......但我知道这是不对的.我无法正确排列Header文本.
我看到Drawer类有一个DrawerHeader类,但是看不到ListView有一个ListViewHeader.
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Contacts'),
actions: [
new IconButton(icon: new Icon(Icons.add_circle),
onPressed: getCustData
),
],
),
//body:
body: new Column(
children: [
new Row(
children: [
new Expanded(child: new Text('', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
new Expanded(child: new Text('First Name', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
new Expanded(child: new Text('Last Name', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
new Expanded(child: new Text('City', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
new Expanded(child: new Text('Customer Id', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
new Expanded(child: new Text('', style: new TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
]
),
new Expanded(child:Container(
child: ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
return new InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new APIDetailView(data[index])),
);
},
child: new ListTile( //return new ListTile(
onTap: null,
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text(data[index]["FirstName"][0]),
),
title: new Row(
children: [
new Expanded(child: new Text(data[index]["FirstName"])),
new Expanded(child: new Text(data[index]["LastName"])),
new Expanded(child: new Text(data[index]["Bill_City"])),
new Expanded(child: new Text(data[index]["Customer_Id"])),
]
)
),
);
}, //itemBuilder
),
),
),
]
)
);
}}
谢谢.
1> najeira..:
将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 ...);
},
);
我不想 这是一个移动应用程序……永远不知道我要处理的屏幕宽度是多少。
2> davidk..:
这是我解决这个问题的方法。感谢najeira让我思考其他解决方案。
在第一个正文Column中,我为Header使用了与ListTile相同的布局。
因为在这种情况下,我的数据ListTile包括一个CircleAvatar,所以所有的水平间距都略微有些偏...渲染CircleAvatar的5列...然后是4个均匀间隔的列。
所以...我在第一个正文列中添加了一个ListTile,添加了一个backgroundColor为透明的CircleAvatar,然后添加了我的4个标题行。
new ListTile(
onTap: null,
leading: new CircleAvatar(
backgroundColor: Colors.transparent,
),
title: Row(
children: [
new Expanded(child: new Text("First Name")),
new Expanded(child: new Text("Last Name")),
new Expanded(child: new Text("City")),
new Expanded(child: new Text("Id")),
]
),
),