0

我正在尝试在容器内显示视频，视频可能超过容器的纵横比，因此需要裁剪它们。

使用图像很简单：

Image.network(someUrl, fit: BoxFit.cover)

但是怎么做呢VideoPlayer？

我当前的代码如下所示：

Stack(
            children: [
              Container(
                width: double.infinity,
                height: double.infinity,
                child: ShowcaseVideoPlayer(someUrl)
              ),
              Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () {},
                ),
              ),
            ],);

class ShowcaseVideoPlayer extends StatefulWidget {
  final String url;

  ShowcaseVideoPlayer(this.url);

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

class _ShowcaseVideoPlayerState extends State<ShowcaseVideoPlayer> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(widget.url);

    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setVolume(0);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          _controller.play();
          // If the VideoPlayerController has finished initialization, use
          // the data it provides to limit the aspect ratio of the VideoPlayer.
          return AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            // Use the VideoPlayer widget to display the video.
            child: VideoPlayer(_controller),
          );
        } else {
          // If the VideoPlayerController is still initializing, show a
          // loading spinner.
          return Center(),
          );
        }
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

我需要一个堆栈，因为我必须在视频中展示其他内容。我试过没有堆栈，播放器保持视频的纵横比，基本上是信箱。使用堆栈，视频分层，失去原始纵横比：

在此处输入图像描述

要清楚，我想要的是：

在此处输入图像描述

编辑：我在上面尝试了随机的东西并设法实现了一些东西，我删除了Container并包装了VideoPlayer这样的：

Stack(
            children: [
              OverflowBox(
                      child: Wrap(
                          children: [
                            ShowcaseVideoPlayer(someUrl)
                          ],
                      ),
                    )]);

现在视频实际上被裁剪了，但没有居中（我看到的是视频的上半部分而不是中间部分）。包裹Wrap在 a 中Center并设置alignment: Alignment.centeronOverfowBox无效。任何想法？

4

0 回答 0