我想要剪切一张图片并在多个屏幕上显示。我希望图片的三分之一占据整个屏幕。
到目前为止,我可以让 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 占据整个屏幕而画一个银行。
最佳答案
这不是更多的问题是如何将图像数据适合全屏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
分别显示(大致)左三分之一和右三分之一。
https://stackoverflow.com/questions/42639192/