Flutter页面控制器监听插件page_controller_listenable的使用

Flutter 页面控制器监听插件 PageControllerListenable 的使用

PageControllerListenable 是一个包裹在 PageController 周围的可监听对象。它扩展了 ValueListenable<double>，可以快速传递给动画，而类型检查不会因 PageController 而失败。

示例

import 'package:flutter/material.dart';

class ExampleWidgetState extends StatefulWidget {
  [@override](/user/override)
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidgetState> {
  late PageController _pageController;
  late PageControllerListenable _pageControllerListenable;

  [@override](/user/override)
  void initState() {
    // 初始化 PageController
    _pageController = PageController();
    // 创建 PageControllerListenable
    _pageControllerListenable = PageControllerListenable(_pageController);
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    _pageControllerListenable.dispose();
    _pageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 PageControllerListenable 控制动画
    return WidgetWithSomeAnimation(
      animation: _pageControllerListenable,
      child: Container(
        color: Colors.blue,
        width: 200.0,
        height: 200.0,
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

// 示例动画组件
class WidgetWithSomeAnimation extends AnimatedWidget {
  WidgetWithSomeAnimation({required this.animation, required this.child})
      : super(listenable: animation);

  final Animation<double> animation;
  final Widget child;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 动画效果
    return Transform.translate(
      offset: Offset(animation.value * 200, 0),
      child: child,
    );
  }
}

Hook 示例

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

class ExampleWidget extends HookWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 Hook 初始化 PageController
    final pageController = usePageController();
    // 使用 Hook 初始化 PageControllerListenable
    final pageControllerListenable = usePageControllerListenable(pageController);

    return WidgetWithSomeAnimation(
      animation: pageControllerListenable,
      child: Container(
        color: Colors.red,
        width: 200.0,
        height: 200.0,
        child: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

更多关于Flutter页面控制器监听插件page_controller_listenable的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面控制器监听插件page_controller_listenable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，PageController用于管理PageView的页面切换。如果你想要监听PageController的变化，可以使用page_controller_listenable插件。这个插件提供了一个PageControllerListenable类，它允许你监听PageController的页面变化。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  page_controller_listenable: ^1.0.0

然后运行flutter pub get来安装依赖。

使用PageControllerListenable

下面是一个简单的示例，展示了如何使用PageControllerListenable来监听PageController的页面变化。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageViewExample(),
    );
  }
}

class PageViewExample extends StatefulWidget {
  [@override](/user/override)
  _PageViewExampleState createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  final PageController _pageController = PageController();
  final PageControllerListenable _pageControllerListenable = PageControllerListenable();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 将PageController与PageControllerListenable绑定
    _pageControllerListenable.attach(_pageController);
    // 监听页面变化
    _pageControllerListenable.addListener(_onPageChanged);
  }

  [@override](/user/override)
  void dispose() {
    // 移除监听器并释放资源
    _pageControllerListenable.removeListener(_onPageChanged);
    _pageControllerListenable.detach();
    _pageController.dispose();
    super.dispose();
  }

  void _onPageChanged() {
    // 获取当前页面索引
    int currentPage = _pageControllerListenable.page!.round();
    print('当前页面: $currentPage');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Example'),
      ),
      body: PageView(
        controller: _pageController,
        children: [
          Center(child: Text('Page 1')),
          Center(child: Text('Page 2')),
          Center(child: Text('Page 3')),
        ],
      ),
    );
  }
}
回到顶部