在ListView中Flutter两个ListView.builder

Question

好的，首先我想得到的是，我想在ListView中得到两个ListView.builder(带有物理：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
),
),
]);

但这里发生的情况是，两个列表很长，我有一个性能问题，滚动不平滑，有时甚至冻结。有人告诉我这是因为收缩包装：true也许我错了。我想实现的重要一点是，我有Header，然后是一个listview.builder，然后是Header，最后是listview.bbuilder。谢谢你们的帮助。

Answer 1

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

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

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

Answer 2

问题可能是它是嵌套视图。不要将内部ListView.builder与NeverScrollableScrollPhysics一起使用，而是尝试使用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,