11package com.ljyh.mei.ui.component.player.component
22
3- import androidx.compose.foundation.layout.Box
43import androidx.compose.animation.core.Spring
54import androidx.compose.animation.core.animateDpAsState
65import androidx.compose.animation.core.spring
76import androidx.compose.foundation.Canvas
8- import androidx.compose.foundation.background
97import androidx.compose.foundation.interaction.MutableInteractionSource
108import androidx.compose.foundation.interaction.collectIsDraggedAsState
119import androidx.compose.foundation.interaction.collectIsPressedAsState
1210import androidx.compose.foundation.layout.Arrangement
11+ import androidx.compose.foundation.layout.Box
1312import androidx.compose.foundation.layout.Column
1413import androidx.compose.foundation.layout.Row
15- import androidx.compose.foundation.layout.Spacer
16- import androidx.compose.foundation.layout.fillMaxSize
1714import androidx.compose.foundation.layout.fillMaxWidth
1815import androidx.compose.foundation.layout.height
1916import androidx.compose.foundation.layout.padding
2017import androidx.compose.foundation.layout.size
21- import androidx.compose.material3.Button
22- import androidx.compose.material3.ButtonDefaults
2318import androidx.compose.material3.ExperimentalMaterial3Api
2419import androidx.compose.material3.MaterialTheme
2520import androidx.compose.material3.Slider
2621import androidx.compose.material3.SliderDefaults
2722import androidx.compose.material3.Text
28- import androidx.compose.material3.darkColorScheme
2923import androidx.compose.runtime.Composable
3024import androidx.compose.runtime.getValue
3125import androidx.compose.runtime.mutableFloatStateOf
32- import androidx.compose.runtime.mutableLongStateOf
3326import androidx.compose.runtime.remember
3427import androidx.compose.runtime.setValue
3528import androidx.compose.ui.Alignment
@@ -40,17 +33,12 @@ import androidx.compose.ui.geometry.Size
4033import androidx.compose.ui.graphics.Color
4134import androidx.compose.ui.graphics.Shadow
4235import androidx.compose.ui.text.font.FontWeight
43- import androidx.compose.ui.text.style.TextOverflow
44- import androidx.compose.ui.tooling.preview.Preview
45- import androidx.compose.ui.unit.Dp
4636import androidx.compose.ui.unit.dp
4737import androidx.compose.ui.unit.sp
4838import com.ljyh.mei.constants.MusicQuality
4939import com.ljyh.mei.constants.MusicQualityKey
5040import com.ljyh.mei.utils.TimeUtils.makeTimeString
5141import com.ljyh.mei.utils.rememberEnumPreference
52- import kotlin.math.max
53- import kotlin.math.min
5442import kotlin.math.roundToLong
5543
5644@OptIn(ExperimentalMaterial3Api ::class )
@@ -232,159 +220,4 @@ fun AppleStyleProgressSlider(
232220 )
233221 }
234222 }
235- }
236-
237- @Preview(showBackground = true , backgroundColor = 0xFF1C1C1E )
238- @Composable
239- fun AppleStyleProgressSliderPreview () {
240- // 设置 MaterialTheme 为深色主题以匹配音乐播放器
241- MaterialTheme (
242- colorScheme = darkColorScheme(
243- primary = Color (0xFF007AFF ),
244- surface = Color (0xFF1C1C1E ),
245- onSurface = Color .White
246- )
247- ) {
248- Box (
249- modifier = Modifier
250- .fillMaxSize()
251- .background(Color (0xFF1C1C1E ))
252- .padding(24 .dp)
253- ) {
254- Column (
255- modifier = Modifier .fillMaxWidth(),
256- verticalArrangement = Arrangement .spacedBy(32 .dp)
257- ) {
258- // 预览1: 正常播放状态 (已播放30秒,总长3分钟)
259- AppleStyleProgressSlider (
260- position = 30_000L , // 30秒
261- duration = 180_000L , // 3分钟
262- onPositionChange = { newPosition ->
263- println (" 位置改变: ${newPosition} " )
264- },
265- modifier = Modifier .fillMaxWidth()
266- )
267-
268- // 预览2: 开始状态 (刚开始播放)
269- AppleStyleProgressSlider (
270- position = 0L ,
271- duration = 180_000L ,
272- onPositionChange = { newPosition ->
273- println (" 位置改变: ${newPosition} " )
274- },
275- modifier = Modifier .fillMaxWidth()
276- )
277-
278- // 预览3: 快结束状态
279- AppleStyleProgressSlider (
280- position = 170_000L ,
281- duration = 180_000L ,
282- onPositionChange = { newPosition ->
283- println (" 位置改变: ${newPosition} " )
284- },
285- modifier = Modifier .fillMaxWidth()
286- )
287-
288- // 预览4: 超长歌曲 (10分钟)
289- AppleStyleProgressSlider (
290- position = 150_000L ,
291- duration = 600_000L ,
292- onPositionChange = { newPosition ->
293- println (" 位置改变: ${newPosition} " )
294- },
295- modifier = Modifier .fillMaxWidth()
296- )
297-
298- // 预览5: 无效时长 (还未加载)
299- AppleStyleProgressSlider (
300- position = 0L ,
301- duration = 0L ,
302- onPositionChange = { newPosition ->
303- println (" 位置改变: ${newPosition} " )
304- },
305- modifier = Modifier .fillMaxWidth()
306- )
307- }
308- }
309- }
310- }
311-
312- // 如果需要单独预览交互效果,可以写一个带状态的预览
313- @Preview(showBackground = true , backgroundColor = 0xFF1C1C1E )
314- @Composable
315- fun AppleStyleProgressSliderInteractivePreview () {
316- var currentPosition by remember { mutableLongStateOf(30_000L ) }
317- val totalDuration = 180_000L // 3分钟
318-
319- MaterialTheme (
320- colorScheme = darkColorScheme(
321- primary = Color (0xFF007AFF ),
322- surface = Color (0xFF1C1C1E ),
323- onSurface = Color .White
324- )
325- ) {
326- Box (
327- modifier = Modifier
328- .fillMaxSize()
329- .background(Color (0xFF1C1C1E ))
330- .padding(24 .dp)
331- ) {
332- Column (
333- modifier = Modifier .fillMaxWidth(),
334- verticalArrangement = Arrangement .Center ,
335- horizontalAlignment = Alignment .CenterHorizontally
336- ) {
337- Text (
338- text = " 交互式预览" ,
339- color = Color .White ,
340- style = MaterialTheme .typography.titleMedium,
341- modifier = Modifier .padding(bottom = 16 .dp)
342- )
343-
344- AppleStyleProgressSlider (
345- position = currentPosition,
346- duration = totalDuration,
347- onPositionChange = { newPosition ->
348- currentPosition = newPosition
349- println (" 位置改变到: ${newPosition} " )
350- },
351- modifier = Modifier .fillMaxWidth()
352- )
353-
354- Spacer (modifier = Modifier .height(24 .dp))
355-
356- // 添加一些控制按钮用于测试
357- Row (
358- modifier = Modifier .fillMaxWidth(),
359- horizontalArrangement = Arrangement .SpaceEvenly
360- ) {
361- Button (
362- onClick = { currentPosition = max(0L , currentPosition - 10_000L ) },
363- colors = ButtonDefaults .buttonColors(
364- containerColor = Color (0xFF3A3A3C )
365- )
366- ) {
367- Text (" ← 10秒" , color = Color .White )
368- }
369-
370- Button (
371- onClick = { currentPosition = min(totalDuration, currentPosition + 10_000L ) },
372- colors = ButtonDefaults .buttonColors(
373- containerColor = Color (0xFF3A3A3C )
374- )
375- ) {
376- Text (" 10秒 →" , color = Color .White )
377- }
378- }
379-
380- Spacer (modifier = Modifier .height(16 .dp))
381-
382- Text (
383- text = " 当前: ${makeTimeString(currentPosition)} / ${makeTimeString(totalDuration)} " ,
384- color = Color .White .copy(alpha = 0.8f ),
385- style = MaterialTheme .typography.bodySmall
386- )
387- }
388- }
389- }
390223}
0 commit comments