import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:aslan/app_localizations.dart'; import 'package:provider/provider.dart'; import 'package:aslan/chatvibe_ui/components/at_compontent.dart'; import 'package:aslan/chatvibe_ui/components/at_page_list.dart'; import 'package:aslan/chatvibe_ui/components/text/at_text.dart'; import 'package:aslan/chatvibe_core/constants/at_screen.dart'; import 'package:aslan/chatvibe_data/sources/repositories/user_repository_impl.dart'; import 'package:aslan/chatvibe_domain/models/res/follow_room_res.dart'; import 'package:aslan/chatvibe_managers/rtc_manager.dart'; import 'package:aslan/chatvibe_ui/widgets/country/at_country_flag_image.dart'; import '../../../../chatvibe_data/models/enum/at_vip_type.dart'; ///关注房间 class RoomFollowPage extends ATPageList { @override _RoomFollowPageState createState() => _RoomFollowPageState(); } class _RoomFollowPageState extends ATPageListState { String? lastId; bool _isLoading = true; // 添加加载状态 final mockItems = List.generate( 6, (index) => FollowRoomRes(id: "skeleton_$index"), ); @override void initState() { super.initState(); enablePullUp = true; backgroundColor = Colors.transparent; isGridView = true; gridViewCount = 2; loadData(1); } @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false, backgroundColor: Colors.transparent, body: buildList(context), ); } Widget _buildCustomSkeletonItem(FollowRoomRes roomRes) { return Container( alignment: Alignment.center, margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.w), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.w), color: Colors.transparent, ), child: Stack( alignment: Alignment.bottomCenter, children: [ // 自定义加载图标 Container( width: 200.w, height: 200.w, decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.w), ), child: Image.asset( "atu_images/general/at_icon_loading.webp", width: 200.w, height: 200.w, fit: BoxFit.cover, ), ), // 底部信息骨架 Container( padding: EdgeInsets.symmetric(vertical: 5.w), decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(12.w), bottomRight: Radius.circular(12.w), ), color: Colors.black38, ), child: Row( children: [ SizedBox(width: 10.w), // 国旗骨架 Container( width: 20.w, height: 13.w, decoration: BoxDecoration( borderRadius: BorderRadius.circular(2.w), color: Colors.grey[400], ), ), SizedBox(width: 5.w), Expanded( child: Container( height: 21.w, decoration: BoxDecoration( borderRadius: BorderRadius.circular(4.w), color: Colors.grey[400], ), margin: EdgeInsets.symmetric(vertical: 2.w), ), ), SizedBox(width: 5.w), // 在线用户图标骨架 Container( width: 14.w, height: 14.w, decoration: BoxDecoration( color: Colors.grey[400], shape: BoxShape.circle, ), ), SizedBox(width: 3.w), // 在线人数骨架 Container( width: 20.w, height: 12.w, decoration: BoxDecoration( borderRadius: BorderRadius.circular(2.w), color: Colors.grey[400], ), ), SizedBox(width: 10.w), ], ), ), ], ), ); } @override Widget buildItem(FollowRoomRes roomRes) { if (_isLoading) { return _buildCustomSkeletonItem(roomRes); } return GestureDetector( child: Container( margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.w), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12.w), color: Colors.transparent, ), child: Stack( alignment: Alignment.bottomCenter, children: [ netImage( url: roomRes.roomProfile?.roomCover ?? "", borderRadius: BorderRadius.circular(12.w), width: 200.w, height: 200.w, ), Container( padding: EdgeInsets.symmetric(vertical: 5.w), decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(12.w), bottomRight: Radius.circular(12.w), ), color: Colors.black38, ), child: Row( children: [ SizedBox(width: 10.w), ATCountryFlagImage( countryName: roomRes.roomProfile?.countryName, width: 20.w, height: 13.w, borderRadius: BorderRadius.circular(2.w), ), SizedBox(width: 5.w), Expanded( child: SizedBox( height: 21.w, child: text( roomRes.roomProfile?.roomName ?? "", fontSize: 15.sp, textColor: Color(0xffffffff), fontWeight: FontWeight.w400, ), // (roomRes.roomProfile?.roomName?.length ?? 0) > 10 // ? Marquee( // text: roomRes.roomProfile?.roomName ?? "", // style: TextStyle( // fontSize: 15.sp, // color: Color(0xffffffff), // fontWeight: FontWeight.w400, // decoration: TextDecoration.none, // ), // scrollAxis: Axis.horizontal, // crossAxisAlignment: CrossAxisAlignment.start, // blankSpace: 20.0, // velocity: 40.0, // pauseAfterRound: Duration(seconds: 1), // accelerationDuration: Duration(seconds: 1), // accelerationCurve: Curves.easeOut, // decelerationDuration: Duration( // milliseconds: 500, // ), // decelerationCurve: Curves.easeOut, // ) // : Text( // roomRes.roomProfile?.roomName ?? "", // maxLines: 1, // overflow: TextOverflow.ellipsis, // style: TextStyle( // fontSize: 15.sp, // color: Color(0xffffffff), // fontWeight: FontWeight.w400, // decoration: TextDecoration.none, // ), // ), ), ), SizedBox(width: 5.w), (roomRes .roomProfile ?.extValues ?.roomSetting ?.password ?.isEmpty ?? false) ? Image.asset( "atu_images/general/at_icon_online_user.png", width: 14.w, height: 14.w, ) : Image.asset( "atu_images/index/at_icon_room_suo.png", width: 20.w, height: 20.w, ), (roomRes .roomProfile ?.extValues ?.roomSetting ?.password ?.isEmpty ?? false) ? SizedBox(width: 3.w) : Container(height: 10.w), (roomRes .roomProfile ?.extValues ?.roomSetting ?.password ?.isEmpty ?? false) ? text( roomRes.roomProfile?.extValues?.memberQuantity ?? "0", fontSize: 12.sp, ) : Container(height: 10.w), SizedBox(width: 10.w), ], ), ), getRoomCoverHeaddress(roomRes).isNotEmpty ? Transform.translate( offset: Offset(0, -5.w), child: Transform.scale( scaleX: 1.1, scaleY: 1.12, child: Image.asset(getRoomCoverHeaddress(roomRes)), ), ) : Container(), (roomRes.roomProfile?.roomGameIcon?.isNotEmpty ?? false) ? PositionedDirectional( child: netImage( url: roomRes.roomProfile?.roomGameIcon ?? "", width: 25.w, height: 25.w, borderRadius: BorderRadius.circular(4.w), ), top: 8.w, end: 8.w, ) : Container(), ], ), ), onTap: () { Provider.of( context, listen: false, ).joinRoom(context, roomRes.roomProfile?.id ?? ""); }, ); } String getRoomCoverHeaddress(FollowRoomRes roomRes) { var vip = roomRes.roomProfile?.userProfile?.getVIP(); if (vip?.name == ATVIPType.DUKE.name) { return "atu_images/vip/at_icon_vip4_room_cover_headdress.png"; } else if (vip?.name == ATVIPType.KING.name) { return "atu_images/vip/at_icon_vip5_room_cover_headdress.png"; } else if (vip?.name == ATVIPType.EMPEROR.name) { return "atu_images/vip/at_icon_vip6_room_cover_headdress.png"; } return ""; } @override empty() { List list = []; list.add(SizedBox(height: height(30))); list.add(Image.asset('atu_images/general/at_icon_loading.png')); list.add(SizedBox(height: height(15))); list.add( Text( ATAppLocalizations.of(context)!.youHaventFollowed, style: TextStyle( fontSize: sp(14), color: Color(0xff999999), fontWeight: FontWeight.w400, decoration: TextDecoration.none, height: 1, ), ), ); return Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: list, ); } ///加载数据 @override loadPage({ required int page, required Function(List) onSuccess, Function? onErr, }) async { if (page == 1) { lastId = null; } if (_isLoading) { onSuccess(mockItems); } try { var roomList = await AccountRepository().followRoomList(lastId: lastId); if (roomList.isNotEmpty) { lastId = roomList.last.id; } onSuccess(roomList); } catch (e) { if (onErr != null) { onErr(); } } finally { // 无论成功失败，都隐藏骨架屏 setState(() { _isLoading = false; }); } } }