在ListView里面flutter两个ListView.builder

Posted 2023-02-23

【中文标题】在ListView里面flutter两个ListView.builder

【英文标题】：Flutter two ListView.builder inside ListView

【发布时间】：2020-11-16 22:18:26

【问题描述】：

首先我想得到什么，我想在 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: true 也许我错了。我想要实现的重要事情是我有 Header，然后是一个 listview.builder，然后是 Header，然后是最后一个 listview.builder。 谢谢大家的帮助。

【参考方案1】：

嘿，您为此目的使用了错误的小部件。使用CustomScrollView 和SliverList。

不要在很长的动态列表中使用shrinkWrap: true。要使shrinkWrap 正常工作，需要确定列表中所有子小部件的高度，这是一项繁重的计算任务。你可以做的一个例子是

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

【讨论】：

我试过这个滚动是完美的，但第二个列表总是显示错误“RangeError (index): Invalid value: Not in range 0..10, inclusive: 11”，当我改变地方它工作但无论哪个是第二个，它都不起作用。

感谢您的帮助，我接受了您的回答并更新了代码。

【参考方案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,

【讨论】：

我试过像你说的那样我可以说滚动更好，但是当我滚动并接近第二个标题时，整个应用程序会冻结几秒钟，然后我可以继续滚动。感谢您的快速响应

是的，我会更新这个问题。但我认为发生此错误是因为并非所有图像的文件路径中都有“Http”？。

这可能是个问题，你为什么不试试searchResults1[index].image == null ? null : NetworkImage(searchResults1[index].image)), 所以你不是在尝试加载空图像

对不起，您必须在 Image 小部件之前进行检查，如果它为 null，则返回一个空的 Container()

或者你需要的任何高度的容器