0

我想为我的容器提供动画,我想将容器的大小从容器的低宽度和高度增加到它现在采用的默认大小。

    Container(
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter:ColorFilter.mode(Colors.pink, BlendMode.color),
                              image: AssetImage(
                                'lib/images/Alone.jpg',
                              ),
                            ),
                            borderRadius: BorderRadius.circular(10),
                            gradient: LinearGradient(
                                colors: <Color>[
                                  Colors.yellowAccent,
                                  Colors.blueAccent,
                                ]
                            )
                        ),
                        child: FlatButton(
                          onPressed: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=>Alone())
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(24.0),
                            child: Text(
                              'Alone',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                      ),
4

2 回答 2

0

使用 AnimatedContainer。有很多事情你可以做到这一点。 动画容器

于 2021-12-25T16:26:59.640 回答
0
 AnimatedContainer(
                  height: isIncreaseSize ? 300 : 200,
                  width: isIncreaseSize ? 300 : 200,
                  duration: Duration(milliseconds: 200),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter:ColorFilter.mode(Colors.pink, BlendMode.color),
                              image: AssetImage(
                                'lib/images/Alone.jpg',
                              ),
                            ),
                            borderRadius: BorderRadius.circular(10),
                            gradient: LinearGradient(
                                colors: <Color>[
                                  Colors.yellowAccent,
                                  Colors.blueAccent,
                                ]
                            )
                        ),
                        child: FlatButton(
                          onPressed: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=>Alone())
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(24.0),
                            child: Text(
                              'Alone',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                      )

你需要一个布尔值来改变大小,比如 isIncreaseSize。持续时间:持续时间(毫秒:200)动画持续时间。这一切

于 2021-12-25T16:33:40.333 回答