我已经完成了this发布
对于嵌套滚动,但它不是正确的方式,根据我的解释,在this视频从官方flutter频道
我想实现下面的布局
列表标题,如索赔要求的凭据,索赔收到的凭据,待定的请求等是动态的,将来自后端。此外,这些列表标题中的每一项,如模块1:设计金融服务也是动态的
所以我需要列表中的列表
我正在使用CustomScroll,但无法实现内部列表视图
我正在寻找一个惰性列表选项,而不仅仅是将内部列表Map到列或列表上,因为内部列表可能包含100个项目
以下是我取得的成果
下面是示例代码
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
HeaderGradient(),
Positioned(
top: 110,
left: 0,
right: 0,
bottom: 0,
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: const BoxDecoration(
color: grayColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: CustomScrollView(
slivers: [
const SliverToBoxAdapter(
child: ManageCredentialHeader(),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ManageCredentialCard();
}, childCount: 10))
],
),
),
)
],
),
);
}
}
以及
class ManageCredentialCard extends StatelessWidget {
const ManageCredentialCard({super.key});
@override
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).colorScheme.background,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Column(
children: [
const ManageCredentialCardHeader(),
const ManageCredentialCardItem()
],
),
),
);
}
}
ManageCredentialCardItem
是内部列表
当我将ManageCredentialCardItem
Package 到ListView.builder
中时,我收到错误消息
RenderFlex children have non-zero flex but incoming height constraints are
unbounded.
When a column is in a parent that does not provide a finite height constraint,
for example if it is
in a vertical scrollable, it will try to shrink-wrap its children along the
vertical axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to
fill the remaining
space in the vertical direction.
检查sample repo检查我已经尝试和完整的源代码
2条答案
按热度按时间h9a6wy2h1#
要解决“ListView.builder”问题,我建议将其 Package 为“Expanded”,并将“ListView”的“shrinkWrap”属性设置为true。
至于列表中的列表问题,我不确定我是否理解正确,但将内部列表的'primary'属性设置为false应该会使它跟随常规列表的滚动,避免内部滚动。
可能还需要将'shrinkWrap'设置为true,因为它没有定义高度,使其不懒惰,但我也会尝试使用'Expanded' Package 它,因为它可能具有相同的结果,保持其懒惰
lmvvr0a82#
正如@Yeasin Sheikh所建议的,您不需要在
ManageCredentialCardItem
中使用Listview.builder
,因为ManageCredentialCardItem
的父对象正在处理滚动,即如果您的用例中必须使用
ListView.builder
从远程源获取结果,则可以在ListView.builder
中使用shrinkWrap: true
prop