使带有扩展小部件的列具备滚动功能

Question

我想要创建一个可以无限延伸高度的列（因为使用了扩展小部件），但是SingleChildScrollView并不能满足需求。

new Scaffold(
    backgroundColor: Color.fromRGBO(245, 245, 245, 1.0),
    body: new Container(
      child: SingleChildScrollView(
        child: new Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            header,
            new Expanded(
              child: pageView,
            )
          ],
        )
      )
    ),
  )

错误信息：

执行布局时抛出以下断言： RenderFlex子项具有非零的flex值，但传入的高度约束未被限制。 当一个列位于不提供有限高度约束的父级中时，例如在垂直可滚动中，它将尝试沿着垂直轴缩小包装其子项。在子项上设置flex（例如使用Expanded）表示该子项将扩展以填充垂直方向上剩余的空间。这两个指令是相互排斥的。如果父级要收缩包装其子项，则子项不能同时扩展以适应其父级。

考虑将mainAxisSize设置为MainAxisSize.min，并对灵活子项使用FlexFit.loose适合（使用Flexible而不是Expanded）。这将允许灵活的子项将自身大小调整为小于它们本来被迫占据的无限剩余空间，然后将导致RenderFlex缩小包装子项，而不是扩展以适应父级提供的最大约束。

- user8741906

Answer 1

1. 问题

• 我想要一个无限高的列（由于扩展的小部件），使其可以滚动，但是SingleChildScrollView并不能胜任。

• 如果将高度设置为屏幕高度，则无法滚动，而我又不想设置特定的高度（不知道页面高度+不想留空白空间）。

• 如果在列中添加一个页面视图，则控制台会返回：RenderViewport不支持返回固有尺寸。

2. 演示

3. 替换SingleChildScrollView

使用以下方法替换：

child: SingleChildScrollView(  // need to be replaced
  child: new Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      header,
      new Expanded(
        child: pageView,
      )
    ],
  )
)

write this :

child: CustomScrollView( // replace by this
  slivers: <Widget>[
    header(context),
    pageView(context),
  ],
),

4. 使用SliverList和SizedBox进行包装，而不是Wrap Expanded

我不想设置特定的高度

那么使用SizedBox是必须的。由于屏幕必须可滚动，每个组件都必须有固定的高度。

这使得应用程序可以渲染多个另一个PageView或Header。

注意：通过使用SliverList包装内容，可以在水平和垂直方向上生成可滚动屏幕。

Widget pageView(BuildContext context) {
  final section = SliverList(
    delegate: SliverChildListDelegate(
      [
        SizedBox(
          height: 100,
          child: PageView(
            children: <Widget>[
              AddTextInput(),
              AddNoteSettings(),
            ],
          ),
        ),
      ],
    ),
  );
  return section;
}

Widget headerContent(BuildContext context) {
  final section = SliverList(
    delegate: SliverChildListDelegate(
      [
        NewsFeed(),
      ],
    ),
  );
  return section;
}

5. 完整可用的仓库

你可以查看这个仓库并在本地构建它。 Github

- ejabu

Answer 2

Column widget已经是一个无限高度的widget，您可以在Column内添加任何widget，并且高度将始终遵循子widget的最大高度。因此，您不需要再添加Expanded widget了。Expanded widget只能分配给固定大小的widget，例如具有固定高度/宽度的Container。

- aswin darma

Answer 3

试试这个：

new Scaffold(
backgroundColor: Color.fromRGBO(245, 245, 245, 1.0),
body: new Container(
  child: SingleChildScrollView(
    child: Sizedbox(
      height: MediaQuery.of(context).size.height // or something simular :)
      child: new Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          header,
          new Expanded(
            child: pageView,
          ),
        ],
      ),
    ),
  ),
),

），

- Emil Djupvik

---

它不会崩溃，但如果高度设置为屏幕高度，我无法滚动，而且我不想设置特定的高度（不知道页面高度+不想要空白空间）。 - user8741906