如何让图片的1/3占据全屏

Question

我有一个图像想要剪切并在多个屏幕上显示。我希望图像的三分之一占据整个屏幕。

到目前为止，我可以使用以下命令将 1/3 的图像占据 1/3 的屏幕：

 Widget buildBGImage(String imageName) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all()),
      constraints: new BoxConstraints.expand(),
  child: new SizedBox.expand(
      child: new ClipRect(
          clipper: new WidthClipper(currentPage),
          child: new Image.asset(
              "assets/images/$imageName",
              fit: ImageFit.fill)
      )
  ),
);

}

  class WidthClipper extends CustomClipper<Rect> {
  int section;

  WidthClipper(this.section);

  @override
  Rect getClip(Size size) {
    return new Rect.fromLTWH(
        size.width * (section / 3), 0.0, size.width / 3, size.height);
  }

  @override
  bool shouldReclip(WidthClipper oldClipper) => true;
}

但我正在画一个关于如何使 1/3 占据整个屏幕的银行。

Answer 1

这难道不是一个如何将图像数据适配到全屏的问题吗Image？另外，如果原始图像三分之一的宽高比不适合全屏的宽高比，您希望发生什么？

例如，在全屏纵向模式下（大致）显示横向图像的中心三分之一：

new Image.network(
    "https://upload.wikimedia.org/wikipedia/commons/5/5a/Monument_Valley_2.jpg",
    fit: ImageFit.fitHeight,
    alignment: FractionalOffset.center,
)

而alignment: FractionalOffset.centerLeft和alignment: FractionalOffset.centerRight分别（大致）显示左三分之一和右三分之一。