|
@@ -1,40 +1,128 @@
|
|
|
package com.zaojiao.app.feat.home.course
|
|
|
|
|
|
import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.layout.Box
|
|
|
+import androidx.compose.foundation.layout.Column
|
|
|
import androidx.compose.foundation.layout.PaddingValues
|
|
|
import androidx.compose.foundation.layout.fillMaxWidth
|
|
|
-import androidx.compose.foundation.layout.height
|
|
|
import androidx.compose.foundation.layout.padding
|
|
|
+import androidx.compose.foundation.layout.size
|
|
|
+import androidx.compose.foundation.layout.width
|
|
|
+import androidx.compose.foundation.layout.wrapContentHeight
|
|
|
import androidx.compose.foundation.lazy.LazyRow
|
|
|
+import androidx.compose.foundation.lazy.rememberLazyListState
|
|
|
+import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
import androidx.compose.material3.Text
|
|
|
import androidx.compose.runtime.Composable
|
|
|
+import androidx.compose.runtime.derivedStateOf
|
|
|
+import androidx.compose.runtime.getValue
|
|
|
+import androidx.compose.runtime.remember
|
|
|
+import androidx.compose.ui.Alignment
|
|
|
+import androidx.compose.ui.BiasAlignment
|
|
|
import androidx.compose.ui.Modifier
|
|
|
-import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.layout.ContentScale
|
|
|
import androidx.compose.ui.text.TextStyle
|
|
|
+import androidx.compose.ui.unit.Dp
|
|
|
import androidx.compose.ui.unit.dp
|
|
|
import androidx.compose.ui.unit.sp
|
|
|
+import com.zaojiao.app.feat.home.R
|
|
|
+import com.zaojiao.component.common.Colors
|
|
|
+import com.zaojiao.component.common.Images
|
|
|
+import com.zaojiao.component.common.Spacer
|
|
|
+import com.zaojiao.component.common.list
|
|
|
|
|
|
@Composable
|
|
|
-fun HomeCourseCategory() {
|
|
|
- LazyRow(
|
|
|
+fun HomeCourseCategory(
|
|
|
+ itemWidth: Dp
|
|
|
+) {
|
|
|
+ val state = rememberLazyListState()
|
|
|
+
|
|
|
+ Column(
|
|
|
modifier = Modifier
|
|
|
.padding(vertical = 14.dp)
|
|
|
- .height(64.dp)
|
|
|
- .fillMaxWidth(),
|
|
|
- contentPadding = PaddingValues(horizontal = 16.dp)
|
|
|
+ .fillMaxWidth()
|
|
|
+ .wrapContentHeight(),
|
|
|
+ horizontalAlignment = Alignment.CenterHorizontally,
|
|
|
) {
|
|
|
- items(100) { index ->
|
|
|
- Text(
|
|
|
- text = "$index",
|
|
|
+
|
|
|
+ LazyRow(
|
|
|
+ state = state,
|
|
|
+ modifier = Modifier
|
|
|
+ .wrapContentHeight()
|
|
|
+ .fillMaxWidth(),
|
|
|
+ contentPadding = PaddingValues(horizontal = 16.dp)
|
|
|
+ ) {
|
|
|
+ list(
|
|
|
+ 10,
|
|
|
+ itemContent = { index ->
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .width(itemWidth)
|
|
|
+ .wrapContentHeight(),
|
|
|
+ horizontalAlignment = Alignment.CenterHorizontally,
|
|
|
+ ) {
|
|
|
+ Images.Resource(
|
|
|
+ id = R.mipmap.default_avatar,
|
|
|
+ modifier = Modifier.size(42.dp),
|
|
|
+ contentScale = ContentScale.Fit,
|
|
|
+ )
|
|
|
+ Spacer(height = 3.dp)
|
|
|
+ Text(
|
|
|
+ text = "$index", style = TextStyle(
|
|
|
+ fontSize = 13.sp,
|
|
|
+ lineHeight = 18.sp,
|
|
|
+ color = Colors.FF333333,
|
|
|
+ )
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemSeparation = {
|
|
|
+ Box(modifier = Modifier.width(20.dp))
|
|
|
+ },
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ val percent by remember {
|
|
|
+ derivedStateOf {
|
|
|
+ if (state.layoutInfo.viewportEndOffset == 0) {
|
|
|
+ 0f
|
|
|
+ } else {
|
|
|
+ var before = 0f
|
|
|
+
|
|
|
+ val items = state.layoutInfo.visibleItemsInfo
|
|
|
+ for (i in 0 until state.firstVisibleItemIndex) {
|
|
|
+ before += items[i].size.toFloat()
|
|
|
+ }
|
|
|
+
|
|
|
+ before += state.firstVisibleItemScrollOffset.toFloat()
|
|
|
+ before / state.layoutInfo.viewportEndOffset.toFloat()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (5 >= 5) {
|
|
|
+ Spacer(height = 8.dp)
|
|
|
+
|
|
|
+ Box(
|
|
|
modifier = Modifier
|
|
|
- .background(color = Color.Red)
|
|
|
- .fillMaxWidth()
|
|
|
- .height(48.dp),
|
|
|
- style = TextStyle(
|
|
|
- fontSize = 16.sp,
|
|
|
- color = Color.Yellow,
|
|
|
+ .background(
|
|
|
+ color = Colors.from("#FFC4DCFF"),
|
|
|
+ shape = RoundedCornerShape(2.dp),
|
|
|
+ )
|
|
|
+ .size(width = 23.dp, height = 4.dp)
|
|
|
+ ) {
|
|
|
+ Box(
|
|
|
+ modifier = Modifier
|
|
|
+ .align(
|
|
|
+ BiasAlignment(-1f + percent * 2, 0f)
|
|
|
+ )
|
|
|
+ .background(
|
|
|
+ color = Colors.from("#FF2975E5"),
|
|
|
+ shape = RoundedCornerShape(2.dp),
|
|
|
+ )
|
|
|
+ .size(width = 11.5.dp, height = 4.dp)
|
|
|
)
|
|
|
- )
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+}
|