Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/cocoa/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Image 颤振:调整使用ClipRect剪裁的图像的大小/放大比例_Image_Flutter - Fatal编程技术网

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'),
),
),
),
),
)

太好了,这正是我想要的。谢谢!