From 1e6f6764f2dec065fcb88f7496b6e77a40026702 Mon Sep 17 00:00:00 2001 From: AllenTom Date: Sat, 13 Jul 2024 22:30:34 +0800 Subject: [PATCH] add:comment modal --- .../java/com/aiosman/riderpro/CommentModal.kt | 119 ++++++++++++++++++ .../java/com/aiosman/riderpro/PagingSimple.kt | 19 ++- app/src/main/res/drawable/rider_pro_send.xml | 22 ++++ 3 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/com/aiosman/riderpro/CommentModal.kt create mode 100644 app/src/main/res/drawable/rider_pro_send.xml diff --git a/app/src/main/java/com/aiosman/riderpro/CommentModal.kt b/app/src/main/java/com/aiosman/riderpro/CommentModal.kt new file mode 100644 index 0000000..04f9696 --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/CommentModal.kt @@ -0,0 +1,119 @@ +package com.aiosman.riderpro + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +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.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.material3.HorizontalDivider +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.res.painterResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + + +@Preview +@Composable +fun CommentModalContent() { + Column( + modifier = Modifier + + ) { + Box( + modifier = Modifier + .fillMaxWidth() + .padding(start = 16.dp, bottom = 16.dp, end = 16.dp) + + ) { + Text( + "评论", + fontSize = 20.sp, + fontWeight = FontWeight.Bold, + modifier = Modifier.align(Alignment.Center) + ) + } + + HorizontalDivider( + color = Color(0xFFF7F7F7) + ) + Box( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp) + .weight(1f) + ) { + CommentsSection() + } + Box( + modifier = Modifier + .fillMaxWidth() + .background(Color(0xfff7f7f7)) + .padding(horizontal = 16.dp) + .height(64.dp) + ) { + Row( + modifier = Modifier + .fillMaxWidth() + .align(Alignment.Center), + verticalAlignment = Alignment.CenterVertically + ) { + // rounded + Box( + modifier = Modifier + .fillMaxWidth() + + + .weight(1f) + .clip(RoundedCornerShape(20.dp)) + .background(Color(0xffe5e5e5)) + .padding(horizontal = 16.dp, vertical = 12.dp) + + ) { + BasicTextField( + value = "", + onValueChange = { }, + modifier = Modifier + .fillMaxWidth(), + textStyle = TextStyle( + color = Color.Black, + fontWeight = FontWeight.Normal + ) + ) + + } + Spacer(modifier = Modifier.width(16.dp)) + Image( + painter = painterResource(id = R.drawable.rider_pro_send), + contentDescription = "Send", + modifier = Modifier + .size(32.dp) + + ) + } + + + } + + + + } + +} + + diff --git a/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt b/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt index 6b7ca23..d1fc81a 100644 --- a/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt +++ b/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt @@ -24,11 +24,16 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Build import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.LocalTextStyle +import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -267,8 +272,18 @@ fun MomentOperateBtn(@DrawableRes icon: Int, count: String) { } } +@OptIn(ExperimentalMaterial3Api::class) @Composable fun MomentBottomOperateRowGroup(modifier: Modifier) { + var showCommentModal by remember { mutableStateOf(false) } + if (showCommentModal) { + ModalBottomSheet( + onDismissRequest = { showCommentModal = false }, + containerColor = Color.White + ) { + CommentModalContent() + } + } Row( modifier = Modifier .fillMaxWidth() @@ -281,7 +296,9 @@ fun MomentBottomOperateRowGroup(modifier: Modifier) { MomentOperateBtn(icon = R.drawable.rider_pro_like, count = "21") } Box( - modifier = modifier, + modifier = modifier.clickable { + showCommentModal = true + }, contentAlignment = Alignment.Center ) { MomentOperateBtn(icon = R.drawable.rider_pro_moment_comment, count = "43") diff --git a/app/src/main/res/drawable/rider_pro_send.xml b/app/src/main/res/drawable/rider_pro_send.xml new file mode 100644 index 0000000..8ad71a7 --- /dev/null +++ b/app/src/main/res/drawable/rider_pro_send.xml @@ -0,0 +1,22 @@ + + + + + + +