颤动：堆栈中的中心溢出图像

Question

我有一张图片，我想将它放在 Stack 小部件中，该小部件的尺寸小于初始图片。

我还需要将这张图片放在较小的小部件中。

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

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 - 我无法设置溢出小部件的大小 space，因此它也不起作用。

如果我增加图像的 scale 它只会使初始图像变小而不是增加图像的大小并且裁剪溢出 space。

我需要通过某种对齐方式使图像溢出并自动居中属性。

还没有找到这个问题的解决方案。

我不知道如何在 Flutter 中做到这一点，但使用 CSS 非常简单：

div {
  width: 100px;
  height: 100px;
  background: url('https://img.icons8.com/clouds/2x/sun.png') no-repeat;
  background-size: 200px 200px;
  background-position: center;
  border: 1px solid black;
  border-radius: 5px;
}

<div>

</div>

Answer 1

如果我理解正确的话，可以通过将容器居中并将 Image BoxFit 设置为 none 来实现与您 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),
        ),
      ),
    );
  }
}

颤动：堆栈中的中心溢出图像

Flutter: center overflowed image in Stack

widget

flutter

flutter-layout