From e3f72a69a990ff8c95c299747e4ae11b802e2d32 Mon Sep 17 00:00:00 2001 From: lxh2875931338 Date: Sat, 31 Oct 2026 23:31:54 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E6=92=AD=E6=94=BE=E9=A1=B5?= =?UTF-8?q?=E9=97=B4=E8=B7=9D=E7=AD=89=E5=AE=BD=20+=20=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E8=A1=8C=E4=B8=8A=E7=A7=BB=2025=20+=20=E8=BF=9B=E5=BA=A6?= =?UTF-8?q?=E6=9D=A1=E9=87=8D=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 标题/歌手/专辑的间距统一为 10，视感更整齐 - 底部留白 70 -> 45（控制行上移 25） - 进度条改用 LayoutBuilder + Positioned 绝对宽度， 背景/缓冲/已播三层顺序明确，不再出现两端亮块 --- lib/pages/player_page.dart | 147 +++++++++++++++++++++---------------- 1 file changed, 82 insertions(+), 65 deletions(-) diff --git a/lib/pages/player_page.dart b/lib/pages/player_page.dart index 38b1bff..d46df71 100644 --- a/lib/pages/player_page.dart +++ b/lib/pages/player_page.dart @@ -308,7 +308,7 @@ class _PlayerPageState extends BaseState { Widget _buildMainPage(AudioService service, Song song, bool isPlaying) { return Padding( // 顶部留 16：与 AppBar/指示器拉开距离，避免封面贴着顶部 - padding: const EdgeInsets.fromLTRB(24, 16, 24, 0), + padding: const EdgeInsets.fromLTRB(24, 24, 24, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -366,17 +366,17 @@ class _PlayerPageState extends BaseState { ), ], ), - const SizedBox(height: 2), + const SizedBox(height: 10), Text( song.artist, - style: TextStyle(fontSize: 14, color: Colors.grey[400]), + style: TextStyle(fontSize: 16, color: Colors.grey[300]), maxLines: 1, overflow: TextOverflow.ellipsis, ), // ---- 信息区（专辑 / 目录）---- if (_album.isNotEmpty || _folder.isNotEmpty) ...[ - const SizedBox(height: 14), + const SizedBox(height: 10), if (_album.isNotEmpty) Text( _album, @@ -409,7 +409,8 @@ class _PlayerPageState extends BaseState { // ---- 控制 ---- _buildControlButtons(service, song, isPlaying), - const SizedBox(height: 20), + // 底部多留 50px：控制行整体上移 + const SizedBox(height: 45), ], ), ); @@ -548,70 +549,86 @@ class _PlayerPageState extends BaseState { Expanded( child: SizedBox( height: 24, - child: Stack( - alignment: Alignment.centerLeft, - children: [ - Container( - height: 3, - decoration: BoxDecoration( - color: Colors.grey[800], - borderRadius: BorderRadius.circular(2), - ), - ), - FractionallySizedBox( + child: LayoutBuilder( + builder: (context, constraints) { + final width = constraints.maxWidth; + return Stack( alignment: Alignment.centerLeft, - widthFactor: bufferProgress.clamp(0.0, 1.0), - child: Container( - height: 3, - decoration: BoxDecoration( - color: const Color(0xFF4A7A7A), - borderRadius: BorderRadius.circular(2), - ), - ), - ), - FractionallySizedBox( - alignment: Alignment.centerLeft, - widthFactor: displayProgress.clamp(0.0, 1.0), - child: Container( - height: 3, - decoration: BoxDecoration( - color: const Color(0xFFB8D4D0), - borderRadius: BorderRadius.circular(2), - ), - ), - ), - Positioned.fill( - child: SliderTheme( - data: SliderTheme.of(context).copyWith( - trackHeight: 0, - activeTrackColor: Colors.transparent, - inactiveTrackColor: Colors.transparent, - thumbColor: Colors.transparent, - overlayColor: Colors.transparent, - thumbShape: const RoundSliderThumbShape( - enabledThumbRadius: 0, + children: [ + // 背景轨道 + Positioned( + left: 0, + right: 0, + top: 10.5, + child: Container( + height: 3, + decoration: BoxDecoration( + color: Colors.grey[800], + borderRadius: BorderRadius.circular(2), + ), ), ), - child: Slider( - value: displayProgress.clamp(0.0, 1.0), - min: 0.0, - max: 1.0, - onChanged: (value) { - setState(() => _dragProgress = value); - }, - onChangeEnd: (value) { - final newPosition = Duration( - milliseconds: - (value * duration.inMilliseconds) - .round(), - ); - service.seekTo(newPosition); - setState(() => _dragProgress = null); - }, + // 已缓冲 + Positioned( + left: 0, + top: 10.5, + child: Container( + width: width * bufferProgress.clamp(0.0, 1.0), + height: 3, + decoration: BoxDecoration( + color: const Color(0xFF4A7A7A), + borderRadius: BorderRadius.circular(2), + ), + ), ), - ), - ), - ], + // 已播放 + Positioned( + left: 0, + top: 10.5, + child: Container( + width: + width * displayProgress.clamp(0.0, 1.0), + height: 3, + decoration: BoxDecoration( + color: const Color(0xFFB8D4D0), + borderRadius: BorderRadius.circular(2), + ), + ), + ), + Positioned.fill( + child: SliderTheme( + data: SliderTheme.of(context).copyWith( + trackHeight: 0, + activeTrackColor: Colors.transparent, + inactiveTrackColor: Colors.transparent, + thumbColor: Colors.transparent, + overlayColor: Colors.transparent, + thumbShape: const RoundSliderThumbShape( + enabledThumbRadius: 0, + ), + ), + child: Slider( + value: displayProgress.clamp(0.0, 1.0), + min: 0.0, + max: 1.0, + onChanged: (value) { + setState(() => _dragProgress = value); + }, + onChangeEnd: (value) { + final newPosition = Duration( + milliseconds: + (value * duration.inMilliseconds) + .round(), + ); + service.seekTo(newPosition); + setState(() => _dragProgress = null); + }, + ), + ), + ), + ], + ); + }, ), ), ),