如何实现嵌套的ListView，或者说如何将ListView小部件嵌入可滚动的父级？
想象一下一个报告页面，其中某个部分是一份条目列表。
9个回答
249
对于子ListView，请使用该参数：
shrinkWrap: true,
physics: ClampingScrollPhysics(),
- Serdar Polat
10
51
对我而言，添加 physics: ClampingScrollPhysics() 和 shrinkWrap: true 有奏效。
示例代码：
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 123,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Parent'),
ListView.builder(
itemCount: 2,
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Text('Child');
}),
],
);
}),
)
],
),
);
}
- Burak
31
如果您希望内部的
这里是一些展示
ListView与主滚动视图独立滚动，则应使用NestedScrollView。否则，请使用CustomScrollView。这里是一些展示
NestedScrollView方法的代码。
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
pinned: true,
title: new Text('Flutter Demo'),
),
];
},
body: new Column(
children: <Widget>[
new FlutterLogo(size: 100.0, colors: Colors.purple),
new Container(
height: 300.0,
child: new ListView.builder(
itemCount: 60,
itemBuilder: (BuildContext context, int index) {
return new Text('Item $index');
},
),
),
new FlutterLogo(size: 100.0, colors: Colors.orange),
],
),
),
);
}
}
- Collin Jackson
2
5这不能完全滚动Flutter标志。它停止了滚动。我怎样才能滚动整个容器？我的意思是Flutter标志完全不可见？ - NullPointer
“Main” 滚动条中的嵌套条根本无法滚动。在末尾添加更多的标志，结果出现了溢出而不是预期的滚动。嗯. . . - visoft
12
截图：
代码：
var _container = Container(
height: 200,
color: Colors.blue,
margin: EdgeInsets.symmetric(vertical: 10),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ListView")),
body: Padding(
padding: const EdgeInsets.all(40.0),
child: ListView( // parent ListView
children: <Widget>[
_container,
_container,
Container(
height: 200, // give it a fixed height constraint
color: Colors.teal,
// child ListView
child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
),
_container,
_container,
_container,
],
),
),
);
}
- CopsOnRoad
3
这太棒了。谢谢。 - José Nobre
太棒了！试图解决固定高度的问题（例如，如果有更多空间，则让其扩展）。 - visoft
10分钟后：将内部ListView包装在ConstrainedBox中（其中指定最小/最大尺寸），并收缩内部列表。瞧！让我们看看它在生产环境中是否有效。 - visoft
12
对于内部的Listview，我只需添加以下代码，就解决了我的问题。
shrinkWrap: true,
physics: ScrollPhysics(),
- Mimu Saha Tishan
1
当内部的Listview变得可滚动时，您的代码将无法正常工作。 - abrsh
6
感谢Serdar Polat的贡献：
ListView.builder( // outer ListView
itemCount: 4,
itemBuilder: (_, index) {
return Column(
children: [
Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Header $index'),
),
ListView.builder( // inner ListView
shrinkWrap: true, // 1st add
physics: ClampingScrollPhysics(), // 2nd add
itemCount: 10,
itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
)
],
);
},
)
- iDecode
4
使用shrinkWrap来包装您的内容，使用ClampingScrollPhysics来使用父级滚动。
ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: yourList.length,
itemBuilder: (context, index) => YourWidget(items[index]),
),
- Amaury Ricardo
2
我使用这个：
scrollController.addListener(onScroll);
void onScroll(){
if(scrollController.offset == 0.0
|| scrollController.position.extentBefore == 0.0
|| scrollController.position.extentAfter == 0.0){
scrollPhysics = NeverScrollableScrollPhysics();
Future.delayed(Duration(seconds: 1), (){
scrollPhysics = ClampingScrollPhysics();
setState((){});
});
setState((){});;
}
}
- Ali Bagheri
1
使用AlwaysScrollableScrollPhysics而不是ClampingScrollPhysics。 - undefined
0
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: requestList.length,
itemBuilder: (BuildContext context, int index) {
int que = index;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(
left: 20,
top: 10,
bottom: 10,
right: 20),
child: Text(
'${que++} . ${requestList[index].question}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: HexColor(HexColor.black),
fontFamily: 'montserrat_regular',
decoration: TextDecoration.none,
),
)),
ListView.builder(
itemCount: requestList[index].questionOptions!.length,
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int subindex) {
return Row(
children: <Widget>[
Radio(
value: 1,
groupValue: radio_value[index],
onChanged: (values) async {
setState(() {
radio_value[index] = 1;
qutionCheckModel[index].response =
"yes";
});
}),
Container(
child: Text(
requestList[index].questionOptions![subindex],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: HexColor(HexColor.black),
fontFamily: 'montserrat_regular',
decoration: TextDecoration.none,
),
),
),
],
);
}),
],
);
}),
),
- sarjeet singh
1
嘿，我在看这段代码。假设我有一个带控制器的文本字段在第二个listview.builder中。我该如何使每个条目的控制器唯一？因为我不能执行“controller：_controllertext [index] [subindex]”。 - Kim Lo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 3 如何在Flutter中实现嵌套的ListView.builder？
- 32 Flutter - 在另一个Listview中嵌套Listview.builder
- 3 如何在Flutter中使用ListView嵌套ListView？
- 3 如何在Flutter ListView中实现类似于WhatsApp聊天界面的Lazyload
- 20 如何在Flutter中实现嵌套导航
- 14 如何在Flutter中实现ListView的平滑滚动
- 4 Flutter ListView 收缩包裹 - 嵌套的 ListView
- 10 如何在Flutter中创建圆形ListView
- 50 如何在Flutter中反转ListView
- 3 如何在Flutter中使用Firestore的ListView实现无限滚动
ScrollBar中，而ScrollBar又嵌套在ScrollConfiguration中，最后再嵌套在一个Container中时，此方法对我无效。 - Kaki Master Of Time