当使用具有 width 属性的 AnimatedContainer 时，即使宽度为零，AnimatedContainer 内的文本也是可见的，为什么会发生这种情况？

Question

当使用带有 width 属性的 AnimatedContainer 时，即使宽度为零，AnimatedContainer 内的文本也是可见的。容器被隐藏，但文本未被隐藏。

这是代码

Obx(() {
                    // if ( menuBarController.isMenuVisible.value ) {

       return AnimatedContainer(
        // clipBehavior: Clip.hardEdge,
                        alignment: Alignment.bottomCenter,
                        // Animation curve
                        height:500,
                        width: menuBarController.isMenuVisible.value ? MediaQuery.of(context).size.width-80 : 0,

                        duration: const Duration(milliseconds: 300),
                        child: Container(height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width-80,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: CustomColors.primaryBackground,
                          

                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            // if ( menuBarController.isMenuVisible.value ) 
                            GestureDetector(onDoubleTap: () {
                          print("tapped");
                          Get.to(()=>const AboutPage());
                          menuBarController.toggleMenu();

                        },
                        child: Text("About"),)],),
                        )
                      )
                      
                      
                      ;}),

This the problem I am experiencingenter image description here 

在此处输入图像描述当我在 AnimatinContainer 内使用文本时，即使我将其宽度设置为零，它也会显示

Answer 1

使用

AnimatedOpacity

小部件来切换何时显示文本小部件。 您可以使用

Visibility

小部件，但它显示的初始文本与您的屏幕截图相同。所以，我认为 AnimatedOpacity 与 AnimatedContainer 配合使用效果更好。

AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          height: 500,
          width: _show ? MediaQuery.of(context).size.width - 80 : 0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            color: Colors.green,
          ),
          child: AnimatedOpacity(
            duration: const Duration(milliseconds: 300),
            opacity: _show ? 1 : 0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                  onDoubleTap: () {},
                  child: const Text("About"),
                )
              ],
            ),
          ), 
        ),