hy/chatapp3-flutter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

游戏UI更新

Browse Source
This commit is contained in:
NIGGER SLAYER 2026-04-17 18:38:37 +08:00
parent e63a99faaa
commit f5bab34f19
4 changed files with 157 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
lib/modules/room_game/views/baishun_game_page.dart
View File

@ -411,6 +411,7 @@ class _BaishunGamePageState extends State<BaishunGamePage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final topCrop = 28.w;
return PopScope( return PopScope(
canPop: false, canPop: false,
onPopInvokedWithResult: (bool didPop, Object? result) async { onPopInvokedWithResult: (bool didPop, Object? result) async {
@ -430,69 +431,28 @@ class _BaishunGamePageState extends State<BaishunGamePage> {
), ),
child: Container( child: Container(
width: ScreenUtil().screenWidth, width: ScreenUtil().screenWidth,
height: ScreenUtil().screenHeight * 0.75, height: ScreenUtil().screenHeight * 0.5,
color: const Color(0xFF081915), color: const Color(0xFF081915),
child: Column( child: Stack(
children: [ children: [
SizedBox(height: 10.w), Positioned(
Container( top: -topCrop,
width: 34.w, left: 0,
height: 4.w, right: 0,
decoration: BoxDecoration( bottom: 0,
color: Colors.white.withValues(alpha: 0.28), child: WebViewWidget(
borderRadius: BorderRadius.circular(99.w), controller: _controller,
gestureRecognizers: _webGestureRecognizers,
), ),
), ),
SizedBox(height: 6.w), if (_errorMessage != null) _buildErrorState(),
Padding( if (_isLoading && _errorMessage == null)
padding: EdgeInsets.symmetric(horizontal: 10.w), const IgnorePointer(
child: Row( ignoring: true,
children: [ child: BaishunLoadingView(
IconButton( message: 'Waiting for gameLoaded...',
onPressed: _closeAndExit, ),
icon: const Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
),
Expanded(
child: Text(
widget.game.name,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16.sp,
fontWeight: FontWeight.w700,
),
),
),
IconButton(
onPressed: _closeAndExit,
icon: const Icon(Icons.close, color: Colors.white),
),
],
), ),
),
Expanded(
child: Stack(
children: [
Positioned.fill(
child: WebViewWidget(
controller: _controller,
gestureRecognizers: _webGestureRecognizers,
),
),
if (_errorMessage != null) _buildErrorState(),
if (_isLoading && _errorMessage == null)
const IgnorePointer(
ignoring: true,
child: BaishunLoadingView(
message: 'Waiting for gameLoaded...',
),
),
],
),
),
], ],
), ),
), ),

242
lib/modules/room_game/views/room_game_list_sheet.dart
View File

@ -1,5 +1,4 @@
import 'dart:io'; import 'dart:io';
import 'dart:ui' as ui;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
@ -23,7 +22,11 @@ class RoomGameListSheet extends StatefulWidget {
} }
class _RoomGameListSheetState extends State<RoomGameListSheet> { class _RoomGameListSheetState extends State<RoomGameListSheet> {
static const int _itemsPerRow = 5; static const int _itemsPerRow = 4;
static const String _sheetFrameAsset =
'sc_images/room/sc_room_game_sheet_frame.png';
static const String _dividerLayerAsset =
'sc_images/room/sc_room_game_divider_layer.png';
final RoomGameRepository _repository = RoomGameRepository(); final RoomGameRepository _repository = RoomGameRepository();
late Future<List<RoomGameListItemModel>> _gamesFuture; late Future<List<RoomGameListItemModel>> _gamesFuture;
@ -93,7 +96,7 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
widget.roomContext, widget.roomContext,
BaishunGamePage(roomId: _roomId, game: game, launchModel: launchModel), BaishunGamePage(roomId: _roomId, game: game, launchModel: launchModel),
barrierColor: Colors.black54, barrierColor: Colors.black54,
barrierDismissible: false, barrierDismissible: true,
); );
} catch (error) { } catch (error) {
SCTts.show('Launch failed'); SCTts.show('Launch failed');
@ -110,48 +113,30 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SafeArea( return SafeArea(
top: false, top: false,
child: ClipRRect( child: SizedBox(
borderRadius: BorderRadius.only( width: ScreenUtil().screenWidth,
topLeft: Radius.circular(18.w), height: ScreenUtil().screenHeight * 0.5,
topRight: Radius.circular(18.w), child: LayoutBuilder(
), builder: (context, constraints) {
child: BackdropFilter( final innerLeft = constraints.maxWidth * 0.05;
filter: ui.ImageFilter.blur(sigmaX: 16, sigmaY: 16), final innerRight = constraints.maxWidth * 0.05;
child: Container( final innerTop = constraints.maxHeight * 0.10;
width: ScreenUtil().screenWidth, final innerBottom = constraints.maxHeight * 0.0001;
height: ScreenUtil().screenHeight / 3,
color: const Color(0xff09372E).withValues(alpha: 0.88), return Stack(
child: Column(
children: [ children: [
SizedBox(height: 10.w), Positioned(
Container( left: innerLeft,
width: 34.w, right: innerRight,
height: 4.w, top: innerTop,
decoration: BoxDecoration( bottom: innerBottom,
color: Colors.white.withValues(alpha: 0.28), child: Container(color: const Color(0xFF0C331E)),
borderRadius: BorderRadius.circular(99.w),
),
), ),
Padding( Positioned(
padding: EdgeInsets.fromLTRB(16.w, 14.w, 16.w, 10.w), left: innerLeft + 5.w,
child: Row( right: innerRight + 5.w,
children: [ top: innerTop + 50.w,
text( bottom: innerBottom + 2.w,
'Games',
fontSize: 16,
fontWeight: FontWeight.w700,
textColor: Colors.white,
),
const Spacer(),
text(
_roomId.isEmpty ? 'Debug room' : 'Room $_roomId',
fontSize: 11,
textColor: Colors.white70,
),
],
),
),
Expanded(
child: FutureBuilder<List<RoomGameListItemModel>>( child: FutureBuilder<List<RoomGameListItemModel>>(
future: _gamesFuture, future: _gamesFuture,
builder: (context, snapshot) { builder: (context, snapshot) {
@ -171,38 +156,22 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
final rowCount = (items.length / _itemsPerRow).ceil(); final rowCount = (items.length / _itemsPerRow).ceil();
return ListView.builder( return ListView.builder(
padding: EdgeInsets.fromLTRB(12.w, 0, 12.w, 20.w), padding: EdgeInsets.zero,
itemCount: rowCount, itemCount: rowCount,
itemBuilder: (context, rowIndex) { itemBuilder: (context, rowIndex) {
final startIndex = rowIndex * _itemsPerRow;
final endIndex =
(startIndex + _itemsPerRow) > items.length
? items.length
: (startIndex + _itemsPerRow);
final rowItems = items.sublist(startIndex, endIndex);
return Padding( return Padding(
padding: EdgeInsets.only(bottom: 12.w), padding: EdgeInsets.only(bottom: 5.w),
child: Row( child: _RoomGameRow(
children: List.generate(_itemsPerRow, ( dividerAsset: _dividerLayerAsset,
columnIndex, items: rowItems,
) { launchingGameId: _launchingGameId,
final itemIndex = onTap: _openGame,
rowIndex * _itemsPerRow + columnIndex;
return Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 4.w,
),
child:
itemIndex < items.length
? _RoomGameTile(
item: items[itemIndex],
loading:
_launchingGameId ==
items[itemIndex].gameId,
onTap:
() => _openGame(
items[itemIndex],
),
)
: const SizedBox.shrink(),
),
);
}),
), ),
); );
}, },
@ -210,9 +179,14 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
}, },
), ),
), ),
Positioned.fill(
child: IgnorePointer(
child: Image.asset(_sheetFrameAsset, fit: BoxFit.fill),
),
),
], ],
), );
), },
), ),
), ),
); );
@ -223,7 +197,11 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
text('Game list failed', fontSize: 13, textColor: Colors.white), text(
'Game list failed',
fontSize: 13,
textColor: const Color(0xFFFFF2D6),
),
SizedBox(height: 8.w), SizedBox(height: 8.w),
TextButton(onPressed: _retry, child: const Text('Retry')), TextButton(onPressed: _retry, child: const Text('Retry')),
], ],
@ -236,7 +214,65 @@ class _RoomGameListSheetState extends State<RoomGameListSheet> {
child: text( child: text(
'No game configured', 'No game configured',
fontSize: 13, fontSize: 13,
textColor: Colors.white70, textColor: const Color(0xFFFFF2D6),
),
);
}
}
class _RoomGameRow extends StatelessWidget {
const _RoomGameRow({
required this.dividerAsset,
required this.items,
required this.launchingGameId,
required this.onTap,
});
final String dividerAsset;
final List<RoomGameListItemModel> items;
final String? launchingGameId;
final ValueChanged<RoomGameListItemModel> onTap;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 108.w,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
right: 0,
top: 50.w,
child: SizedBox(
height: 30.w,
child: Image.asset(dividerAsset, fit: BoxFit.fill),
),
),
Positioned.fill(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(_RoomGameListSheetState._itemsPerRow, (
index,
) {
final item = index < items.length ? items[index] : null;
return Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 6.w),
child:
item == null
? const SizedBox.shrink()
: _RoomGameTile(
item: item,
loading: launchingGameId == item.gameId,
onTap: () => onTap(item),
),
),
);
}),
),
),
],
), ),
); );
} }
@ -265,20 +301,13 @@ class _RoomGameTile extends StatelessWidget {
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
Container( Container(
width: 48.w, width: 52.w,
height: 48.w, height: 52.w,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, color: const Color(0xFFD9D9D9),
gradient: LinearGradient( borderRadius: BorderRadius.circular(5.w),
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xff18F2B1).withValues(alpha: 0.26),
Colors.white.withValues(alpha: 0.08),
],
),
border: Border.all( border: Border.all(
color: Colors.white.withValues(alpha: 0.2), color: Colors.white.withValues(alpha: 0.55),
width: 1.w, width: 1.w,
), ),
), ),
@ -287,10 +316,10 @@ class _RoomGameTile extends StatelessWidget {
), ),
if (loading) if (loading)
Container( Container(
width: 48.w, width: 52.w,
height: 48.w, height: 52.w,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, borderRadius: BorderRadius.circular(5.w),
color: Colors.black.withValues(alpha: 0.45), color: Colors.black.withValues(alpha: 0.45),
), ),
alignment: Alignment.center, alignment: Alignment.center,
@ -305,14 +334,17 @@ class _RoomGameTile extends StatelessWidget {
), ),
], ],
), ),
SizedBox(height: 6.w), SizedBox(height: 8.w),
text( SizedBox(
item.name, height: 18.w,
fontSize: 11, child: text(
textColor: Colors.white, item.name,
fontWeight: FontWeight.w500, fontSize: 10,
textAlign: TextAlign.center, textColor: const Color(0xFF4D3727),
maxLines: 1, fontWeight: FontWeight.w500,
textAlign: TextAlign.center,
maxLines: 1,
),
), ),
], ],
), ),
@ -323,12 +355,16 @@ class _RoomGameTile extends StatelessWidget {
if (item.cover.startsWith('http://') || item.cover.startsWith('https://')) { if (item.cover.startsWith('http://') || item.cover.startsWith('https://')) {
return CustomCachedImage( return CustomCachedImage(
imageUrl: item.cover, imageUrl: item.cover,
width: 48.w, width: 52.w,
height: 48.w, height: 52.w,
fit: BoxFit.cover, fit: BoxFit.cover,
borderRadius: 24.w, borderRadius: 5.w,
); );
} }
return Icon(Icons.sports_esports_outlined, size: 22.w, color: Colors.white); return Icon(
Icons.sports_esports_outlined,
size: 24.w,
color: const Color(0xFF6A6A6A),
);
} }
} }

BIN
sc_images/room/sc_room_game_divider_layer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
sc_images/room/sc_room_game_sheet_frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB