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