Flutter SingleChildScrollView 中的 CustomPaint 未顯示

Question

我有一些像這樣的 flutter 代碼：

class ImagePage extends StatefulWidget {
  final Class clazz;

  ImagePage(this.clazz);

  @override
  _ImagesPageState createState() => _ImagesPageState();
}

class _ImagesPageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: AppBar(
        title: Text(widget.clazz.name),
      ),
      body: SingleChildScrollView(
          child: CustomPaint(
        painter: _TalentPainter([
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
        ]),
      )),
    );
  }
}

class _TalentPainter extends CustomPainter {
  Paint _paint;
  List<ui.Image> _images = <ui.Image>[];

  _TalentPainter(List<String> _imagePaths) {
    this._paint = Paint()..isAntiAlias = true;
    _imagePaths.forEach((path) {
      getImage(path).then((image) {
        _images.add(image);
      });
    });
  }

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < _images.length; i++) {
      ui.Image image = _images.elementAt(i);
      canvas.drawImage(
          image, Offset(image.width.toDouble(), image.height * i.toDouble()), _paint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  Future<ui.Image> getImage(String image) async {
    ByteData data = await rootBundle.load("assets/images/class_icon/$image");
    Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }
}

我想自定義一個小部件來顯示一些圖像和其他東西，它的內容將 go 超出屏幕，我希望它滾動，現在我已經完成了上面的一些工作，我用 SingleChildScrollView 扭曲 CustomPaint 但圖像都消失了，我不知道為什么，請幫助我，英語不是我的第一語言，所以請原諒任何錯誤，謝謝

Answer 1

當您遇到此類問題時，您需要隔離錯誤。 為此，請嘗試制作最簡單的工作功能示例。

在這種情況下，簡單的示例是_TalentPainter class，只有一個圖像，沒有SingleChildScrollView包裝。

_TalentPainter不起作用，因為您在構造中有 Future 調用，並且在調用 paint 方法的那一刻， _images是空的。

Answer 2

由於 SingleChildScrollView “隱藏”了孩子的上下文布局，因此繪畫不起作用。 所以你需要定義 CustomPaint 的大小。 LayoutBuilder 將有助於獲取上下文的約束。