如何根据条件为小部件之间的变化设置动画？答案

【问题标题】：How to animate change between widgets that are depending on condition?如何根据条件为小部件之间的变化设置动画？
【发布时间】：2022-08-17 19:41:36
【问题描述】：

我想在 setState 调用后动画在两个小部件之间切换，具体取决于 scrollPosition，我不知道该怎么做。

这是我调用 setState 的滚动监听器

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollController.addListener(() {
        print(\'scrolling\');
        print(scrollController.position.pixels);
        if(scrollController.position.pixels == 0) {
          setState(() {
            carouselSliderVisible = true;
          });
        }
        else {
          setState(() {
            carouselSliderVisible = false;
          });
        }
      });
    });

这里是我想要动画变化的小部件

Column(
    children: [
       carouselSliderVisible 
           ? CarouselSlider(
                items: [
                     Text(\'blablabla\'),
                     Text(\'blabla\')
                ],
                options: CarouselOptions(
                      height: size.height * 0.2,
                      enableInfiniteScroll: false
                ),
             )
             : Text(\'Polecane\'),
             Expanded(
                child: ListViewBuilder(
                    scrollController: scrollController,

也许将它与可见性之类的东西一起使用会更好？

标签： flutter dart flutter-layout

【解决方案1】：

用这个：

AnimatedSwitcher(
          child: carouselSliderVisible 
          
          ? Container(
              key: UniqueKey(),
              height: 100.0,
              width: 100.0,
              color: Colors.red,
            )
          : Container(
              key: UniqueKey(),
              height: 100.0,
              width: 100.0,
              color: Colors.blue,
            ),
          duration: Duration(seconds: 2),
        ),

你想要动画的那部分代码不清楚，所以我使用简单的例子。

【讨论】：