使用展开的小部件使列可滚动

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,
            )
          ],
        )
      )
    ),
  )

错误消息：

在performLayout（）期间引发了以下断言： RenderFlex子级的flex为非零值，但传入的高度限制是不受限制的。 当列位于不提供有限高度限制的父级中时，例如 在垂直滚动条中，它将尝试沿垂直轴收缩包装其子级。设置一个 子项上的flex（例如，使用Expanded）表示该子项将扩展以填充剩余的子项 垂直方向上的空间。 这两个指令是互斥的。如果父母要包裹孩子，孩子 无法同时扩展以适合其父级。 考虑将mainAxisSize设置为MainAxisSize.min并使用FlexFit.loose适合弹性 子级（使用“灵活”而不是“扩展”）。这将允许灵活的孩子调整大小 自身的体积小于否则将被迫占据的无限剩余空间，并且 然后将导致RenderFlex收缩包装子项，而不是扩展以适合最大 父母提供的约束条件。

Answer 1

尝试一下：

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,
          ),
        ],
      ),
    ),
  ),
),

），

Answer 2

Column小部件已经是一个无限高度的小部件，您可以在Column中随意添加任何小部件，并且高度将始终跟随子代的最大高度。因此，您不再需要添加扩展小部件。扩展的窗口小部件只能分配给固定大小的窗口小部件，例如具有固定高度/宽度的容器。

Answer 3

1。问题

• 我想使无限高的列（由于扩展的小部件）可滚动，但是SingleChildScrollView不能完成工作。

• 它不会崩溃，但是如果将高度设置为屏幕高度，我将无法滚动，并且我不想设置特定的高度（不知道页面高度+不需要空的空间）

  < / li>

• 如果我在列控制台中添加综合浏览量，则会返回：RenderViewport不支持返回固有尺寸

2。演示

3。替换SingleChildScrollView

而不是：

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

这样写：

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

4。而不是扩展包装，而不是包装SliverList和SizedBox

  

我不想设置特定的高度

然后必须具有SizedBox。由于屏幕必须是可滚动的，因此其每个组件必须具有固定的高度。

这使应用程序能够呈现多个其他PageView或页眉。

注意：按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