dart 如何BoxFit,以特定的纵横比覆盖全屏VideoPlayer小部件

8hhllhi2 于 2023-07-31 发布在其他

关注(0)|答案(3)|浏览(104)

我试过FittedBox，也用ConstrainedBox Package 了所有的，没有一个工作。也许我错过了一些要点。
问题还存在于：https://github.com/flutter/flutter/issues/31911
代码如下：

@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        FittedBox(
          fit: BoxFit.cover,
          child: AspectRatio(
            aspectRatio: _aspectRatio,
            child: VideoPlayer(_playerController),
          ),
        ),
        _buildText(),
      ],
    );
  }

字符串
我想要的很简单，我想在Stack中全屏显示视频，同时保留原始的宽高比，我还想像BoxFit.cover一样覆盖它。
错误日志：

I/flutter (11919): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (11919): The following assertion was thrown during performLayout():
I/flutter (11919): RenderAspectRatio has unbounded constraints.
I/flutter (11919): This RenderAspectRatio was given an aspect ratio of 0.5602409638554217 but was given both unbounded
I/flutter (11919): width and unbounded height constraints. Because both constraints were unbounded, this render object
I/flutter (11919): doesn't know how much size to consume.
I/flutter (11919): 
I/flutter (11919): When the exception was thrown, this was the stack:
I/flutter (11919): #0      RenderAspectRatio._applyAspectRatio.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:459:9)
I/flutter (11919): #1      RenderAspectRatio._applyAspectRatio (package:flutter/src/rendering/proxy_box.dart:468:6)
I/flutter (11919): #2      RenderAspectRatio.performLayout (package:flutter/src/rendering/proxy_box.dart:516:12)
I/flutter (11919): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #4      RenderFittedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:2251:13)
I/flutter (11919): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #6      RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter (11919): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #18     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #20     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #21     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #22     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #23     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3076:13)
I/flutter (11919): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #25     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter (11919): #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #27     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #29     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #30     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #31     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #32     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #33     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #34     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (11919): #36     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (11919): #37     RenderView.performLayout (package:flutter/src/rendering/view.dart:151:13)
I/flutter (11919): #38     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1496:7)
I/flutter (11919): #39     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18)
I/flutter (11919): #40     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:346:19)
I/flutter (11919): #41     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
I/flutter (11919): #42     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:285:5)
I/flutter (11919): #43     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)
I/flutter (11919): #44     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:958:9)
I/flutter (11919): #45     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:784:7)
I/flutter (11919): #47     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
I/flutter (11919): #48     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
I/flutter (11919): #49     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)
I/flutter (11919): (elided one frame from package dart:async-patch)
I/flutter (11919): 
I/flutter (11919): The following RenderObject was being processed when the exception was fired: RenderAspectRatio#8a9cd relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (11919):   creator: AspectRatio ← FittedBox ← Stack ← BootRoute ← Semantics ← Builder ←
I/flutter (11919):     RepaintBoundary-[GlobalKey#ea478] ← IgnorePointer ← FadeTransition ← FractionalTranslation ←
I/flutter (11919):     SlideTransition ← _FadeUpwardsPageTransition ← ⋯
I/flutter (11919):   parentData: <none> (can use size)
I/flutter (11919):   constraints: BoxConstraints(unconstrained)
I/flutter (11919):   size: MISSING
I/flutter (11919):   aspectRatio: 0.6
I/flutter (11919): This RenderObject had the following child:
I/flutter (11919):     child: TextureBox#80844 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (11919): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (11919): Another exception was thrown: RenderBox was not laid out: RenderAspectRatio#8a9cd relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (11919): Another exception was thrown: RenderBox was not laid out: RenderFittedBox#e14a1 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (11919): Another exception was thrown: RenderBox was not laid out: RenderFittedBox#e14a1 relayoutBoundary=up1
Reloaded 4 of 482 libraries in 554ms.

型

dart

来源：https://stackoverflow.com/questions/57077639/how-to-boxfit-cover-a-fullscreen-videoplayer-widget-with-specific-aspect-ratio

3条答案

按热度按时间

5rgfhyps1#

使用video_player包，初始设置为：

VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        VideoPlayerController.asset("assets/video/home_background.mp4")
          ..initialize().then((value) => {setState(() {})});
    _controller.setLooping(true);
    _controller.setVolume(0.0);
    _controller.play();
  }

字符串
然后，在您的widget树中：

Stack(
  children: <Widget>[
    SizedBox.expand(
      child: FittedBox(
        fit: BoxFit.cover,
        child: SizedBox(
          width: _controller.value.size?.width ?? 0,
          height: _controller.value.size?.height ?? 0,
          child: VideoPlayer(_controller),
        ),
      ),
    ),
    //FURTHER IMPLEMENTATION
  ],
)

型

赞(0）回复(0）举报 2023-07-31

lztngnrs2#

老问题，回答参考。这是Flutter上的一个开放问题（截至2020/04/23）：https://github.com/flutter/flutter/issues/31911
在问题的注解中提供了很好的解决方法，使用SizedBox而不是AspectRatio。你的代码应该是这样的：

@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        FittedBox(
          fit: BoxFit.cover,
          child: SizedBox(
            width: _aspectRatio,
            height: 1,
            child: VideoPlayer(_playerController),
          ),
        ),
        _buildText(),
      ],
    );
  }

字符串

赞(0）回复(0）举报 2023-07-31

vltsax253#

尝试在我的场景中使用此功能

SizedBox(
                height: Get.height,
                width: Get.width,
                child: FittedBox(
                  fit: BoxFit.cover,
                  child: SizedBox(
                    width: Get.height *
                        controller
                            .tutorialVideoController!.value.aspectRatio,
                    height: Get.height * 1,
                    child: VideoPlayer(controller.tutorialVideoController!),
                  ),
                ),
              ),

字符串

赞(0）回复(0）举报 2023-07-31

我来回答

dart 如何BoxFit,以特定的纵横比覆盖全屏VideoPlayer小部件

3条答案

相关问题

热门标签

最新问答