添加新的表单文本输入组件 FormTextInput2，包含错误提示和动态显示功能；新增图标和图片资源。

2025-08-05 13:56:03 +08:00
parent 29d2bb753f
commit 3e544844bb
22 changed files with 712 additions and 116 deletions
--- a/app/src/main/java/com/aiosman/ravenow/ui/composables/DragAndDrop.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/composables/DragAndDrop.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyGridItemInfo
 import androidx.compose.foundation.lazy.grid.LazyGridItemScope
@@ -18,6 +19,7 @@ import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -26,6 +28,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.graphicsLayer
@@ -58,12 +61,12 @@ fun <T : Any> DraggableGrid(
    val dragDropState =
        rememberGridDragDropState(gridState, onMove, onDragModeStart, onDragModeEnd, lockedIndices)
    LazyVerticalGrid(
-        columns = GridCells.Fixed(3),
-        modifier = Modifier.dragContainer(dragDropState),
+        columns = GridCells.Fixed(5),
+        modifier = Modifier.dragContainer(dragDropState).padding(horizontal = 8.dp),
        state = gridState,
-        contentPadding = PaddingValues(16.dp),
-        verticalArrangement = Arrangement.spacedBy(16.dp),
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        contentPadding = PaddingValues(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),

        ) {
        itemsIndexed(items, key = { _, item ->
@@ -122,7 +125,7 @@ fun LazyGridItemScope.DraggableItem(
    } else {
        Modifier.animateItemPlacement()
    }
-    Box(modifier = modifier.then(draggingModifier), propagateMinConstraints = true) {
+    Box(modifier = modifier.then(draggingModifier).clip(RoundedCornerShape(8.dp)), propagateMinConstraints = true) {
        content(dragging)
    }
 }
--- a/app/src/main/java/com/aiosman/ravenow/ui/composables/Image.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/composables/Image.kt
@@ -57,10 +57,29 @@ fun CustomAsyncImage(

    val imageLoader = getImageLoader(context ?: localContext)

+    // 处理 imageUrl 为 null 的情况
+    if (imageUrl == null|| imageUrl == "") {
+        // 如果 imageUrl 为 null 且有占位符，则直接显示占位符
+        if (placeholderRes != null) {
+            androidx.compose.foundation.Image(
+                painter = androidx.compose.ui.res.painterResource(placeholderRes),
+                contentDescription = contentDescription,
+                modifier = modifier,
+                contentScale = contentScale
+            )
+            return
+        }
+    }
    AsyncImage(
        model = ImageRequest.Builder(context ?: localContext)
            .data(imageUrl)
            .crossfade(200)
+            .apply {
+                // 设置占位符图片
+                if (placeholderRes != null) {
+                    placeholder(placeholderRes)
+                }
+            }
            .build(),
        contentDescription = contentDescription,
        modifier = modifier,
--- a/app/src/main/java/com/aiosman/ravenow/ui/composables/form/FormTextInput.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/composables/form/FormTextInput.kt
@@ -23,6 +23,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
@@ -32,6 +33,9 @@ import androidx.compose.ui.unit.sp
 import com.aiosman.ravenow.LocalAppTheme
 import com.aiosman.ravenow.R

+/**
+ * 水平布局的输入框
+ */
@Composable
 fun FormTextInput(
    modifier: Modifier = Modifier,
@@ -39,6 +43,7 @@ fun FormTextInput(
    label: String? = null,
    error: String? = null,
    hint: String? = null,
+    background: Color? = null,
    onValueChange: (String) -> Unit
 ) {
    val AppColors = LocalAppTheme.current
@@ -48,7 +53,7 @@ fun FormTextInput(
        Row(
            modifier = Modifier.fillMaxWidth()
                .clip(RoundedCornerShape(16.dp))
-                .background(AppColors.inputBackground)
+                .background(background ?: AppColors.inputBackground)
                .let {
                    if (error != null) {
                        it.border(1.dp, AppColors.error, RoundedCornerShape(24.dp))
@@ -66,7 +71,7 @@ fun FormTextInput(
                        .widthIn(100.dp),
                    style = TextStyle(
                        fontSize = 16.sp,
-                        fontWeight = FontWeight.Bold,
+                        fontWeight = FontWeight.W600,
                        color = AppColors.text
                    )
                )
--- a/app/src/main/java/com/aiosman/ravenow/ui/composables/form/FormTextInput2.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/composables/form/FormTextInput2.kt
@@ -0,0 +1,142 @@
+package com.aiosman.ravenow.ui.composables.form
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.aiosman.ravenow.LocalAppTheme
+import com.aiosman.ravenow.R
+
+/**
+ * 垂直布局的输入框
+ */
+@Composable
+fun FormTextInput2(
+    modifier: Modifier = Modifier,
+    value: String,
+    label: String? = null,
+    error: String? = null,
+    hint: String? = null,
+    background: Color? = null,
+    onValueChange: (String) -> Unit
+) {
+    val AppColors = LocalAppTheme.current
+    Column(
+        modifier = modifier.height(150.dp)
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth()
+                .clip(RoundedCornerShape(16.dp))
+                .background(background ?: AppColors.inputBackground)
+                .let {
+                    if (error != null) {
+                        it.border(1.dp, AppColors.error, RoundedCornerShape(24.dp))
+                    } else {
+                        it
+                    }
+                }
+                .padding(17.dp),
+
+        ) {
+            label?.let {
+                Text(
+                    text = it,
+                    modifier = Modifier
+                        .widthIn(100.dp),
+                    style = TextStyle(
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.W600,
+                        color = AppColors.text
+                    )
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(top = 8.dp)
+            ) {
+                if (value.isEmpty()) {
+                    Text(
+                        text = hint ?: "",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            fontWeight = FontWeight.Normal,
+                            color = AppColors.inputHint
+                        )
+                    )
+                }
+
+                BasicTextField(
+                    maxLines = 5,
+                    value = value,
+                    onValueChange = {
+                        onValueChange(it)
+                    },
+                    textStyle = TextStyle(
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.Normal,
+                        color = AppColors.text,
+                        lineHeight = 20.sp
+                    ),
+                    cursorBrush = SolidColor(AppColors.text),
+                )
+
+            }
+
+
+
+        }
+        Spacer(modifier = Modifier.height(4.dp))
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            AnimatedVisibility(
+                visible = error != null,
+                enter = fadeIn(),
+                exit = fadeOut()
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Image(
+                        painter = painterResource(id = R.mipmap.rider_pro_input_error),
+                        contentDescription = "Error",
+                        modifier = Modifier.size(8.dp)
+                    )
+                    Spacer(modifier = Modifier.size(4.dp))
+                    AnimatedContent(targetState = error) { targetError ->
+                        Text(targetError ?: "", color = AppColors.error, fontSize = 12.sp)
+                    }
+                }
+            }
+        }
+    }
+
+}