时间戳

首页 > 解决方案 > SingleChildScrollView 中的 PageView.builder 颤动

flutter - SingleChildScrollView 中的 PageView.builder 颤动

问题描述

我正在尝试在 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)),
                ),
              ),
            );
          },
        )
.....

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

标签： flutterwidgetscrollviewflutter-pageview

解决方案

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

所以代码会是这样的：

@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小部件试图采用所有可用高度，因此它试图采用无限高度，我认为这就是导致问题的原因。

推荐阅读