网格上的颤振动画扩展

时间:2019-07-25 05:45:21

标签: flutter dart

我想扩展网格上的动画。最初,网格仅显示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(() {});
                          },
                        ),

Before grid expand

After grid Expand

在单击图像时,网格视图将展开。我要在点击图像上向下滑动动画并向上滑动。我尝试了“动画容器”,但对我不起作用。我发现动画仅在展开如下所示的其他视图时出现。 how to animate collapse elements in flutter

0 个答案:

没有答案