Flutter ListViewBuilder 具有 2 种不同类型的元素（例如，顶部的个人资料图片和之后的个人资料详细信息列表）

Question

I'm aiming for a page that looks like this -

ListView

[Profile _ Image] {Swiper}

[SizedBox]

[Profile Detail-1 ]{Text}

[Profile Detail-2 ]{Text}

[Profile Detail-3 ]{Text}

[Profile Detail-N ] {Text}

I looked at the Flutter cookbook example of MultiList

The cookbook expects all items in the listview to implement the same class. What if this is not possible.

I have tried using index of ListViewBuilder to return Widget based on index.

Is that the right approach? Shall I be doing something completely different - like siglechildScrollView?

Thanks!

Edit1- Current Code that I'm using -

return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollInfo) {
        if (scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent) {
          this._feedBloc.loadMore();
        }
        return false;
      },
      child: ListView.builder(
          padding: EdgeInsets.only(bottom: 72),
          itemCount: this._postItems.length + 1,
          itemBuilder: (context, index) {
            if (this._postItems.length == index) {
              if (this._isLoadingMore) {
                return Container(
                  margin: EdgeInsets.all(4.0),
                  height: 36,
                  width: 36,
                  child: Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              } else {
                return Container();
              }
            }

            if(index==0){
              return WdgtProfileImage();}
            else if(index==1){
              return SizedBox(2.0);}

            return WdgtUserPost(
              model: this._postItems[index],
              onPostClick: onPostClick,
            );
            //return postItemWidget(
            //    postItem: this._postItems[index], onClick: onPostClick);
          }),
    );

Answer 1

You can use a CustomScrollView instead of the normal Listview.builder . The CustomScrollView takes in a list of slivers to which you can pass/use a SliverList to build a list.

CustomScrollView(
  slivers: <Widget>[
    //A sliver widget that renders a normal box widget
    SliverToBoxAdapter(
      child: WdgtProfileImage(),
    ),
    //A sliver list
    SliverList(
      //With SliverChildBuilderDelegate the items are constructed lazily
      //just like in Listview.builder
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return WdgtUserPost(
            model: _postItems[index],
            onPostClick: onPostClick,
          );
        },
        childCount: _postItems.length,
      ),
    ),
    if (_isLoadingMore)
      //your loading widget shown at the bootom of the list
      SliverToBoxAdapter(
        child: Container(
          margin: EdgeInsets.all(4.0),
          height: 36,
          width: 36,
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ),
  ],
)

Additional links to docs:

• SliverList
• SliverChildBuilderDelegate
• SliverToBoxAdapter