Question

我试图将视频播放器放置在屏幕顶部，但始终将其放置在屏幕中央-即使我也尝试使用容器。

以下是我的飞镖文件，请检查并告知我。对于播放器，我正在使用 chewie 库作为控制器并播放网络URL。在chewie库内部，他们正在使用视频播放器插件。

import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ottdemo_flutter/image_model.dart';
import 'package:video_player/video_player.dart';


class ChewieDemo extends StatefulWidget {

  final Datum imageData;
  ChewieDemo({ this.title = 'Player', Key key, @required this.imageData }): super(key:key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _ChewieDemoState();
  }
}

class _ChewieDemoState extends State<ChewieDemo> {

  TargetPlatform _platform;
  VideoPlayerController _videoPlayerController1;
  VideoPlayerController _videoPlayerController2;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    print('url player :${widget.imageData.dataUrl}');
    // 'https://www.sample-videos.com/video123/mp4/480/big_buck_bunny_480p_20mb.mp4'
    _videoPlayerController1 = VideoPlayerController.network('${widget.imageData.dataUrl}');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController1,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
      // Tried playing around with some of these other options:

      // showControls: false,
      // materialProgressColors: ChewieProgressColors(
      //   playedColor: Colors.red,
      //   handleColor: Colors.blue,
      //   backgroundColor: Colors.grey,
      //   bufferedColor: Colors.lightGreen,
      // ),
      // placeholder: Container(
      //   color: Colors.grey,
      // ),
      // autoInitialize: true
    );
  }

  @override
  void dispose() {
    _videoPlayerController1.dispose();
    _videoPlayerController2.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,
      theme: ThemeData.light().copyWith(
        platform: _platform ?? Theme.of(context).platform,
      ),
       home: DefaultTabController(
    length: 3,
    child: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
      bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
      ),
    ),
    body: SafeArea(
        child: Column(
          children: <Widget>[
            Chewie(
              controller: _chewieController,
            ),
            TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            )
          ],
        )
      ),
    ),
  ),
);
}}

Answer 1

由于您希望Chewie排在首位，所以我假设您正在尝试在播放器下方添加其他小部件。

例如，您可以将Chewie嵌入到Column()中。
默认情况下，Column()的{{1}}属性设置为mainAxisAlignment，这意味着子元素将从屏幕的上边缘开始向下生长。

就像这样：

MainAxisAlignment.start

也。为了使缺口和其他内容清晰可见，您可能需要将整个内容包装在Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Chewie( controller: _chewieController, ) ], ), ); }小部件中。

SafeArea()

Answer 2

将Chewie包裹在Container内，设置所需的height和width

如何将播放器置于最高位置

2 个答案: