487 lines
15 KiB
Dart
487 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
|
|
import 'package:aslan/app_localizations.dart';
|
|
import 'package:aslan/chatvibe_ui/components/at_compontent.dart';
|
|
import 'package:aslan/chatvibe_ui/components/text/at_text.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:pull_to_refresh/pull_to_refresh.dart';
|
|
import 'package:aslan/chatvibe_core/constants/at_screen.dart';
|
|
import 'package:aslan/chatvibe_data/sources/repositories/room_repository_imp.dart';
|
|
import 'package:aslan/chatvibe_domain/models/res/room_res.dart';
|
|
import 'package:aslan/main.dart';
|
|
import 'package:aslan/chatvibe_managers/app_general_manager.dart';
|
|
import 'package:aslan/chatvibe_managers/room_manager.dart';
|
|
import 'package:aslan/chatvibe_managers/rtc_manager.dart';
|
|
import 'package:aslan/chatvibe_ui/widgets/country/at_country_flag_image.dart';
|
|
import 'package:aslan/chatvibe_ui/widgets/room/recommend_banner_view.dart';
|
|
|
|
import '../../../../chatvibe_data/models/enum/at_vip_type.dart';
|
|
|
|
///推荐房间
|
|
class RoomRecommendPage extends StatefulWidget {
|
|
@override
|
|
_RoomRecommendPageState createState() => _RoomRecommendPageState();
|
|
}
|
|
|
|
class _RoomRecommendPageState extends State<RoomRecommendPage> with RouteAware {
|
|
final RefreshController _refreshController = RefreshController(
|
|
initialRefresh: false,
|
|
);
|
|
ChatVibeRoomManager? roomProvider;
|
|
|
|
// Timer? timer;
|
|
List<ChatVibeRoomRes> _items = [];
|
|
bool _isLoading = true; // 添加加载状态
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
roomProvider = Provider.of<ChatVibeRoomManager>(context, listen: false);
|
|
loadData();
|
|
}
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
super.didChangeDependencies();
|
|
// 注册路由观察
|
|
final route = ModalRoute.of(context);
|
|
if (route is PageRoute) {
|
|
routeObserver.subscribe(this, route);
|
|
}
|
|
}
|
|
|
|
@override
|
|
void didPush() {
|
|
// 路由被推入时调用
|
|
_updateVisibility(true);
|
|
}
|
|
|
|
@override
|
|
void didPopNext() {
|
|
// 当从下一个页面返回时调用
|
|
_updateVisibility(true);
|
|
}
|
|
|
|
@override
|
|
void didPushNext() {
|
|
// 当推入下一个页面时调用
|
|
_updateVisibility(false);
|
|
}
|
|
|
|
@override
|
|
void didPop() {
|
|
// 路由弹出时调用
|
|
_updateVisibility(false);
|
|
}
|
|
|
|
void _updateVisibility(bool isVisible) {
|
|
// if (isVisible) {
|
|
// ///在可见状态需要定时刷新请求数据
|
|
// timer?.cancel();
|
|
// timer = Timer.periodic(Duration(seconds: 5), (ti) {
|
|
// loadData();
|
|
// });
|
|
// } else {
|
|
// timer?.cancel();
|
|
// }
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
routeObserver.unsubscribe(this);
|
|
// timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
resizeToAvoidBottomInset: false,
|
|
backgroundColor: Colors.transparent,
|
|
body: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 8.w),
|
|
child: SmartRefresher(
|
|
enablePullDown: true,
|
|
enablePullUp: false,
|
|
controller: _refreshController,
|
|
onRefresh: () {
|
|
loadData();
|
|
},
|
|
onLoading: () {},
|
|
child: _buildContent(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildContent() {
|
|
// 如果正在加载，显示骨架屏
|
|
if (_isLoading) {
|
|
return _buildCustomSkeleton();
|
|
}
|
|
|
|
// 加载完成但没有数据，显示空状态
|
|
if (_items.isEmpty) {
|
|
return empty();
|
|
}
|
|
|
|
// 有数据时显示正常内容
|
|
return StaggeredGrid.count(
|
|
crossAxisCount: 2,
|
|
mainAxisSpacing: 8,
|
|
crossAxisSpacing: 8,
|
|
children: _buidChildren(),
|
|
);
|
|
}
|
|
|
|
// 自定义骨架屏
|
|
Widget _buildCustomSkeleton() {
|
|
// 创建模拟数据用于骨架屏
|
|
final mockItems = List.generate(
|
|
6,
|
|
(index) => ChatVibeRoomRes(id: "skeleton_$index"),
|
|
);
|
|
|
|
return StaggeredGrid.count(
|
|
crossAxisCount: 2,
|
|
mainAxisSpacing: 8,
|
|
crossAxisSpacing: 8,
|
|
children:
|
|
mockItems.map((item) {
|
|
return StaggeredGridTile.count(
|
|
crossAxisCellCount: 1,
|
|
mainAxisCellCount: 1,
|
|
child: _buildCustomSkeletonItem(item),
|
|
);
|
|
}).toList(),
|
|
);
|
|
}
|
|
|
|
// 完全自定义骨架屏项目
|
|
Widget _buildCustomSkeletonItem(ChatVibeRoomRes 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),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 原有的 buildItem 方法保持不变
|
|
Widget buildItem(ChatVibeRoomRes roomRes) {
|
|
return GestureDetector(
|
|
child: 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: [
|
|
netImage(
|
|
url: roomRes.roomCover ?? "",
|
|
borderRadius: BorderRadius.circular(12.w),
|
|
width: 200.w,
|
|
height: 200.w,
|
|
),
|
|
if (roomRes.extValues?.rocketLevel != null)
|
|
PositionedDirectional(
|
|
end: 5.w,
|
|
bottom: 35.w,
|
|
child: Image.asset(
|
|
"atu_images/room/at_icon_room_rocket_lv${roomRes.extValues?.rocketLevel}.png",
|
|
width: 20.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.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.roomName ?? "",
|
|
fontSize: 15.sp,
|
|
textColor: Color(0xffffffff),
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
// (roomRes.roomName?.length ?? 0) > 10
|
|
// ? Marquee(
|
|
// text: roomRes.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.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.extValues?.roomSetting?.password?.isEmpty ?? false)
|
|
? Image.asset(
|
|
"atu_images/general/at_icon_online_user.gif",
|
|
width: 14.w,
|
|
height: 14.w,
|
|
)
|
|
: Image.asset(
|
|
"atu_images/index/at_icon_room_suo.png",
|
|
width: 20.w,
|
|
height: 20.w,
|
|
),
|
|
(roomRes.extValues?.roomSetting?.password?.isEmpty ?? false)
|
|
? SizedBox(width: 3.w)
|
|
: Container(height: 10.w),
|
|
(roomRes.extValues?.roomSetting?.password?.isEmpty ?? false)
|
|
? text(
|
|
roomRes.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.roomGameIcon?.isNotEmpty ?? false)
|
|
? PositionedDirectional(
|
|
child: netImage(
|
|
url: roomRes.roomGameIcon ?? "",
|
|
width: 25.w,
|
|
height: 25.w,
|
|
borderRadius: BorderRadius.circular(4.w),
|
|
),
|
|
top: 8.w,
|
|
end: 8.w,
|
|
)
|
|
: Container(),
|
|
],
|
|
),
|
|
),
|
|
onTap: () {
|
|
Provider.of<RtcProvider>(
|
|
context,
|
|
listen: false,
|
|
).joinRoom(context, roomRes.id ?? "");
|
|
},
|
|
);
|
|
}
|
|
|
|
empty() {
|
|
List<Widget> 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)!.noData,
|
|
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,
|
|
);
|
|
}
|
|
|
|
String getRoomCoverHeaddress(ChatVibeRoomRes roomRes) {
|
|
var vip = roomRes.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 "";
|
|
}
|
|
|
|
///加载数据
|
|
loadData() async {
|
|
Provider.of<AppGeneralManager>(context, listen: false).loadMainBanner();
|
|
Provider.of<AppGeneralManager>(context, listen: false).appLeaderboard();
|
|
try {
|
|
_items = await ChatRoomRepository().discovery();
|
|
if (_items.length < 4) {
|
|
_items.add(ChatVibeRoomRes(id: "-10089"));
|
|
} else {
|
|
_items.insert(4, ChatVibeRoomRes(id: "-10089"));
|
|
}
|
|
_refreshController.refreshCompleted();
|
|
_refreshController.loadComplete();
|
|
} catch (e) {
|
|
_refreshController.loadNoData();
|
|
_refreshController.refreshCompleted();
|
|
} finally {
|
|
// 无论成功失败，都隐藏骨架屏
|
|
setState(() {
|
|
_isLoading = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
List<Widget> _buidChildren() {
|
|
List<Widget> ws = [];
|
|
for (var item in _items) {
|
|
if (item.id == "-10089") {
|
|
Provider.of<AppGeneralManager>(
|
|
context,
|
|
listen: false,
|
|
).roomBanners.isNotEmpty
|
|
? ws.add(
|
|
StaggeredGridTile.count(
|
|
crossAxisCellCount: 2,
|
|
mainAxisCellCount: 0.75,
|
|
child: RecommendBannerView(),
|
|
),
|
|
)
|
|
: Container();
|
|
} else {
|
|
ws.add(
|
|
StaggeredGridTile.count(
|
|
crossAxisCellCount: 1,
|
|
mainAxisCellCount: 1,
|
|
child: buildItem(item),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
return ws;
|
|
}
|
|
}
|