美文网首页工作生活
Flutter使用listview添加header

Flutter使用listview添加header

作者: xmb | 来源:发表于2019-07-03 10:19 被阅读0次

    在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

    相关文章

      网友评论

        本文标题:Flutter使用listview添加header

        本文链接:https://www.haomeiwen.com/subject/tfnfhctx.html