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'),
)
]
)
)
但在这种情况下,我必须通过手动设置 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
的大小(宽度和高度)不起作用,它只是扩展到父级的大小。并且仍然无法定义图像的大小来放大它。以上是关于Flutter:堆栈中的中心溢出图像的主要内容,如果未能解决你的问题,请参考以下文章
未处理的异常:堆栈溢出,Flutter GetXController 正在初始化 2000 次