listview.builder 底部溢出和灵活和扩展小部件的错误

Posted

技术标签:

【中文标题】listview.builder 底部溢出和灵活和扩展小部件的错误【英文标题】:listview.builder bottom overflowing and errors with Flexible and Expanded widgets 【发布时间】:2020-05-08 00:16:41 【问题描述】:

我正在尝试构建一个 ListView,但我无法做到让我的列表在不溢出的情况下到达底部,我发现工作的方式是在容器上设置高度,但是,当我使用我的个人设备时我的列表下方有一个很大的空白区域。

我已经在列表之前尝试了灵活和扩展的小部件,但都没有成功,我总是遇到同样的错误:

RenderFlex children have non-zero flex but incoming height constraints are unbounded

Vertical viewport was given unbounded height error

您对此有任何解决方案吗?

@override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.blueAccent,
        title: Padding(
          padding: EdgeInsets.only(left: 5.0),
          child: Text(
            user.name,
            style: TextStyle(fontSize: 30.0),
          ),
        ),
        actions: <Widget>[
          IconButton(
            alignment: Alignment.center,
            icon: Icon(Icons.forward),
            onPressed: () ,
          ),
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            color: Colors.blueAccent,
            child: Padding(
              padding: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text("Conta",
                      style: TextStyle(fontSize: 17.0, color: Colors.white)),
                  Divider(color: Colors.blueAccent),
                  Text("$user.bankAccount / $user.agency",
                      style: TextStyle(fontSize: 30.0, color: Colors.white)),
                  Padding(
                    padding: EdgeInsets.only(top: 30.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text("Saldo",
                            style:
                                TextStyle(fontSize: 17.0, color: Colors.white)),
                        Divider(color: Colors.blueAccent),
                        Text("$user.balance",
                            style:
                                TextStyle(fontSize: 30.0, color: Colors.white)),
                        Divider(color: Colors.blueAccent),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Divider(color: Colors.white),
          Padding(
            padding: EdgeInsets.only(left: 20.0, right: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("Recentes",
                    style: TextStyle(fontSize: 20.0, color: Colors.black)),
                FutureBuilder(
                    future: getuserStatement(user.userId),
                    builder: getstatements,
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  

  Future getuserStatement(int id) 
    return api.getUserExtract(id);
  

  Widget getstatements(BuildContext context, AsyncSnapshot snapshot) 
    return !snapshot.hasData
        ? Center(child: CircularProgressIndicator())
        : Container(
          height: 340,
          child: ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) 
              print(snapshot.data[index].title);
              return Card(
                elevation: 5,
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(top: 10.0, left: 10.0),
                      child: Row(
                        children: <Widget>[
                          Text(snapshot.data[index].title),
                          Expanded(
                            child: Align(
                              alignment: Alignment(0.90, 0.00),
                              child: Text(snapshot.data[index].date),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding:
                          EdgeInsets.only(top: 20.0, bottom: 10.0, left: 10.0),
                      child: Row(
                        children: <Widget>[
                          Text(snapshot.data[index].desc),
                          Expanded(
                            child: Align(
                              alignment: Alignment(0.90, 0.00),
                              child:
                                  Text(snapshot.data[index].value.toString()),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              );
            ,
          ),
        );
  

【问题讨论】:

Expanded 仅在它所在的或 Column 已被赋予固定高度时才有效。将Column 放在ListView 中意味着Column 可以有无限的高度,所以Expanded 不知道它可以扩展多大。 那么,我需要在 listView 中为我的列设置一个固定高度吗?然后在 ListView 之前添加 Expanded 小部件? 【参考方案1】:

解决方案:

在花了这么多时间之后,我找到了解决方案:

我看到在我的这部分代码中,我将另一列放在填充内:

Padding(
        padding: EdgeInsets.only(left: 20.0, right: 20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Recentes",
                style: TextStyle(fontSize: 20.0, color: Colors.black)),
            Expanded(
              child: FutureBuilder(
                future: getuserStatement(user.userId),
                builder: getstatements,
              ),
            ),
          ],
        ),
      ),

所以我所做的只是删除了 Column 并留下了 Text 小部件并将展开的小部件放在填充下方。

Padding(
        padding: EdgeInsets.only(left: 20.0, right: 20.0),
        child: Text("Recentes",
            style: TextStyle(fontSize: 20.0, color: Colors.black)),
      ),
      Expanded(
              child: FutureBuilder(
                future: getuserStatement(user.userId),
                builder: getstatements,
              ),
            ),

使用设备的最大空间创建了我的列表,因此我不需要使用 Container 或 sizedBox 设置高度。

在我看来,我认为这是因为我将一个列表放在一个已经在一个列中的 Column 中,所以该列表不知道她有多少空间

【讨论】:

此时,您可以完全删除Expanded。如果它不是 RowColumn 的子代,它什么也不做。

以上是关于listview.builder 底部溢出和灵活和扩展小部件的错误的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:我的 Listview.builder 消失在我的固定底部容器下

Flutter - ListView.builder:初始滚动位置

ListView.builder itemCount 未更新

Flutter 中 ListView.builder 中的反向列表

关注 ListView 的底部?扑

Flutter ListView解决底部或顶部留白问题