ListView 内的 ExpansionTile - 页面不滚动

Posted

技术标签:

【中文标题】ListView 内的 ExpansionTile - 页面不滚动【英文标题】:ExpansionTile inside ListView - page not scrolling 【发布时间】:2020-05-23 17:15:11 【问题描述】:

我遇到了页面滚动问题。我正在显示每天分组的用户交易。 所以ExpansionTile里面会有多个项目。

我首先从数据库中提取几天,然后在那天完成交易。 所以下面是我的页面的工作方式

    获取所有记录 获取天数并放入一个列表(天数列表) 在此列表(天列表)中使用 for 循环加载主扩展图块 当我们执行 for 循环时,会在当天获取事务并加载到另一个数组中 将子级列表作为子级绑定到 ExpansionTile。

我的视图加载正常,但是当我打开 ExpansionTile 的子项时,我无法滚动页面。请查看视频以获得更清晰的理解。 https://drive.google.com/file/d/1EVETVRHx0vZqiGryrcxUR0klrEX8Y63G/view?usp=sharing

我的代码如下,

 Widget build(BuildContext context) 
    return new Scaffold(

      body: FutureBuilder(
        future: getTransactions(),
        builder: (context, snapshot) 
          if (!snapshot.hasData) 
            return Center(child: CircularProgressIndicator());
           else if (feedItemsParent.isEmpty) 
            return noRecordsDialogue(context, 'No transactions record', '');
           else if (feedItemsParent.length == 0) 
            return noRecordsDialogue(context, 'No transactions record', '');
           else 
            return new ListView.builder(
                shrinkWrap: true,
                itemCount: feedItemsParent.length,
                itemBuilder: (BuildContext ctxt, int index) =>
                    buildBody(ctxt, index));
          
        ,
      ),
    );
  

下面是 buildBody 函数。

Widget buildBody(BuildContext ctxt, int index) 
    return new custom.ExpansionTile(
      initiallyExpanded: true,
      trailing: new Container(width: 20),
      headerBackgroundColor: Color(0xFFeff0f1),
      title: Text(
        feedItemsParent[index].transactiondatesmall.toString(),
        style: TextStyle(
          fontSize: 16,
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
      children: <Widget>[
        buildTransactionList(
            feedItemsParent[index].transactiondatesmall.toString()),
      ],
    );
  

以下是我如何将所有孩子带入ExpansionTile。

 buildTransactionList(dtCompare) 
    if (feedItems.length == 0) 
      return noRecordsDialogue(context, 'No transactions record', '');
     else 
      List<UserTransaction> feedItemsChild = [];
      for (int j = 0; j < feedItems.length; j++) 
        if (feedItems[j].transactiondatesmall == dtCompare) 
          feedItemsChild.add(feedItems[j]);
        
      

      return ListView(
        padding: const EdgeInsets.only(bottom: 16.0),
        shrinkWrap: true,
        children: feedItemsChild,
      );
    

提前致谢。

【问题讨论】:

【参考方案1】:

最后我能够使用下面链接中给出的答案来解决这个问题。根据答案中给出的更改我的代码,因为我的要求是 80% 相似。

How to create Expandable ListView in Flutter

谢谢。

【讨论】:

【参考方案2】:

只需将此代码添加到 ListView.Builder 即可解决此问题

physics: const NeverScrollableScrollPhysics()

【讨论】:

以上是关于ListView 内的 ExpansionTile - 页面不滚动的主要内容,如果未能解决你的问题,请参考以下文章

颤振| ExpansionTile属性“children”在扩展时抛出了Bottous Overflowed问题

只允许展开一个 ExpansionTile

修改默认的 ExpansionTile 子项垂直填充 Flutter

7-3 基于ExpansionTile实现可展开的列表

ListView Flutter 中的 ListViews

expansiontile 打开关闭楼层