dating-agency
/
dating_touchme_app
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(live): 更新直播间UI并添加新图片资源 

- 添加了三个新的图片资源：broadcaster_empty、female_empty 和 male_empty
- 修改了主播展示区域的占位符UI，使用新添加的图片资源
- 优化了嘉宾视频区域的布局和样式
- 在直播间页面增加了返回键处理逻辑，提升用户体验
ios
Jolie 4 months ago
parent
bed6711150
commit
6490f1625b
6 changed files with 166 additions and 177 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/images/broadcaster_empty.png
  2. BIN
      assets/images/female_empty.png
  3. BIN
      assets/images/male_empty.png
  4. 3
      lib/generated/assets.dart
  5. 148
      lib/pages/discover/live_room_page.dart
  6. 192
      lib/widget/live/live_room_anchor_showcase.dart

BIN
assets/images/broadcaster_empty.png
View File

Before After
Width: 710  |  Height: 700  |  Size: 92 KiB

BIN
assets/images/female_empty.png
View File

Before After
Width: 710  |  Height: 700  |  Size: 12 KiB

BIN
assets/images/male_empty.png
View File

Before After
Width: 710  |  Height: 700  |  Size: 63 KiB

3
lib/generated/assets.dart
View File

@ -80,6 +80,7 @@ class Assets {
static const String imagesBankcardIcon = 'assets/images/bankcard_icon.png';
static const String imagesBgEditAvatars = 'assets/images/bg_edit_avatars.png';
static const String imagesBgInformation = 'assets/images/bg_information.png';
static const String imagesBroadcasterEmpty = 'assets/images/broadcaster_empty.png';
static const String imagesBtnBgIcon = 'assets/images/btn_bg_icon.png';
static const String imagesCamera = 'assets/images/camera.png';
static const String imagesCert = 'assets/images/cert.png';
@ -100,6 +101,7 @@ class Assets {
static const String imagesEmoji = 'assets/images/emoji.png';
static const String imagesEmojiTab = 'assets/images/emoji_tab.png';
static const String imagesFemale = 'assets/images/female.png';
static const String imagesFemaleEmpty = 'assets/images/female_empty.png';
static const String imagesFireIcon = 'assets/images/fire_icon.png';
static const String imagesFirstPay = 'assets/images/first_pay.png';
static const String imagesGift = 'assets/images/gift.png';
@ -121,6 +123,7 @@ class Assets {
static const String imagesLoginLogo = 'assets/images/login_logo.png';
static const String imagesMail = 'assets/images/mail.png';
static const String imagesMale = 'assets/images/male.png';
static const String imagesMaleEmpty = 'assets/images/male_empty.png';
static const String imagesManIcon = 'assets/images/man_icon.png';
static const String imagesMessageNol = 'assets/images/message_nol.png';
static const String imagesMessagePre = 'assets/images/message_pre.png';

148
lib/pages/discover/live_room_page.dart
View File

@ -123,84 +123,90 @@ class _LiveRoomPageState extends State<LiveRoomPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(248, 242, 255, 1),
Color.fromRGBO(247, 247, 247, 1),
],
return PopScope(
onPopInvokedWithResult: (bool didPop, Object? result) async {
_overlayController.toggle();
Get.back();
},
child: Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(248, 242, 255, 1),
Color.fromRGBO(247, 247, 247, 1),
],
),
),
),
),
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Color.fromRGBO(19, 16, 47, 1),
Color.fromRGBO(19, 16, 47, 1),
],
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Color.fromRGBO(19, 16, 47, 1),
Color.fromRGBO(19, 16, 47, 1),
],
),
),
),
),
Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 10.w),
Obx(() {
final detail = _roomController.rtcChannelDetail.value;
final anchorInfo = detail?.anchorInfo;
final userName = anchorInfo!.nickName;
final avatarAsset = anchorInfo.profilePhoto;
const popularityText = '0'; // TODO: 使用真实数据
return LiveRoomUserHeader(
userName: userName,
popularityText: popularityText,
avatarAsset: avatarAsset,
onCloseTap: () {
Get.back();
_overlayController.toggle();
},
);
}),
SizedBox(height: 7.w),
LiveRoomAnchorShowcase(),
SizedBox(height: 5.w),
const LiveRoomActiveSpeaker(),
SizedBox(height: 9.w),
const LiveRoomNoticeChatPanel(),
SizedBox(height: 17.w),
],
Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 10.w),
Obx(() {
final detail = _roomController.rtcChannelDetail.value;
final anchorInfo = detail?.anchorInfo;
final userName = anchorInfo!.nickName;
final avatarAsset = anchorInfo.profilePhoto;
const popularityText = '0'; // TODO: 使用真实数据
return LiveRoomUserHeader(
userName: userName,
popularityText: popularityText,
avatarAsset: avatarAsset,
onCloseTap: () {
Get.back();
_overlayController.toggle();
},
);
}),
SizedBox(height: 7.w),
LiveRoomAnchorShowcase(),
SizedBox(height: 5.w),
const LiveRoomActiveSpeaker(),
SizedBox(height: 9.w),
const LiveRoomNoticeChatPanel(),
SizedBox(height: 17.w),
],
),
),
),
),
LiveRoomActionBar(
messageController: _messageController,
onMessageChanged: (value) {
message = value;
},
onSendTap: _sendMessage,
onGiftTap: _showGiftPopup,
onChargeTap: _showRechargePopup,
),
],
LiveRoomActionBar(
messageController: _messageController,
onMessageChanged: (value) {
message = value;
},
onSendTap: _sendMessage,
onGiftTap: _showGiftPopup,
onChargeTap: _showRechargePopup,
),
],
),
),
),
],
],
),
),
);
}

192
lib/widget/live/live_room_anchor_showcase.dart
View File

@ -130,7 +130,6 @@ class _LiveRoomAnchorShowcaseState extends State<LiveRoomAnchorShowcase> {
if (_roomController.rtcChannelDetail.value?.anchorInfo == null || engine == null) {
return _buildWaitingPlaceholder();
}
Get.log("buildAnchorVideo");
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(9.w)),
child: SizedBox(
@ -165,16 +164,17 @@ class _LiveRoomAnchorShowcaseState extends State<LiveRoomAnchorShowcase> {
height: 175.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(9.w)),
color: Colors.grey.withOpacity(0.5),
),
child: Center(
child: Text(
'等待主播',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12.w,
),
),
child: Stack(
children: [
Image.asset(Assets.imagesBroadcasterEmpty),
Column(
children: [
Image.asset(Assets.imagesWaitting),
Text('暂时离开', style: TextStyle(color: Colors.white,))
],
)
],
),
);
}
@ -199,12 +199,7 @@ class _LiveRoomAnchorShowcaseState extends State<LiveRoomAnchorShowcase> {
child: SizedBox(
width: 177.w,
height: 175.w,
child:
userInfo != null &&
userInfo.uid != null &&
joined &&
engine != null
? AgoraVideoView(
child: userInfo != null && userInfo.uid != null && joined && engine != null ? AgoraVideoView(
controller: isCurrentUser
? VideoViewController(
rtcEngine: engine,
@ -218,102 +213,87 @@ class _LiveRoomAnchorShowcaseState extends State<LiveRoomAnchorShowcase> {
),
),
)
: Container(
decoration: BoxDecoration(
borderRadius: isLeft
? BorderRadius.horizontal(left: Radius.circular(18.w))
: BorderRadius.horizontal(
right: Radius.circular(18.w),
: Stack(
children: [
Image.asset(isLeft ? Assets.imagesMaleEmpty : Assets.imagesFemaleEmpty),
userInfo != null ? Positioned(
top: 5.w,
right: 5.w,
child: Container(
width: 20.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.w)),
),
child: Center(
child: Image.asset(
Assets.imagesGiftIcon,
width: 19.w,
height: 19.w,
),
),
),
) : const SizedBox(),
userInfo != null ? Positioned(
bottom: 5.w,
right: 5.w,
child: Container(
width: 47.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.w)),
color: Colors.white,
),
child: Center(
child: Text(
"加好友",
style: TextStyle(
fontSize: 11.w,
color: const Color.fromRGBO(117, 98, 249, 1),
),
color: const Color.fromRGBO(47, 10, 94, 1),
),
child: Center(
child: Text(
'等待${isLeft ? "男" : "女"}嘉宾',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12.w,
),
),
),
),
),
),
),
Positioned(
top: 5.w,
right: 5.w,
child: Container(
width: 20.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.w)),
color: const Color.fromRGBO(0, 0, 0, .3),
),
child: Center(
child: Image.asset(
Assets.imagesGiftIcon,
width: 19.w,
height: 19.w,
),
),
),
),
Positioned(
bottom: 5.w,
right: 5.w,
child: Container(
width: 47.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.w)),
color: Colors.white,
),
child: Center(
child: Text(
"加好友",
style: TextStyle(
fontSize: 11.w,
color: const Color.fromRGBO(117, 98, 249, 1),
) : const SizedBox(),
if (userInfo != null)
Positioned(
left: 5.w,
bottom: 5.w,
child: Row(
children: [
Container(
width: 20.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.w)),
color: const Color.fromRGBO(0, 0, 0, .65),
),
child: Center(
child: Image.asset(
userInfo.isMicrophoneOn
? Assets.imagesMicOpen
: Assets.imagesMicClose,
width: 10.w,
height: 11.w,
),
),
),
SizedBox(width: 5.w),
Text(
userInfo.nickName,
style: TextStyle(
fontSize: 11.w,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
],
),
),
],
),
),
),
),
),
if (userInfo != null)
Positioned(
left: 5.w,
bottom: 5.w,
child: Row(
children: [
Container(
width: 20.w,
height: 20.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.w)),
color: const Color.fromRGBO(0, 0, 0, .65),
),
child: Center(
child: Image.asset(
userInfo.isMicrophoneOn
? Assets.imagesMicOpen
: Assets.imagesMicClose,
width: 10.w,
height: 11.w,
),
),
),
SizedBox(width: 5.w),
Text(
userInfo.nickName,
style: TextStyle(
fontSize: 11.w,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
],
),
),
],
);
}

Write Preview
Loading…
Cancel
Save