SeatGridController 的 setLayoutMode 接口快速切换,无需手动计算位置。宫格布局 | 元素布局 | 纵向布局 | 自定义布局 |
![]() | ![]() |
![]() |
![]() |
void setLayoutMode(LayoutMode layoutMode, SeatWidgetLayoutConfig? layoutConfig)
参数 | 描述 |
layoutMode | 布局模式: LayoutMode.grid(宫格布局):适用于多人语聊场景,所有麦位均匀分布。 LayoutMode.focus(元素布局):适用于有主麦位的场景,突出显示主麦位。 LayoutMode.vertical(纵向布局):适用于竖屏场景,麦位垂直排列。 LayoutMode.free(自定义布局):适用于需要完全自定义布局的场景 。 |
layoutConfig | 自定义的行列布局信息,仅当 layoutMode 为 FREE 时需传入此参数。 |
SeatGridController seatGridController = SeatGridController(liveID: 'your live id');// 设置宫格布局seatGridController.setLayoutMode(LayoutMode.grid);// 设置元素布局seatGridController.setLayoutMode(LayoutMode.focus);// 设置纵向布局seatGridController.setLayoutMode(LayoutMode.vertical);// 设置自定义布局// 第一行配置final rowConfig1 = SeatWidgetLayoutRowConfig(count: 3, // 第一行显示的数量seatSpacing: 10, // 第一行每个麦位的水平间距seatSize: Size(50, 50), // 第一行显示的每个麦位视图大小alignment: SeatWidgetLayoutRowAlignment.center); // 第一行麦位的对齐方式// 第二行配置final rowConfig2 = SeatWidgetLayoutRowConfig(count: 3, // 第二行显示的数量seatSpacing: 10, // 第二行每个麦位的水平间距seatSize: Size(50, 50), // 第二行显示的每个麦位视图大小alignment: SeatWidgetLayoutRowAlignment.spaceAround); // 第二行麦位的对齐方式final layoutConfig = SeatWidgetLayoutConfig(rowConfigs: [rowConfig1, rowConfig2], rowSpacing: 10);seatGridController.setLayoutMode(LayoutMode.free, layoutConfig: layoutConfig);

SeatWidgetBuilder )来完全托管麦位的渲染逻辑。默认麦位视图 | 自定义麦位视图示例 |
![]() | ![]() |
SeatGridController seatGridController = SeatGridController(liveID: 'your live id');SeatGridWidget(controller: seatGridController,seatWidgetBuilder:(BuildContext context, ValueNotifier<SeatInfo> seatInfoNotifier, ValueNotifier<int> volumeNotifier) {return SizedBox(); // 替换成自己的自定义麦位视图},);
参数 | 描述 |
seatInfoNotifer | 当前麦位信息状态通知器。 |
volumeNotifier | 当前麦上用户音量状态通知器。 |
SeatGridController seatGridController = SeatGridController(liveID: 'your live id');SeatGridWidget(controller: seatGridController,seatWidgetBuilder:(BuildContext context, ValueNotifier<SeatInfo> seatInfoNotifier, ValueNotifier<int> volumeNotifier) {return TestSeatInfoWidget(seatInfo: seatInfoNotifier.value, volume: volumeNotifier.value);},);seatGridView.setSeatViewDelegate(TestSeatViewDelegate())class TestSeatInfoWidget extends StatelessWidget {final SeatInfo seatInfo;final int volume;const TestSeatInfoWidget({super.key, required this.seatInfo, required this.volume});@overrideWidget build(BuildContext context) {return Column(children: [Text('userId:${seatInfo.userInfo.userID}'), Text('volume:$volume')],);}}
SeatGridWidget 内部维护了数据状态,setLayoutMode 仅改变视觉排布,不会影响用户的上麦状态。SeatGridWidget 内部已实现了麦位注册监听,当任何麦位状态变化时,会自动触发 seatWidgetBuilder 回调方法。您只需在该方法中更新 UI 即可。文档反馈