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

Posted 2023-02-23

【中文标题】Flutter：堆栈中的中心溢出图像

【英文标题】：Flutter: center overflowed image in Stack

【发布时间】：2021-03-11 05:07:12

【问题描述】：

我有一张图片，我想将它放在尺寸小于初始图片的 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 - 我不能设置溢出的小部件空间的大小，所以它也不起作用。

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

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

目前还没有找到解决此问题的方法。

我不知道如何在 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>

【参考方案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),
        ),
      ),
    );
  

【讨论】：

谢谢！ BoxFit.none 在这种情况下工作得很好，但如果你将 Container 和 Positioned 小部件放在 Stack 中，Container 的大小（宽度和高度）不起作用，它只是扩展到父级的大小。并且仍然无法定义图像的大小来放大它。