工作生活

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
上一篇下一篇

猜你喜欢

热点阅读