flutter - 如何在 Flutter 上布局 Agora 视频屏幕？

Question

如何布局屏幕，使其仅出现在 Flutter App 的角落？我只需要 4 个视频盒供其他用户使用。

标签： fluttervideo-streamingflutter-layoutagora.io

Answer 1

正如此处的快速入门指南所述：https ://github.com/AgoraIO-Community/Agora-Flutter-Quickstart/

您可以使用 Column 小部件将 4 个视频放置在 4 个不同的角落

/// Helper function to get list of native views   List<Widget>
_getRenderViews() {
    final List<AgoraRenderWidget> list = [
      AgoraRenderWidget(0, local: true, preview: true),
    ];
    _users.forEach((int uid) => list.add(AgoraRenderWidget(uid)));
    return list;   }

  /// Video view wrapper   Widget _videoView(view) {
    return Expanded(child: Container(child: view));   }

  /// Video view row wrapper   Widget _expandedVideoRow(List<Widget> views) {
    final wrappedViews = views.map<Widget>(_videoView).toList();
    return Expanded(
      child: Row(
        children: wrappedViews,
      ),
    );   }

  /// Video layout wrapper   Widget _viewRows() {
    final views = _getRenderViews();
    switch (views.length) {
      case 1:
        return Container(
            child: Column(
          children: <Widget>[_videoView(views[0])],
        ));
      case 2:
        return Container(
            child: Column(
          children: <Widget>[
            _expandedVideoRow([views[0]]),
            _expandedVideoRow([views[1]])
          ],
        ));
      case 3:
        return Container(
            child: Column(
          children: <Widget>[
            _expandedVideoRow(views.sublist(0, 2)),
            _expandedVideoRow(views.sublist(2, 3))
          ],
        ));
      case 4:
        return Container(
            child: Column(
          children: <Widget>[
            _expandedVideoRow(views.sublist(0, 2)),
            _expandedVideoRow(views.sublist(2, 4))
          ],
        ));
      default:
    }
    return Container();   }