时间戳

首页 > 解决方案 > 如何 BoxFit.cover 具有特定纵横比的全屏 VideoPlayer 小部件

flutter - 如何 BoxFit.cover 具有特定纵横比的全屏 VideoPlayer 小部件

问题描述

我试过FittedBox了，也把它们都包起来了ConstrainedBox，没有一个起作用。可能是我错过了一些点。

问题也很活跃：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.

标签： flutterdart

解决方案

使用该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();
  }

然后，在您的小部件树中：

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
  ],
)

推荐阅读