问题 SingleChildScrollView 与 PageView 颤动

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 子项具有非零 flex，但传入的高度约束是无界的。

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

RenderBox 没有布局：RenderFlex#4c442relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart'：失败的断言：第 1681 行 pos 12：'hasSize'

Answer 1

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

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

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

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

工作代码如下：

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

        ),

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

希望这能回答你的问题。