如何在Flutter中实现嵌套列表视图生成器?

dsekswqp  于 2023-01-31  发布在  Flutter
关注(0)|答案(2)|浏览(193)

我已经完成了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检查我已经尝试和完整的源代码

h9a6wy2h

h9a6wy2h1#

要解决“ListView.builder”问题,我建议将其 Package 为“Expanded”,并将“ListView”的“shrinkWrap”属性设置为true。
至于列表中的列表问题,我不确定我是否理解正确,但将内部列表的'primary'属性设置为false应该会使它跟随常规列表的滚动,避免内部滚动。
可能还需要将'shrinkWrap'设置为true,因为它没有定义高度,使其不懒惰,但我也会尝试使用'Expanded' Package 它,因为它可能具有相同的结果,保持其懒惰

lmvvr0a8

lmvvr0a82#

正如@Yeasin Sheikh所建议的,您不需要在ManageCredentialCardItem中使用Listview.builder,因为ManageCredentialCardItem的父对象正在处理滚动,即

SliverList(    // 👈 This will handle scroll
      delegate: SliverChildBuilderDelegate((context, index) {
          return ManageCredentialCard(); //👈 So you can use column instead
       },childCount: 10))

如果您的用例中必须使用ListView.builder从远程源获取结果,则可以在ListView.builder中使用shrinkWrap: true prop

相关问题