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

Posted 2023-03-14

【中文标题】如何在 Flutter 上布局 Agora 视频屏幕？

【英文标题】：How to layout the Agora video screens on Flutter?

【发布时间】：2020-05-15 03:11:08

【问题描述】：

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

【参考方案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();