在 Flutter 中使屏幕的一部分可滚动

Question

我只想让我的屏幕的一部分可滚动。 当我的 ListView 中的项目数超过 4 或 5 时，我无法在此列表视图下方放置任何小部件。 我不确定是否有办法包装列表视图的所有内容以使其可滚动。

  ListView(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    children: _getListings(businessListing),
  ),

这是我的 ListView，这是 UI 的外观

问题是当 RadioTile 的数量超过 8 时； textField 和 Button 被推出屏幕。 我想知道使整个屏幕可滚动是否好？ 或者只制作包含 RadioTiles 可滚动的屏幕的一部分？

谢谢，

Answer 1

有几点需要考虑：

1. 如果您计划在RadioTiles下方有更多字段以及 Google Listing URL 和 Save 按钮，那么保持整个屏幕可滚动可能是一个不错的选择。

2. 另一方面，如果它只是RadioTiles下方的两件事，那么最好只保留RadioTile列表可滚动。 这样，用户无需滚动即可始终访问TextField和 Save 按钮。

3. 此外，您可以根据字段的优先级决定滚动。 如果TextField和 Save 按钮具有更高的优先级，那么最好让它们始终在屏幕上可见。

要仅使屏幕的一部分可滚动，您可以将ListView包装在具有固定高度的Container ，以便它仅在这些范围内滚动。

您还需要将physics属性更改为AlwaysScrollableScrollPhysics() 。

例子 -

Container(
  height: 300.0 //Your custom height
  child: ListView(
    shrinkWrap: true,
    physics: AlwaysScrollableScrollPhysics(),
    children: _getListings(businessListing),
  ),
)

Answer 2

如果您只想保留屏幕的一部分可滚动但保留可变高度的底部元素，要完成buggycoder 答案，您可以将ListView嵌入到Expanded的Column ，如下所示：

Column(
    children: [
      Expanded(
        child: ListView(
           children: _getListings(businessListing),
        ),
      ),
      Container(
        child: Text('This element must stay at the bottom'),
      ),
    ],
  );

你在做什么基本上是告诉你的Column它有 2 个（或更多）元素，其中每个元素通常占用它需要的空间，除了Expanded元素的元素并且将占用Column中的“最大空间”。