dart - 在 PageController 中动态更改 viewportFraction

Question

似乎 Flutter 不支持动态更改 Controller 值，或者我遗漏了一些东西。我在谷歌上搜索了很多，但找不到这个具体案例。

我在这里想要实现的是，当在 PageView 中双击图像时，它会放大 2 倍。

我尝试使用图像本身的变换和缩放，它可以工作，但视口(viewport)不能很好地配合它，即图像已缩放，但当向左/向右滑动图像时，PageView 会更改页面。

为简单起见，这只是我的 build 方法，但除此之外没有其他内容，除了 _viewportScale 最初设置为 1.0。

@override
Widget build(BuildContext context) {
  this.controller = PageController(
    initialPage: 0,
    viewportFraction: _viewportScale,
  );
  return PageView(
    controller: controller,
    onPageChanged: (int pageIndex) {
      setState(() {
        _viewportScale = 1.0;
      });
    },
    children: this.urls.map((String url) {
        return Container(
          child: GestureDetector(
            child: Image.network(url),
            onTap: () => Navigator.pop(context),
            onDoubleTap: () {
              setState(() {
                _viewportScale = _viewportScale == 1.0 ? 2.0 : 1.0;
              });
            },
          ),
        );
      }).toList(),
  );
}

这里的问题是 onDoubleTap 失败并出现异常:

I/flutter ( 6492): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 6492): The following assertion was thrown building NotificationListener<ScrollNotification>:
I/flutter ( 6492): Unexpected call to replaceSemanticsActions() method of RawGestureDetectorState.
I/flutter ( 6492): The replaceSemanticsActions() method can only be called outside of the build phase.
I/flutter ( 6492): 
I/flutter ( 6492): When the exception was thrown, this was the stack:
I/flutter ( 6492): #0      RawGestureDetectorState.replaceSemanticsActions.<anonymous closure> (package:flutter/src/widgets/gesture_detector.dart:737:9)
I/flutter ( 6492): #1      RawGestureDetectorState.replaceSemanticsActions (package:flutter/src/widgets/gesture_detector.dart:743:6)
I/flutter ( 6492): #2      ScrollableState.setSemanticsActions (package:flutter/src/widgets/scrollable.dart:379:40)
I/flutter ( 6492): #3      ScrollPosition._updateSemanticActions (package:flutter/src/widgets/scroll_position.dart:445:13)
I/flutter ( 6492): #4      ScrollPosition.notifyListeners (package:flutter/src/widgets/scroll_position.dart:695:5)
I/flutter ( 6492): #5      ScrollPosition.forcePixels (package:flutter/src/widgets/scroll_position.dart:318:5)
I/flutter ( 6492): #6      _PagePosition.viewportFraction= (package:flutter/src/widgets/page_view.dart:263:7)
I/flutter ( 6492): #7      PageController.attach (package:flutter/src/widgets/page_view.dart:173:18)
I/flutter ( 6492): #8      ScrollableState.didUpdateWidget (package:flutter/src/widgets/scrollable.dart:356:26)
I/flutter ( 6492): #9      StatefulElement.update (package:flutter/src/widgets/framework.dart:3884:58)
I/flutter ( 6492): #10     Element.updateChild (package:flutter/src/widgets/framework.dart:2752:15)
I/flutter ( 6492): #11     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3752:16)
I/flutter ( 6492): #12     Element.rebuild (package:flutter/src/widgets/framework.dart:3564:5)
I/flutter ( 6492): #13     StatelessElement.update (package:flutter/src/widgets/framework.dart:3801:5)
I/flutter ( 6492): #14     Element.updateChild (package:flutter/src/widgets/framework.dart:2752:15)
I/flutter ( 6492): #15     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3752:16)
I/flutter ( 6492): #16     Element.rebuild (package:flutter/src/widgets/framework.dart:3564:5)
I/flutter ( 6492): #17     StatefulElement.update (package:flutter/src/widgets/framework.dart:3899:5)
I/flutter ( 6492): #18     Element.updateChild (package:flutter/src/widgets/framework.dart:2752:15)
I/flutter ( 6492): #19     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3752:16)
I/flutter ( 6492): #20     Element.rebuild (package:flutter/src/widgets/framework.dart:3564:5)
I/flutter ( 6492): #21     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2277:33)
I/flutter ( 6492): #22     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
I/flutter ( 6492): #23     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:275:5)
I/flutter ( 6492): #24     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 6492): #25     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 6492): #26     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 6492): #30     _invoke (dart:ui/hooks.dart:209:10)
I/flutter ( 6492): #31     _drawFrame (dart:ui/hooks.dart:168:3)
I/flutter ( 6492): (elided 3 frames from package dart:async)
I/flutter ( 6492): ════════════════════════════════════════════════════════════════════════════════════════════════════

祈祷简单的解决方案...:)

Answer 1

如果您想更改 PageController() 中的最终变量，只需将其他 PageController() 实例分配给您的 pageController 即可。

PageController pageController = PageController(
    viewportFraction: 0.8,
);

PageView.builder(
    controller: pageController,
    itemCount: 3,
    scrollDirection: Axis.horizontal,
    itemBuilder: (context, index) => OrderCard(order: state.orders[index]),
)

现在，当您想要更改 viewportFractional 时，请为新的 PageController() 分配其他 viewportFractional 值。

@override
  void initState() {
    Future.delayed(Duration(seconds: 9), () {
      pageController = PageController(viewportFraction: 1);
    });
    super.initState();
}

完整示例:

import 'package:flutter/material.dart';

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

class MyHomePage extends StatefulWidget {
  const MyHomePage();

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageController pageController = PageController(
    viewportFraction: 0.8,
  );

  @override
  void initState() {
    Future.delayed(Duration(seconds: 9), () {
      pageController = PageController(viewportFraction: 1);
    });
    super.initState();
  }

  Widget build(BuildContext context) {
    return PageView.builder(
      controller: pageController,
      itemCount: 3,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) => Text('Page $index'),
    );
  }
}