flutter - 问题 SingleChildScrollView 与 PageView flutter

Question

我想在我的页面中添加 SingleChildScrollView 但我有 PageView。

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new IneatAppBarPollWidget()
          .getAppBar('Blackblox', 'assets/img/logo_ineat.png', cand),
      body: new Center(
        child: SingleChildScrollView(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Expanded(
                child: new Container(
                  child: new FutureBuilder<List<PollQuestionsDto>>(
                      future: _future,
                      // ignore: missing_return
                      builder: (context, snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.none:
                            return Text('Failed connection API');
                          case ConnectionState.waiting:
                            return new Text('Wait...');
                          case ConnectionState.done:
                            if (snapshot.hasData) {
                              if (snapshot.data != null) {
                                return PageView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, index) {
                                    print(this.responses);
                                    return PollListViewItem(
                                      entitled: 
                                      snapshot.data[index].entitled,
                                      answers: 
                                      snapshot.data[index].answers,
                                      currentAnswer: 
                                      this.responses[index],
                                      onSelect: (Answer answer) {
                                        this.responses[index] = answer;
                                      },
                                    );
                                  },
                                );
                              }
                            }
                            break;
                          case ConnectionState.active:
                        }
                      }),
                ),
              ),
              new ProgressBar(),
              new Container(
                margin: EdgeInsets.only(right: 10.0),
                child: new RaisedButton.icon(
                  onPressed: () async {
                    //await Poll().submitPoll(answers: answers);
                    setState(() {
                      Navigator.pushReplacement(context,
                          MaterialPageRoute(builder: (context) => 
                          PollPage()));
                    });
                  },
                  label: Text('Suivant'),
                  icon: Icon(Icons.navigate_next),
                ),
                alignment: Alignment.bottomRight,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当我添加这个时，我有这个错误:

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

当一列位于不提供有限高度约束的父列中时，例如，如果它在垂直可滚动中，它将尝试沿垂直轴收缩包裹其子项。对子项设置 flex(例如使用 Expanded)表示子项要扩展以填充垂直方向上的剩余空间。
这两个指令是互斥的。如果父级要收缩包裹其子级，则子级不能同时展开以适合其父级。
考虑将 mainAxisSize 设置为 MainAxisSize.min 并为灵活的 child 使用 FlexFit.loose 拟合(使用灵活而不是扩展)。这将允许灵活的 child 将自己的大小调整为小于他们将被迫占用的无限剩余空间，然后将导致 RenderFlex 收缩包裹 child 而不是扩展以适应 parent 提供的最大约束。

RenderBox was not laid out: RenderFlex#4c442 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1681 pos 12: 'hasSize'

Answer 1

我用示例数据重新创建了您的案例。以下是我修复的问题:

内部使用的列SingleChildScrollView如果我们不设置 mainAxisSize，默认情况下会扩展以填充垂直空间为了它。所以在这里，您需要添加 mainAxisSize: MainAxisSize.min,这告诉列只占用最小的空间。

要在 Column 内显示的子项被包裹在 Expanded 中这再次为其子项占用默认空间。在这里，而不是 Expanded , 使用 Flexible它占用了适用于其子项的空间。

用于显示来自 future builder 的数据的容器如果未提供 height，则再次扩展到整个屏幕.所以只需提供一个自定义 height到容器。

工作代码如下:

body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Flexible(
                  child: Container(
                    height: 200,
                    child: FutureBuilder<Post>(
                      future: post,
                      builder: (context, snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.none:
                            return Text('Failed connection API');
                          case ConnectionState.waiting:
                            return new Text('Wait...');
                          case ConnectionState.done:
                            if (snapshot.hasData) {
                              if (snapshot.data != null) {
                                return PageView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: 5,
                                  itemBuilder: (BuildContext context, index) {
                                    return Card(
                                      child: Text('test'),
                                    );
                                  },
                                );
                              }
                            }
                            break;
                          case ConnectionState.active:
                        }

                        // By default, show a loading spinner.
                        return CircularProgressIndicator();
                      },
                    ),
                  )
                ),
                Container(
                  margin: EdgeInsets.only(right: 10.0),
                  child: new RaisedButton.icon(
                    onPressed: () {},
                    label: Text('Suivant'),
                    icon: Icon(Icons.navigate_next),
                ),
                  alignment: Alignment.bottomRight,
                )
              ],
            ),
          )

        ),

根据我使用的示例数据，我能够看到以下结果，并且能够水平滚动以正确查看数据。

希望这能回答你的问题。