如何使图标停留在容器颤动的边缘答案

【问题标题】：How to make an icon rest on the edge of container flutter如何使图标停留在容器颤动的边缘
【发布时间】：2021-11-07 07:33:51
【问题描述】：

如何让图标停留在容器底部，就像图片中一样。这样即使我滚动页面并且容器移动。图标在该特定位置随它一起移动。此页面中的图标是空的配置文件图标，位于带有 exe 图像的容器上。我不希望我的容器有图像。

容器的彩色图像和圆形图标。

容器和图标的图像，即使在滚动时也是如此。

注意。我不希望容器成为应用栏。只是应用栏下方的一个容器。我只是展示这张照片，所以你可以看到我在说什么。

【问题讨论】：

标签： android ios flutter dart flutter-layout

【解决方案1】：

你试过了吗

Align(
                  alignment: Alignment.topCenter,)

【讨论】：

【解决方案2】：

你想要这样吗：

SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              height: 300,
              color: Colors.cyan[900],
            ),
            Stack(
              clipBehavior: Clip.none,
              alignment: AlignmentDirectional.topCenter,
              children: [
                Container(
                  width: double.infinity,
                  color: Colors.grey[900],
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(
                        height: 150, // +50 below circle Container
                      ),
                      const Text(
                        'Happiness',
                        style: TextStyle(color: Colors.white, fontSize: 32),
                      ),
                      const SizedBox(
                        height: 30,
                      ),
                      Container(
                        height: 200,
                        width: 300,
                        color: Colors.amber[900],
                      ),
                      const SizedBox(
                        height: 30,
                      ),
                      Container(
                        height: 200,
                        width: 300,
                        color: Colors.red[900],
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: -100,
                  child: Container(
                    height: 200,
                    width: 200,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      image: DecorationImage(
                          image: AssetImage(
                        'assets/images/cyanide.png',
                      )),
                      color: Colors.deepPurple,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),

【讨论】：

【解决方案3】：

可能你需要的是使用 CustomScrollView 和 SilverAppBar with bottom:

这是参考：example

加变换

【讨论】：