SingleChildScrollView 中的 PageView.builder 颤动

Question

我正在尝试在 SingleChildScrollView 中使用 PageView.builder 但我总是收到一个错误提示

RenderBox was not laid out: RenderRepaintBoundary#490ce relayoutBoundary=up15 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

这是部分代码

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
            child: PageView.builder(
          itemCount: 3,
          scrollDirection: Axis.horizontal,
          reverse: false,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(4.0)),
                ),
              ),
            );
          },
        )
.....

有什么我应该从代码中添加的吗？

Answer 1

如果您希望 PageView 小部件的子小部件可滚动，请尝试使用 SingleChildScrollView 小部件包装 itemBuilder 方法的根小部件并将其从当前位置移除。

所以代码应该是这样的：

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: PageView.builder(
          itemCount: 3,
          scrollDirection: Axis.horizontal,
          reverse: false,
          itemBuilder: (BuildContext context, int index) {
            return SingleChildScrollView( // Moving this widget down to this position is the only change in the code...
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 4.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                ),
              ),
            );
          },
        ),
.....

问题是 SingleChildScrollView 小部件采用无限高度，因为滚动功能和 PageView 小部件试图采用所有可用高度，因此它试图采用无限高度，我认为这就是导致问题的原因.