Image 颤振:调整使用ClipRect剪裁的图像的大小/放大比例
我有一个图像,我想加载,但只显示了一定的裁剪部分。我使用了以下示例: 我的(测试)小部件树如下所示:Image 颤振:调整使用ClipRect剪裁的图像的大小/放大比例,image,flutter,Image,Flutter,我有一个图像,我想加载,但只显示了一定的裁剪部分。我使用了以下示例: 我的(测试)小部件树如下所示: return Scaffold( body: SafeArea( child: SingleChildScrollView( child: Stack( children: <Widget>[ Text("Hello World"), Container( al
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Text("Hello World"),
Container(
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width,
child: ClipRect(
child: Container(
child: Align(
alignment: Alignment(-0.5, -0.2),
widthFactor: 0.6,
heightFactor: 0.5,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
)
),
返回脚手架(
正文:安全区(
子:SingleChildScrollView(
子:堆栈(
儿童:[
文本(“你好,世界”),
容器(
对齐:alignment.topLeft,
宽度:MediaQuery.of(context).size.width,
孩子:ClipRect(
子:容器(
子对象:对齐(
对齐:对齐(-0.5,-0.2),
宽度系数:0.6,
高度系数:0.5,
孩子:Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
)
),
Emulator(像素3C)输出如下所示:
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Text("Hello World"),
Container(
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width,
child: ClipRect(
child: Container(
child: Align(
alignment: Alignment(-0.5, -0.2),
widthFactor: 0.6,
heightFactor: 0.5,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
)
),
但是,我想放大裁剪后的图像以覆盖整个窗口的宽度,我不知道该怎么做。我已经尝试过将其包装在宽度设置为“最大宽度”的容器中,但这不会放大图像。有什么建议吗?或者有更好的方法
(我也不确定为什么图像仍然与模拟器顶部的凹口重叠?我假设SafeArea可以处理这个问题,但这很好。一次解决一个问题。)
谢谢
编辑:添加一个示例以更清楚地说明我想要什么(红色圆圈):
(请原谅我糟糕的MS绘画技能)只需将您的
ClipRect
放入FittedBox
小部件中即可
容器(
宽度:MediaQuery.of(context).size.width,
对齐:alignment.topLeft,
孩子:FittedBox(
fit:BoxFit.fill,
孩子:ClipRect(
子:容器(
子对象:对齐(
对齐:对齐(-0.5,-0.2),
宽度系数:0.6,
高度系数:0.5,
孩子:Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'),
),
),
),
),
)
太好了,这正是我想要的。谢谢!