颤动 – 如何使1/3的图像占据整个屏幕

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

到目前为止,我可以获得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占据整个屏幕的银行.

解决方法

这不是一个如何将图像数据融入全屏图像的问题吗？另外,如果您原始图像的三分之一的宽高比不适合全屏的宽高比,您想要发生什么？

例如,这会以全屏纵向模式显示(大致)横向图像的中心三分之一：

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

在对齐时：FractionalOffset.centerLeft和alignment：FractionalOffset.centerRight分别显示(大致)左右三分之一.