Flutter中ListView动画OpenContainer动画Flutter径向过渡OpenContainer

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

**	你可能需要
CSDN	网易云课堂教程
掘金	EDU学院教程
知乎	Flutter系列文章

本文章通过 OpenContainer 结合列表 ListView来实现页面的径向过渡动画，最终实现现的效果如下：

引入依赖：

  # Material motion 规范的预构建动画animations: ^1.1.1

整个页面通过ListView来构建：

import 'dart:ui';
import 'package:animations/animations.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class OpenContainerPage extends StatefulWidget {@override_FlashAnimationPageState createState() => _FlashAnimationPageState();
}class _FlashAnimationPageState extends State<OpenContainerPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("OpenContainer过渡"),),backgroundColor: Colors.grey[200],///列表body: ListView.builder(///构建每个列表的显示的WidgetitemBuilder: (BuildContext context, int index) {return buildOpenContainer(index);},itemCount: 10,),);}/// 列表中的每个条目的Widget/// [index] 列表条目对应的索引buildContentWidget(int index) {///手势事件点击跳转return GestureDetector(///条目显示的一张图片child: buildShowItemContainer(),onTap: () {///点击打开新的页面Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return Item2Page();}));});}/// lib/code23/main_data2336.dart/// 列表中的每个条目的Widget/// [index] 列表条目对应的索引buildOpenContainerItem(int index) {return OpenContainer(///将要打开的页面openBuilder:(BuildContext context, void Function({Object returnValue}) action) {return Item2Page();},///现在显示的页面closedBuilder: (BuildContext context, void Function() action) {///条目显示的一张图片return buildShowItemContainer();},);}... ...  ...
}

列表中显示的Item构建如下：

  Container buildShowItemContainer() {return Container(color: Colors.blueGrey,///边距设置margin: EdgeInsets.only(top: 8),child: Image.asset("assets/images/2.0x/banner4.webp",fit: BoxFit.fill,),);}

将要打开的页面构建如下：

class Item2Page extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _Item2PageState();}
}class _Item2PageState extends State<Item2Page> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(elevation: 0.0,title: Text("页面二"),),///页面二中的Herobody: InkWell(onTap: () {Navigator.of(context).pop(true);},child: Image.asset("assets/images/2.0x/banner1.webp",fit: BoxFit.fill,),),);}
}

详细属性配制如下：

  buildOpenContainer() {///容器转换路由return OpenContainer(///过渡的动画类型transitionType: ContainerTransitionType.fade,///过渡时间transitionDuration: Duration(milliseconds: 3000),///closedBuilder配置的Widget的背景色closedColor: Colors.white,///阴影高度closedElevation: 2,///边框样式closedShape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),///默认显示的WidgetclosedBuilder: (BuildContext context, void Function() action) {///条目显示的一张图片return buildShowItemContainer();},///点击打开的页面openBuilder:(BuildContext context, void Function({Object returnValue}) action) {return Item2Page();},///openBuilder配置的Widget的背景色openColor: Colors.blue,openElevation: 1.0,openShape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),///从第二个页面中返回时的回调///参数 value就是上一个页面回传的参数onClosed: (value) {print("onClosed $value");},);}

完结

Flutter中ListView动画OpenContainer动画Flutter径向过渡OpenContainer相关推荐

谈一谈Flutter中的共享元素动画Hero
如果你是一名安卓开发者,应该很熟悉共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动 ...
【译】Flutter中的花式背景动画
原文链接:https://medium.com/@felixblaschke/fancy-background-animations-in-flutter-4163d50f5c37 本文主要介绍如何使 ...
从零学习Fluter(四):Flutter中ListView组件系列详展
今天继续研究了一些Flutter,主要时关于ListVIew那一块的东西,有 SingleChildScrollView ListView GridView CustomScrollView 感觉Fl ...
Flutter中ListView加载图片数据的优化
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在使用ListView ...
Flutter中ListView顶部有空白
ListView头部有一段空白区域,是因为当ListView没有和AppBar一起使用时,头部会有一个padding,为了去掉padding,可以使用MediaQuery.removePadding ...
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等.默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要 ...
【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
Flutter中的点击、拖动和其它手势
Flutter中的点击.拖动和其它手势介绍 Pointers 手势手势消歧介绍本文档介绍了如何在Flutter中监听并响应手势(点击.拖动和缩放). Flutter中的手势系统有两个独立的层. ...
flutter中使用图标（含自制图标库方案）
flutter中使用图标(含自定义图标图) 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...

Flutter中ListView动画OpenContainer动画Flutter径向过渡OpenContainer

Flutter中ListView动画OpenContainer动画Flutter径向过渡OpenContainer相关推荐

最新文章

热门文章