标签: flutter-pageview

我是新来的扑腾。我在其文档的帮助下实现了 flutter PageView：

/// Flutter code sample for PageView

// Here is an example of [PageView]. It creates a centered [Text] in each of the three pages
// which scroll horizontally.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: …

我有一个PageView有四页的。我想从第三页开始。这意味着当用户向上滚动时有两页可用，当用户向下滚动时有一页可用。

我试过：

home: PageView(
   controller: MyPageController(),
   children: [Page1(), Page2(), Page3(), Page4()],
   scrollDirection: Axis.vertical,
),

和：

class MyPageController extends PageController {
   @override
   int get initialPage => 3;
}

不幸的是，这对我没有帮助。

最近我安装了一个叫做Chanel Fashion的新应用，在它的主页上有一个非常奇怪的滚动类型，你可以从下面的 GIF 中看到它，我非常怀疑它是任何类型的定制滚动，我认为它是一个页面浏览，任何提示关于如何在颤振中实现这样的事情？

Ps 这个博客试图在 android 中制作类似的东西，但它在很多方面都不同。

Ps 2 这个 SO问题试图在 IOS 上实现它。

我的应用程序主页中有一个 PageView，我想要：

1. AppBar根据页面变化
2. BottomAppBar 已修复

我想象的2个解决方案是：

1. 难点：拥有一个带有 appBar、body 和 BottomNavigationBar 的 Scaffold；使用 PageView 的 PageController 为 AppBar 内容添加动画效果。
2. 有 2 个嵌套的脚手架：主脚手架带有主体和底部导航栏，第二个脚手架位于每个 PageView 的页面中，带有 AppBar。

所以，我想知道，它是有效的，但是嵌套支架在语法上是否“正确”？

我正在创建一个包含图像列表的 PageView，并且我想向每个图像添加 InteractiveViewer，以便可以调整其大小以查看详细信息。

这是我写的：

PageView.builder(
              dragStartBehavior: DragStartBehavior.start,
              physics: _viewing ?  NeverScrollableScrollPhysics() : ClampingScrollPhysics(),
              controller: _pageController,
              itemBuilder: (context, index) {
                return Container(
                    child: Expanded(
                      child: Image.network(widget.snapshotList[index].imgUrl),
                    )
                );
              },
              onPageChanged: (index) {
                setState(() {
                  this.position = index;
                  _transformationController.value = Matrix4.identity();
                });
              },
              itemCount: widget.snapshotList.length,
          )

但这两个滚动条似乎相互竞争，而且行为很混乱。

例如，一旦图像放大，滚动手势也会触发页面移动，似乎是因为视口没有随图像本身一起放大。

有什么解决办法吗？谢谢大家。

我一直在与“官方”flutter video_player包与 PageView 小部件结合使用时遇到严重的卡顿问题。

我的目标

平滑快速地滚动浏览PageView 小部件的多个页面，每个页面都包含一个视频小部件。

实际结果

当我尝试快速滚动这些页面时，我遇到了严重的卡顿/性能问题。当我缓慢地滑动页面并等待滚动动画完成时，一切都很顺利。请参阅我在小米红米 Note 8 Pro 的个人资料模式下录制的视频作为证据。

GIF：应用程序卡顿的视频证明

绩效分析

我尝试通过咨询颤振性能工具来寻求帮助。该工具显示光栅时间出现大量峰值。在一个示例中，光栅时间为 51.7 毫秒，其中 43.0 毫秒用于着色器编译。不过，我的经验不足，无法理解这意味着什么或这些信息如何帮助我。截图如下：

屏幕截图：显示慢帧的 flutter 性能工具屏幕截图

到目前为止我尝试过的

1. 删除该行controller.dispose();可以解决问题，但这会导致内存泄漏和小部件最终崩溃。
2. 我尝试将其包装controller.dispose();成 a WidgetsBinding.instance!.addPostFrameCallback((_) async {}，但这没有帮助

我的代码

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

class ExamplePageView extends StatelessWidget {
  ExamplePageView({Key? key}) : super(key: key);

  final PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: PageView(
          controller: pageController,
          onPageChanged: (value) {}, …

如何解决异常 -

未处理的异常：'package:flutter/src/widgets/page_view.dart'：失败的断言：第 179 行位置 7：'positions.isNotEmpty'：在使用它构建 PageView 之前无法访问 PageController.page。

注意：- 我在两个屏幕中使用它，当我在屏幕之间切换时，它显示上述异常。

@override
  void initState() {
    super.initState();
      WidgetsBinding.instance.addPostFrameCallback((_) => _animateSlider());
  }

  void _animateSlider() {
    Future.delayed(Duration(seconds: 2)).then(
      (_) {
        int nextPage = _controller.page.round() + 1;

        if (nextPage == widget.slide.length) {
          nextPage = 0;
        }

        _controller
            .animateToPage(nextPage,
                duration: Duration(milliseconds: 300), curve: Curves.linear)
            .then(
              (_) => _animateSlider(),
            );
      },
    );
  }

使用下面的代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: const MyHomePage(),
      );
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Center(
            child: Text('use the mouse wheel to scroll')),
            bottom: TabBar(
              tabs: const [
                Center(child: Text('ScrollView')),
                Center(child: Text('PageView'))
              ],
            ),
          ),
          body: TabBarView(
            children: [
              SingleChildScrollView(
                child: …

我有一个包含每个项目的音乐的列表。如果我关闭屏幕，我会更改index当前位置BottomNavigationPage并调用停止函数来停止音频，但有时这不起作用。如果歌曲正在加载过程中或用户速度非常快，歌曲将继续在不同页面上播放。

我使用https://pub.dev/packages/audioplayers插件。

这是我的缩小代码示例完整工作演示：编辑::

因此，我按照 @Ringil 的提示提供了一个完整的工作示例，其中包含我在这里面临的实际问题。这是我的代码：

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int currentIndex =0;

  @override
  Widget build(BuildContext context) …

怎么运行的

当我们设置 viewportFraction 时，视图将居中对齐。

如果 viewportFraction 设置

PageView(
   viewportFraction: 0.8
)

中心对齐视口

我多么期待

但我需要的是从左对齐开始的视图，就像 Playstore 仪表板的工作方式一样。

左对齐视口

上面的截图取自 Google Play 商店。

欲了解更多信息

我怎样才能实现这个目标？

在进行编码演练时，我从未找到居中对齐的方法。我刚刚通过复制page_view类创建了一个新的自定义类。