网格上的颤动动画展开答案

【问题标题】：Flutter animation on grid expand网格上的颤动动画展开
【发布时间】：2019-07-25 05:45:21
【问题描述】：

我希望网格上的动画展开。起初网格仅显示 4 个项目，然后单击按钮网格显示所有项目，即超过 4 个（带有动画）。一排有4个项目。

bool click = false;
 return Container(
      width: double.infinity,
      child: GridView.builder(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
    itemBuilder: (BuildContext context, int index) {
      return GestureDetector(
        onTap: () {
          if (index % 3 == 0) {
            Navigator.of(context).push(SlideLeftRoute(
                widget: Search(
              "Restaurant",
              isSearchFromTextField: false,
              list: list,
            )));
          } else {
            Navigator.of(context)
                .push(SlideLeftRoute(widget: RestaurantDetail()));
          }
        },
        child: Container(
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: HexColor(widget._homeScopedModel.homePageModel
                      .category[index].color),
                ),
                child: SvgPicture.asset(
                  'assets/images/restaurant.svg',
                  width: 30,
                  height: 30,
                  color: CustomColor.white,
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Text(
                widget._homeScopedModel.homePageModel.category[index].name,
                style: TextStyle(
                  color: CustomColor.black,
                  fontSize: 12.0,
                  fontFamily: 'SFProDisplay',
                  fontWeight: FontWeight.w400,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      );
    },
    itemCount:
        click ? widget._homeScopedModel.homePageModel.category.length : 4,
      ),
    );


//on click image
new GestureDetector(
                          child: RotatedBox(
                            quarterTurns: click ? 2 : 0,
                            child: SvgPicture.asset(
                              'assets/images/icon_down.svg',
                              width: 15,
                              height: 15,
                              color: CustomColor.grey,
                            ),
                          ),
                          onTap: () {
                            click = !click;
                            setState(() {});
                          },
                        ),

单击图像时，网格视图将展开。我想在点击图像上向下滑动和向上滑动动画。我尝试了动画容器，但它对我不起作用。我发现动画只在扩展其他视图时，如下所示。 how to animate collapse elements in flutter

【问题讨论】：

你试过 SizeTransition 了吗？
你都尝试了什么？你遇到了什么问题？
@Sukhi 我希望当用户单击向下箭头时动画向下滑动，并且应该需要像第二张图片一样展开。当点击向上箭头时，向上滑动动画并转到第一张图片位置。
我得到了要求。但是，StackOverflow 不是免费的代码编写/编辑/增强服务，希望您先尝试解决自己的问题。请更新您的问题以显示您已经尝试过的内容，并在minimal, complete, and verifiable example 中显示您面临的具体问题。更多信息，请看how to ask一个好问题，并采取该站点的tour。
我同意@Sukhi 的观点，尝试展示您的尝试以及卡在哪里，以便社区能够理解并提出解决方案。

标签： flutter dart

【解决方案1】：

我理解你的问题。我认为你应该尝试使用expansionTile，expandable，还有更多类似的东西。无论您是否愿意，都可以使用有状态小部件中的动画创建自己的动画可扩展小部件

【讨论】：