dart 如何在Flutter中创建一个可滚动的列，如果它不占用所有的空间，它会在某个地方扩展？

fnatzsnv 于 2023-01-15 发布在 Flutter

关注(0)|答案(1)|浏览(90)

我尝试创建一个滚动栏，如果窗口小部件没有填满，它会在屏幕底部显示。但是，如果填满了，它就会滚动。
首先，我尝试使用简单的Column和MainAxisSize.max以及Expand和空的Container，这两种方法在列溢出之前运行良好。

[...]

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    MyWidget(),
    MyWidget(),
    [...],
    MyWidget(),
    Expand(child: Container()),
    ElevatedButton()
  ],
)

然后我搜索了一下，发现推荐的使Column可滚动的解决方案是SingleChildScrollView。这使得我在列中的所有小部件都消失了（我仍然不确定为什么），直到我删除了Expand，虽然解决了一个问题，但引入了另一个问题。

[...]

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      MyWidget(),
      MyWidget(),
      [...],
      MyWidget(),
      // Expand(child: Container()),
      ElevatedButton()
    ],
  )
)

所以我的问题是，如何使Column既可滚动，又不需要所有的空间来展开，以便最后一个子列位于屏幕底部？

dart

来源：https://stackoverflow.com/questions/75120453/how-to-create-a-scrollable-column-in-flutter-that-if-it-doesnt-take-up-all-the

1条答案

按热度按时间

uurity8g1#

IntrinsicHeight太贵而无法使用，但在这种情况下，您别无选择。请尝试以下操作：

LayoutBuilder(builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: [
              Container(
                color: Colors.red,
                height: 400,
                width: double.infinity,
              ),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  width: double.infinity,
                ),
              ),
            ],
          ),
        ),
      ),          
    );
  })

在这个例子中，如果你设置了蓝色container的高度，你会看到scrollview的作品，如果你使用Expanded上，它采取了可用的大小.

赞(0）回复(0）举报 2023-01-15

我来回答

dart 如何在Flutter中创建一个可滚动的列，如果它不占用所有的空间，它会在某个地方扩展？

1条答案

相关问题

热门标签

最新问答