如何以流畅的动画从页面视图中删除页面?

2024-03-18

我对颤振动画还是新手,我正在尝试制作一个 PageView,当您用动画按下它时它会被关闭。

我有这个代码:

class Carroussel extends StatefulWidget {
  @override
  _CarrousselState createState() => new _CarrousselState();
}

class _CarrousselState extends State<Carroussel> {
  PageController controller;
  int currentpage = 0;

  @override
  initState() {
    super.initState();
    controller = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          child: new PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  currentpage = value;
                });
              },
              controller: controller,
              itemBuilder: (context, index) => builder(index)),
        ),
      ),
    );
  }

  builder(int index) {
    return new AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (pageController.position.haveDimensions) {
          value = controller.page - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        }

        return new Center(
          child: new SizedBox(
            height: Curves.easeOut.transform(value) * 300,
            width: Curves.easeOut.transform(value) * 250,
            child: child,
          ),
        );
      },
      child: new Container(
        margin: const EdgeInsets.all(8.0),
        color: index % 2 == 0 ? Colors.blue : Colors.red,
      ),
    );
  }
}

上述代码的作者:https://stackoverflow.com/a/47357960/1194779 https://stackoverflow.com/a/47357960/1194779

That Produces the following: enter image description here

现在,我需要在按下卡片后以动画方式将其关闭。

我尝试实现将卡片向下滑动的 SlideTransition。但我无法使 PageView 为刚刚删除的卡片的填充空白空间设置动画。


您可以使用Dismissible在您的小部件上启用滑动手势。不过,当与 PageView 一起使用时,Dismissible 会产生可能不受欢迎的卡顿。

class Carousel extends StatefulWidget {
  @override
  _CarouselState createState() => _CarouselState();
}

class _CarouselState extends State<Carousel>{
  late PageController controller;
  int currentPage = 0;
  List<String> listItem = ['Page 1', 'Page 2', 'Page 3', 'Page 4'];

  @override
  initState() {
    super.initState();
    controller = PageController(
      initialPage: currentPage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: PageView.builder(
            itemCount: listItem.length,
            onPageChanged: (value) {
              setState(() {
                currentPage = value;
              });
            },
            controller: controller,
            itemBuilder: (BuildContext context, int index) =>
                pageBuilder(index),
          ),
        ),
      ),
    );
  }

  pageBuilder(int index) {
    var dismissibleKey = GlobalKey<State>();
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (controller.position.haveDimensions) {
          value = controller.page! - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        }

        return Center(
          child: SizedBox(
            height: Curves.easeOut.transform(value) * 300,
            width: Curves.easeOut.transform(value) * 250,
            child: child,
          ),
        );
      },
      child: Dismissible(
        key: dismissibleKey,
        direction: DismissDirection.down,
        onDismissed: (DismissDirection direction) {
          /// Remove item from List
          setState(() {
            listItem.removeAt(index);
          });
        },
        child: InkWell(
          onLongPress: () {
            debugPrint('Delete! $index');
            setState(() {
              listItem.removeAt(index);
            });
          },
          onTap: () {
            controller.animateToPage(index,
                duration: Duration(milliseconds: 500), curve: Curves.ease);
          },
          child: Container(
            margin: const EdgeInsets.all(8.0),
            // color: index % 2 == 0 ? Colors.blue : Colors.red,
            color: Colors.lightBlueAccent,
            child: Center(
              child: Text('${listItem[index]}'),
            ),
          ),
        ),
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何以流畅的动画从页面视图中删除页面? 的相关文章

  • 颤振预览图标在代码完成时显示损坏的资源图像

    当我第一次安装 flutter 和 dart 扩展时 图标预览工作正常 但是当我在没有 wi fi 的环境中开发时 图标预览损坏了 不确定这是问题所在 我尝试重新安装所有与 flutter 和 dart 相关的扩展 但问题仍然存在 如果有任
  • Android Gradle 问题 - Flutter / Dart

    我的 Gradle 同步有问题 我使用 IntelliJ 和 Android Studio 构建 Flutter Dart 应用程序 我添加了 2 个新的依赖项 现在 Gradle 出现了问题 在 Android Studio 中一切正常
  • 如何从 BottomNavigationBar 中删除图标?

    我只需要 BottomNavigationBarItem 中的标签 但我找不到删除它们的方法 您可以隐藏标签showSelectedLabels and showUnselectedLabels设置为 false 但图标没有等效项 构造函数
  • 如何在flutter中绕过SSL证书验证?

    如何在flutter中绕过SSL证书验证 错误 握手异常 客户端中的握手错误 操作系统错误 CERTIFICATE VERIFY FAILED 自签名证书 handshake cc 345 您需要配置 HttpService 以使用自签名
  • 已发布的 Flutter 应用程序在启动时崩溃

    编辑 此问题的解决方案是将您的 flutter 版本升级到较新的 dev 版本 then 1 7 0 您还可以上传单独的 APK 版本 但我个人不喜欢这个选项 请确保您没有从 flutter github 开发存储库下载 错误的构建 因为那
  • 如何在 flutter 中仅显示列表中的 5 项

    我想在 flutter 中显示一个列表 我正在使用listView 问题是我只想显示 5 个项目 我的意思是当用户向下滚动时我想从开始索引中删除并将另一个小部件添加到包含我的小部件的列表的末尾 但是当我这样做时ScrollView 不会停留
  • 配置根项目“firebase_auth”时出现问题

    my error 我无法构建 apk 发布文件 我完成了应用程序一段时间 没有出现错误 几天后 我在构建应用程序时收到此错误 请告诉我如何摆脱它 我尝试了 4 个小时 什么也没得到 FAILURE Build failed with an
  • Flutter http请求上传mp3文件

    我使用这个 api 上传 mp3 文件 使用这种方法 Future
  • Flutter:将字符串转换为 Map

    我正在使用 SQFlite 在本地存储数据 我有一个表 其中有一个名为 json 的字段 该字段的类型为 TEXT 并存储转换为字符串的 json 例如 name Eduardo Age 23 性别男 到目前为止 一切正常 但随后我需要从数
  • Flutter如何从flutterWebviewPlugin.evalJavascript(addEventListener)检索javascript值

    我有一个 flutter 代码片段 它从我的 iframe 页面监听 postMessage flutter webview plugin 0 3 9 1 flutterWebviewPlugin onStateChanged listen
  • 滑动返回手势颤动

    如何在颤振中实现从左侧滑动返回的手势 不确定它是否已经在 iOS 上自动实现 但我也希望在 Android 上也能实现 因为事情正在变得基于手势 Use CupertinoPageRoute使其在 Android 上运行 import pa
  • library_private_types_in_public_api 和 StatefulWidget

    将 linter 升级到新版本后 flutter lints 2 0 1 在我的 pubspec 中 linter 启用此规则 公共 API 中的库私有类型 https dart dev tools linter rules library
  • 查找文本的确切边界

    我需要知道一段文本的确切边界 相当于获取文本边界 https developer android com reference android graphics Paint html对于安卓 我意识到这在某种程度上与 Flutter 的设计背
  • 如何在flutter中的命名路由中传递多个参数

    我正在尝试将多个参数传递给命名路由 我尝试了很多事情 但到目前为止还没有成功 谁能告诉我如何实现这一目标 路线 dart import package flutter cupertino dart import package flutte
  • 如何在没有 firebase 的情况下在 flutter 中显示推送通知?

    在我的 flutter 应用程序中 我必须在没有 firebase 的情况下显示推送通知 我的服务器会在点击特定 API 后向我发送一条消息 并且我希望将该消息显示为推送通知 你能告诉我一种方法如何在颤振中做到这一点吗 您可以使用本地通知插
  • 使用 Firestore 和 Flutter 填充数据表(使用 StreamBuilder)

    如何使用 StreamBuilder 填充数据表 下面是我的代码 new StreamBuilder stream widget returnStreamWithActiveKeysOnly builder BuildContext con
  • Flutter- GestureDetector 检测水平和垂直拖动的方向

    我在用GestureDetector并没有找到任何onXYZ告诉您拖动方向的事件 你试过了吗onPanUpdate details 方法 以下是您可以如何做到这一点 GestureDetector onPanUpdate details i
  • Flutter 中声明式编程和命令式编程有什么区别?

    最近 我正在寻找一种方法来增强 Flutter 应用程序中屏幕之间的导航 我发现了新的编程概念 陈述性的 and 至关重要的编程 我需要了解更多关于陈述性的 and 至关重要的范例以及 Flutter 中的示例 声明式路由意味着您的应用程序
  • 如何在 Flutter 中制作可复制的 Text Widget?

    当长标签打开时Text widget https docs flutter io flutter widgets Text class html 出现一个带有 复制 的工具提示 单击 复制 时 文本内容应复制到系统剪贴板 以下将在长按时复制
  • Flutter 中 Android RecyclerView.SCROLL STATE IDLE 的等价物是什么

    Android 给出的滚动状态如下RecyclerView SCROLL STATE IDLE它告诉用户何时停止滚动 我找不到任何选择在颤动中Pageview or ListView滚动监听器 我的问题 我需要检测 PageView 中的向

随机推荐