首页 > 解决方案 > 在颤动中重复相邻的图像

问题描述

所以这是我第一个真正的颤振项目,我不知道如何解决这个问题......

我基本上是想在我的 AppBar 上无限次地“放大”或“重复”一个图标。但我找不到真正做到这一点的方法......

这是我的意思的图片:

https://i.stack.imgur.com/aKOVj.png

这是我的 AppBar 代码:

            child: Stack(
              children: <Widget>[
                AppBar(
                  backgroundColor: Colors.lightGreen,
                  leading: IconButton(
                    alignment: Alignment(1.2, 1),
                    icon: Icon(Icons.close, color: Colors.white,),
                  ),
                ),
                Positioned(
                  right: 150,
                  left: -180,
                  child: Container(
                  ),
                ),
                Positioned(
                  height: 30,
                  top: 0,
                  right: 0,
                  child: RotationTransition(
                    turns: AlwaysStoppedAnimation(-30 / 360),
                    child: Image.asset('assets/writer-icon.png',
                      repeat: ImageRepeat.repeat,
                      alignment: const Alignment(2.5, 3.5),
                    )
                  ),
                ),
                Positioned(
                  height: 30,
                  top: 20,
                  right: 35,
                  child: RotationTransition(
                      turns: AlwaysStoppedAnimation(-30 / 360),
                      child: Image.asset('assets/writer-icon.png',
                        repeat: ImageRepeat.repeat,
                        alignment: const Alignment(2.5, 3.5),
                      )
                  ),
                ),
              ],
            ),

感谢你的帮助。

标签: androidiosxcodeflutterdart

解决方案


除了使用带有定位元素的 Stack 之外,更简单的 qnd 更简单的解决方案是使用 appBar 的 flexibleSpace 属性来添加背景图像。您将需要您的设计师根据需要创建背景图像。

flexibleSpace: Image( image: AssetImage('assets/images/appbar_bg.png'), fit: BoxFit.cover, ),

推荐阅读