Flutter动画页面滚动插件animated_page_view_scrolling的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter动画页面滚动插件animated_page_view_scrolling的使用

animated_page_view_scrolling 是一个用于 Flutter 的美化页面滚动包。

开始使用

要使用此包，请在 pubspec.yaml 文件中添加 animated_page_view_scrolling 作为依赖项。

使用方法

以下是一个简单的示例：

AnimatedPageViewScrolling(
    myModel: modelValue1,
    heightMainPageView: 400,
    heightItem: 320,
    viewportFraction: 0.80,
)

在你的项目根目录下创建一个 assets 文件夹，并在其中创建一个 images 文件夹，然后将你的图片放入该文件夹。

在 pubspec.yaml 中添加以下配置：

flutter:
  assets:
    - assets/images/

确保 assets/images 在项目根目录下，并且在 pubspec.yaml 中正确配置。

创建自定义模型：

class MyModel1 {
  String? image;

  MyModel1({this.image});
}

var modelValue1 = [
  MyModel1(
    image: 'mainp1.png',
  ),
  MyModel1(
    image: 'mainp2.png',
  ),
  MyModel1(
    image: 'mainp3.png',
  ),
];

完整示例代码

import 'package:animated_page_view_scrolling/animated_page_view_scrolling.dart';
import 'package:flutter/material.dart';

// 自定义模型
class MyModel1 {
  String? image;

  MyModel1({this.image});
}

// 模型数据
var modelValue1 = [
  MyModel1(
    image: 'mainp1.png',
  ),
  MyModel1(
    image: 'mainp2.png',
  ),
  MyModel1(
    image: 'mainp3.png',
  ),
];

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 应用程序入口
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Page View"),
      ),
      body: Center(
          child: AnimatedPageViewScrolling(
        myModel: modelValue1,
        heightMainPageView: 400,
        heightItem: 320,
        viewportFraction: 0.80,
      )),
    );
  }
}

更多关于Flutter动画页面滚动插件animated_page_view_scrolling的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画页面滚动插件animated_page_view_scrolling的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用animated_page_view_scrolling插件来实现动画页面滚动的代码示例。这个插件允许你在页面切换时添加平滑的滚动动画效果。

首先，你需要在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_page_view_scrolling: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Dart文件中，你可以这样使用AnimatedPageViewScrolling：

import 'package:flutter/material.dart';
import 'package:animated_page_view_scrolling/animated_page_view_scrolling.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Page View Scrolling Demo'),
        ),
        body: AnimatedPageViewScrolling(
          pageController: PageController(initialPage: 0),
          pageSnapping: true,
          reverse: false,
          crossAxisAlignment: PageViewCrossAxisAlignment.start,
          scrollPhysics: BouncingScrollPhysics(),
          children: <Widget>[
            _buildPage(Colors.red, 'Page 1'),
            _buildPage(Colors.green, 'Page 2'),
            _buildPage(Colors.blue, 'Page 3'),
          ],
          onPageChanged: (int index) {
            print('Page changed to: $index');
          },
        ),
      ),
    );
  }

  Widget _buildPage(Color color, String title) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 200,
            color: color,
          ),
          SizedBox(height: 20),
          Text(
            title,
            style: TextStyle(fontSize: 24),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  • AnimatedPageViewScrolling 是我们使用的主要组件，它提供了动画效果的页面滚动功能。
  • pageController 是一个PageController实例，用于控制页面的滚动。
  • pageSnapping 设置为true，表示页面在滚动结束时会自动对齐到最近的页面边界。
  • reverse 设置为false，表示滚动方向从左到右（如果你希望从右到左，可以设置为true）。
  • crossAxisAlignment 设置为PageViewCrossAxisAlignment.start，表示子页面在交叉轴（垂直方向）上的对齐方式。
  • scrollPhysics 设置为BouncingScrollPhysics()，使得页面在到达边界时会有反弹效果。
  • children 是一个包含页面的列表，每个页面都是一个简单的中心对齐的列，包含一个颜色的容器和一个文本标题。
  • onPageChanged 是一个回调函数，当页面改变时会被调用，并打印当前页面的索引。

这样，你就可以在Flutter应用中实现带有动画效果的页面滚动了。

回到顶部