Flutter 颤振：堆栈中的中心溢出图像

我有一个图像，我想把它放在比初始图像小的堆栈小部件中

我还需要将这个图像放在小部件的中心

现在我找到了一种方法，它只允许在较小的父窗口小部件中设置溢出图像的大小

Container(
  width: 50.0,
  height: 50.0,
  child: Stack(
    children: [
      Positioned(
        width: 150.0,
        height: 150.0,
        child: Image.asset('assets/images/example.jpg'),
      )
    ]
  )
)

但在这种情况下，我必须通过手动设置

top

和

left

偏移来居中图像，因为在这种情况下任何对齐都不起作用

Container(
  width: 50.0,
  height: 50.0,
  child: Stack(
    children: [
      Positioned(
        width: 150.0,
        height: 150.0,
        child: Align(
          alignment: Alignment.center,
          child: Image.asset('assets/images/example.jpg'),
        )
      )
    ]
  )
)

如果我使用Positioned.fill，我就不能设置溢出小部件空间的大小，这样它就不能工作了

如果我增加图像的

比例

，它只会使初始图像变小，而不是增加图像的大小并裁剪溢出的空间

我需要通过一些对齐属性使图像溢出并自动居中

尚未找到此问题的解决方案

我不知道如何在Flatter中执行此操作，但使用CSS非常简单：

div{
宽度：100px；
高度：100px；
背景：url（'https://img.icons8.com/clouds/2x/sun.png")不重复;；
背景尺寸：200px 200px；
背景位置：中心；
边框：1px纯黑；
边界半径：5px；
}

---

如果我正确理解了您的意思，那么可以通过将容器居中并将图像框设置为“无”来实现与CSS相同的效果。请参阅下面的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Demo'),
      ),
      body: Center(
        child: Container(
          width: 100.0,
          height: 100.0,
          child: Image.network('https://img.icons8.com/clouds/2x/sun.png',
              fit: BoxFit.none),
        ),
      ),
    );
  }
}

---

谢谢

BoxFit.none

在这种情况下运行良好，但是如果您将

容器

放置在

堆栈

中并使用

定位

小部件，

容器

的大小（宽度和高度）不起作用，它只会扩展到父级大小。但仍然无法定义图像的大小来放大它。