Flutter ListView里面的兩個ListView.builder

Question

好吧，首先我想得到什么，我想在 ListView 中得到兩個 ListView.builder(with physical: NeverScrollableScrollPhysics()) 可以滾動，這是我得到它的代碼

工作代碼！！！

      CustomScrollView(slivers: <Widget>[
      SliverToBoxAdapter(
        child: Text("Artist"),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(top: 10, left: 20),
            child: Stack(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(
                    top: maxHeight * 0.014,
                    left: maxWidth * 0.159,
                  ),
                  child: Column(
                    // mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      searchResults1[index].name == null
                          ? Container()
                          : Text(
                              searchResults1[index].name,
                              style: TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                    ],
                  ),
                ),
                Container(
                  // tag: 'recently-played1',
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(6.0),
                    child: searchResults1[index].image == null
                        ? Container()
                        : Image(
                            height: maxHeight * 0.0635,
                            width: maxWidth * 0.1306,
                            image: NetworkImage(searchResults1[index].image),
                            fit: BoxFit.cover,
                          ),
                  ),
                ),
              ],
            ),
          );
        },
        childCount: searchResults1.length
        ),
      ),
      SliverToBoxAdapter(
        child: Text("Songs"),
      ),
      SliverList(
        key: list2,
        delegate: SliverChildBuilderDelegate((BuildContext context, int i) {
          return Padding(
            padding: const EdgeInsets.only(top: 10, left: 20),
            child: Stack(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(
                    top: maxHeight * 0.014,
                    left: maxWidth * 0.159,
                  ),
                  child: Column(
                    // mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      searchResults2[i].title == null
                          ? Container()
                          : Text(
                              searchResults2[i].title,
                              style: TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                      searchResults2[i].author == null
                          ? Container()
                          : Text(
                              searchResults2[i].author,
                              style: TextStyle(
                                  fontSize: 12.0,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.grey),
                            )
                    ],
                  ),
                ),
                Container(
                  // tag: 'recently-played1',
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(6.0),
                    child: searchResults2[i].image == null
                        ? Container()
                        : Image(
                            height: maxHeight * 0.0635,
                            width: maxWidth * 0.1306,
                            image: NetworkImage(searchResults2[i].image),
                            fit: BoxFit.cover,
                          ),
                  ),
                ),
              ],
            ),
          );
        },
        childCount: searchResults1.length
        ),
      ),
    ]);

但是這里發生了什么，兩個列表很長，我遇到了性能問題，滾動不流暢，有時甚至凍結。 有些東西告訴我這是因為shrinkWrap：是的，也許我錯了。 我想要實現的重要事情是我有 Header，然后是一個 listview.builder，然后是 Header，然后是最后一個 listview.builder。 謝謝你們的幫助。

Answer 1

嘿，您為此目的使用了錯誤的小部件。 將CustomScrollView與SliverList一起使用。

不要在非常長的動態列表中使用shrinkWrap: true 。 為了使 shrinkWrap 工作 flutter 需要確定列表中所有子小部件的高度，這是一項繁重的計算任務。 你可以做的一個例子是

CustomScrollView(
 slivers: [
  SliverToBoxAdapter(child: Text("some")),
  SliverList(),
  SliverToBoxAdapter(child: Text("some")),
 ]
)

Answer 2

問題可能在於它是嵌套視圖。 不要使用帶有 NeverScrollableScrollPhysics 的內部 ListView.builder，而是嘗試使用 List.generate 填充列小部件。 然后滾動將由您的外部 ListView 處理。 你的內心清單：

Column(
      children: List.generate(
          myList,
          (index) => myWidget

更新：

而不是加載空圖像

ClipRRect(
borderRadius: BorderRadius.circular(6.0),
child: searchResults1[index].image == null
? Container()
: Image(
height: maxHeight * 0.0635,
width: maxWidth * 0.1306,
image: NetworkImage(searchResults1[index].image),
fit: BoxFit.cover,