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

Posted

技术标签:

【中文标题】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'),
      )
    ]
  )
)

但在这种情况下,我必须通过手动设置 topleft 偏移来使图像居中,因为在这种情况下任何对齐都不起作用。

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 在这种情况下工作得很好,但如果你将 ContainerPositioned 小部件放在 Stack 中,Container 的大小(宽度和高度)不起作用,它只是扩展到父级的大小。并且仍然无法定义图像的大小来放大它。

以上是关于Flutter:堆栈中的中心溢出图像的主要内容,如果未能解决你的问题,请参考以下文章

将长文本包装到容器中,导致溢出 Flutter

未处理的异常:堆栈溢出,Flutter GetXController 正在初始化 2000 次

Flutter 未处理的异常:热重载后 cloud_firestore 上的堆栈溢出

Flutter – 连续两个文本,左边一个优雅地溢出

【Flutter】图片、内容、滚动空间溢出调整

Flutter Web:底部溢出问题