颤动图标作为溢出的背景

Question

我正在尝试根据此 link UI design 重新创建天气应用程序设计。但是我一直坚持创建在后台溢出的巨大图标。我尝试使用堆栈并添加一个非常大的图标小部件。但是，当尺寸改变时，图标会改变它的位置。所以它从中心移动。关于如何获得设计中的背景结果的任何想法？

编辑：

我尝试了下面的代码。但是，如果设备的屏幕尺寸发生变化，图标将会移动。有没有办法让这个在每个屏幕尺寸上看起来都一样？

Stack(
          children: [
            Positioned(
              left: -250,
              top: -100,
              child: Icon(
                Icons.ac_unit,
                size: 900,
                color: Colors.white.withOpacity(0.5),
              ),
            ),

这给了我下面的结果。

Answer 1

使用Stack即可。您是否使用 Positioned 或 Align 包裹 Icon 小部件，以控制其位置？

例如，您的小部件层次结构可能类似于：Stack > Align > Icon。

在 Align 小部件中，您可以指定它在堆栈中的对齐方式。值是 (x, y)，范围从 -1 到 +1，以 0 为中心。例如，您可以使用 alignment: Alignment(0, -0.5) 使其水平居中，50% 朝向垂直轴的顶部。

Answer 2

如果您将使用定位小部件，您实际上可以根据屏幕高度和宽度进行定位，然后在 FractionalTranslation 中变形以使其从给定尺寸居中，

让我们用简单的方法计算一下：

代码：

return Stack(
      children: [
        Positioned(
          left: MediaQuery.of(context).size.width * 0.35,
          top: MediaQuery.of(context).size.height * 0.4,
          child: FractionalTranslation(
              translation: const Offset(-0.5, -0.5),
              child: child()),
        )
      ],
    );

Answer 3

使用小部件：`OverflowBox`

Flutter documentation 将 OverflowBox 解释为：

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.

示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overflow Box',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Stack(children: [

          OverflowBox(
            // Specify the maxWidth and maxHeight and it works
            // regardless of orientation.
            maxWidth: 800,
            maxHeight: 800,
            child: Icon(
              Icons.ac_unit,
              size: 800,
              color: Colors.black.withAlpha(80),
            ),
          ),
        ]),
      ),
    );
  }
}

实际代码图片：

Answer 4

我喜欢@Tor-Martin Holen 建议的答案，但我会将 maxWidth 和 size 属性调整为 MediaQuery.of(context).size.width 适应不同的屏幕。

颤动图标作为溢出的背景

flutter icon as background with overflow

flutter

flutter-layout

使用小部件：`OverflowBox`

示例：

实际代码图片：

颤动图标作为溢出的背景

flutter icon as background with overflow

flutter

flutter-layout

使用小部件：OverflowBox

示例：

实际代码图片：

使用小部件：`OverflowBox`