Flutter使用listview添加header
2019-07-03 本文已影响0人
xmb
在Flutter中,ListView 组件相当于RecyclerView,所以添加Header也用RecyclerView的原理。
具体代码如下:
// 根据index展示不同的widget
Widget buildItemWidget(BuildContext context, int index) {
if (index < 1) {
return _buildHeaderWidget(context, index);
} else {
int itemIndex = index - 1;
return _itemBuildWidget(context, itemIndex);
}
}
Widget _itemBuildWidget(BuildContext context, int index) {
return new Container(
margin: new EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0),
color: MkColor.white,
child: new GestureDetector(
onTap: () {
_gotoProjectDetail(projectModelList[index]);
},
child: new Container(
color: MkColor.white,
child: null,
),
),
);
}
// 总count数
int _getItemListCount() {
return projectModelList.length + 1;
}
// header内容
Widget _buildHeaderWidget(BuildContext context, int index) {
return new Text('我是header');
}
build方法中使用
new ListView.builder(
itemCount: _getItemListCount(),
itemBuilder: (BuildContext context, int index) {
return buildItemWidget(context, index);
},
)
最终效果:
Simulator Screen Shot - iPhone Xs - 2019-07-03 at 10.17.57.png