android - 如何将播放器置于顶部位置

Question

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

下面是我的dart文件，请检查并告诉我。对于播放器，我正在为 Controller 使用 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() 已将其 mainAxisAlignment 属性设置为 MainAxisAlignment.start，这意味着子项将从屏幕的上边缘开始增长向下。

就像这样:

Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Chewie(
            controller: _chewieController,
          )
        ],
      ),
    );
  }

还有。为了保持顶部的槽口和其他内容清晰，您可能希望将整个内容包装在 SafeArea() 小部件中。

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: <Widget>[
          Chewie(
            controller: _chewieController,
          )
        ],
      ),
    ),
  );
}