AnimatedContainer：高度不带动画而改变

Question

我使用Animated容器对容器的高度进行动画处理，取决于homeSelected，officeSelected，currentPositionSelected的布尔值，但是高度在没有动画的情况下会发生变化。我认为每件事都摆放得很好，我不知道问题出在哪里。

AnimatedContainer(
                    width: sizeConfig.SizeConfig.safeBlockHorizontal * 26,
                    height: homeSelected
                        ? sizeConfig.SizeConfig.safeBlockHorizontal * 30
                        : sizeConfig.SizeConfig.safeBlockHorizontal * 26,
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black38,
                          blurRadius: 10.0,
                          // has the effect of softening the shadow
                          spreadRadius: 0.8,
                          // has the effect of extending the shadow
                          offset: Offset(
                            5.0, // horizontal, move right 10
                            6.0, // vertical, move down 10
                          ),
                        )
                      ],
                    ),
                    duration: Duration(seconds: 2),
                    curve: Curves.fastLinearToSlowEaseIn,
                    child: Material(
                      color: homeSelected ? Colors.lightBlue : Colors.white,
                      borderRadius: BorderRadius.circular(20.0),
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            homeSelected = true;
                            officeSelected = false;
                            currentPositionSelected = false;
                          });
                        },
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              child: ClipRRect(
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(20.0),
                                    topRight: Radius.circular(20.0)),
                                child: Image.asset(
                                  'assets/images/home_image.jpeg',
                                  fit: BoxFit.fill,
                                ),
                              ),
                              flex: 2,
                            ),
                            Expanded(
                              child: Center(
                                child: Text(
                                  "Domicile",
                                  style: TextStyle(
                                      color: homeSelected
                                          ? Colors.white
                                          : Colors.lightBlue,
                                      fontWeight: homeSelected
                                          ? FontWeight.w700
                                          : FontWeight.w500),
                                ),
                              ),
                              flex: 1,
                            ),
                          ],
                        ),
                      ),
                    ),
                  )

Answer 1

您的三个布尔值：homeSelected，officeSelected，currentPositionSelected似乎没有更新。我使用了高度的随机固定值，因为高度随您对自定义类'SizedWidget'的实现而有所不同。

确保您的AnimatedContainer是StatefulWidget的子级，在其中setState（）可以访问和管理其状态。

 onTap: () {
                    setState(() {

              homeSelected=!false;
              officeSelected=!true;
              currentPositionSelected=!true;
          },
      );
                  },

我对onTap（）的实现：^

下面的我的代码。

    class DetailView extends StatefulWidget {
  @override
  _DetailViewState createState() => _DetailViewState();
}

class _DetailViewState extends State<DetailView> {
  bool homeSelected=false;
  bool officeSelected=true;
  bool currentPositionSelected=true;

   @override
  Widget build(BuildContext context) {


    return Scaffold(
        backgroundColor: Colors.cyan,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.cyan,
        ),
        body:
        AnimatedContainer(
          width: 200,
          height: homeSelected?300:150,
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.black38,
                blurRadius: 10.0,
                // has the effect of softening the shadow
                spreadRadius: 0.8,
                // has the effect of extending the shadow
                offset: Offset(
                  5.0, // horizontal, move right 10
                  6.0, // vertical, move down 10
                ),
              )
            ],
          ),
          duration: Duration(seconds: 2),
          curve: Curves.fastLinearToSlowEaseIn,
          child: Material(
            color: homeSelected ? Colors.lightBlue : Colors.white,
            borderRadius: BorderRadius.circular(20.0),
            child: InkWell(
              onTap: () {
                setState(() {
                  homeSelected=!false;
                  officeSelected=!true;
                  currentPositionSelected=!true;
                });
              },
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(20.0)),
                      child: Image.asset('--Your Image here--',fit: BoxFit.fill,
                      ),
                    ),
                    flex: 2,
                  ),
                  Expanded(
                    child: Center(
                      child: Text(
                        "Domicile",
                        style: TextStyle(
                            color: homeSelected
                                ? Colors.white
                                : Colors.lightBlue,
                            fontWeight: homeSelected
                                ? FontWeight.w700
                                : FontWeight.w500),
                      ),
                    ),
                    flex: 1,
                  ),
                ],
              ),
            ),
          ),
        )