init

app/src/main/java/com/todottl/MainActivity.kt

@@ -0,0 +1,49 @@
+package com.todottl
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import com.todottl.ui.screen.TodoTTLScreen
+import com.todottl.ui.theme.TodoTTLTheme
+
+class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        enableEdgeToEdge()
+        setContent {
+            TodoTTLTheme {
+                TodoTTLScreen()
+                // Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                //     Greeting(
+                //         name = "Android",
+                //         modifier = Modifier.padding(innerPadding)
+                //     )
+                // }
+            }
+        }
+    }
+}
+
+@Composable
+fun Greeting(name: String, modifier: Modifier = Modifier) {
+    Text(
+        text = "Hello $name!",
+        modifier = modifier
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GreetingPreview() {
+    TodoTTLTheme {
+        Greeting("Android")
+    }
+}

app/src/main/java/com/todottl/data/Constant.kt

@@ -0,0 +1,13 @@
+package com.todottl.data
+
+import com.todottl.R
+
+object Constant {
+    // 图片列表
+    val imageList = listOf(
+        R.mipmap.task,
+        R.mipmap.goal,
+        R.mipmap.event
+    )
+
+}

app/src/main/java/com/todottl/data/RouteConfig.kt

@@ -0,0 +1,7 @@
+package com.todottl.data
+
+object RouteConfig {
+    const val INDEX = "index"
+    const val ADD = "addScreen"
+    const val EDIT = "addScreen/{id}"
+}

app/src/main/java/com/todottl/ui/screen/AddScreen.kt

@@ -0,0 +1,243 @@
+package com.todottl.ui.screen
+
+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.fillMaxSize
+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.material3.Button
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import com.todottl.R
+import com.todottl.data.Constant
+
+@Composable
+fun AddScreen(navController: NavController) {
+    var categoryData by remember { mutableIntStateOf(0) }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFFF1F5F9))
+    ) {
+        Image(
+            painter = painterResource(id = R.mipmap.add_header),
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(96.dp),
+            contentScale = ContentScale.Crop,
+            contentDescription = ""
+        )
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 24.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            IconButton(onClick = { navController.popBackStack() }) {
+                Image(
+                    painter = painterResource(id = R.mipmap.close),
+                    modifier = Modifier.size(48.dp),
+                    contentDescription = ""
+                )
+            }
+            Text(
+                "Add New Task",
+                fontSize = 16.sp,
+                fontWeight = FontWeight.Bold,
+                color = Color.White,
+                modifier = Modifier
+                    .padding(end = 24.dp)
+                    .weight(1f),
+                textAlign = TextAlign.Center
+            )
+        }
+
+        Column(
+            modifier = Modifier
+                .padding(start = 16.dp, end = 16.dp, top = 96.dp)
+                .fillMaxSize()
+        ) {
+            val colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.Unspecified,
+                unfocusedTextColor = Color.Unspecified,
+                disabledTextColor = Color.Gray,
+                errorTextColor = Color.Unspecified,
+                focusedContainerColor = Color.White,
+                unfocusedContainerColor = Color.White,
+                disabledContainerColor = Color.Unspecified,
+                errorContainerColor = Color.Unspecified,
+                cursorColor = Color.Unspecified,
+                errorCursorColor = Color.Unspecified,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                errorIndicatorColor = Color.Red,
+            )
+            FromLabel("Task Title")
+            TextField(
+                placeholder = {
+                    Text(
+                        "Task Title", fontSize = 16.sp, modifier = Modifier.alpha(0.7f)
+                    )
+                },
+                value = "",
+                onValueChange = {},
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(55.dp),
+                shape = RoundedCornerShape(6.dp),
+                colors = colors
+            )
+            Row(
+                modifier = Modifier
+                    .padding(top = 24.dp)
+                    .height(48.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                FromLabel("Category", 0.dp)
+                Spacer(modifier = Modifier.width(24.dp))
+                Constant.imageList.forEachIndexed { index, item ->
+                    var modifier = Modifier
+                        .size(48.dp)
+
+                    if (categoryData == index) {
+                        modifier = Modifier
+                            .size(48.dp)
+                            .border(
+                                width = 2.dp, color = Color.White, shape = RoundedCornerShape(48.dp)
+                            )
+                    }
+                    IconButton(
+                        onClick = {
+                            categoryData = index
+                        }, modifier = modifier
+                    ) {
+                        Image(
+                            painter = painterResource(id = item),
+                            contentDescription = "",
+                            modifier = Modifier.fillMaxSize()
+                        )
+                    }
+                    if (index < Constant.imageList.size - 1) {
+                        Spacer(modifier = Modifier.width(16.dp))
+                    }
+                }
+            }
+            Row {
+                Column(modifier = Modifier.weight(1f)) {
+                    FromLabel("Date")
+                    TextField(placeholder = {
+                        Text(
+                            "Date", fontSize = 16.sp, modifier = Modifier.alpha(0.7f)
+                        )
+                    },
+                        value = "",
+                        onValueChange = {},
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(55.dp),
+                        shape = RoundedCornerShape(6.dp),
+                        colors = colors,
+                        trailingIcon = {
+                            Image(
+                                painter = painterResource(id = R.mipmap.calendar),
+                                contentDescription = "",
+                                modifier = Modifier.size(20.dp)
+                            )
+                        })
+                }
+                Spacer(modifier = Modifier.width(8.dp))
+                Column(modifier = Modifier.weight(1f)) {
+                    FromLabel("Time")
+                    TextField(placeholder = {
+                        Text(
+                            "Time", fontSize = 16.sp, modifier = Modifier.alpha(0.7f)
+                        )
+                    },
+                        value = "",
+                        onValueChange = {},
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(55.dp),
+                        shape = RoundedCornerShape(6.dp),
+                        colors = colors,
+                        trailingIcon = {
+                            Image(
+                                painter = painterResource(id = R.mipmap.clock),
+                                contentDescription = "",
+                                modifier = Modifier.size(20.dp)
+                            )
+                        })
+
+                }
+            }
+            FromLabel("Notes")
+            TextField(
+                placeholder = {
+                    Text(
+                        "Notes", fontSize = 16.sp, modifier = Modifier.alpha(0.7f)
+                    )
+                },
+                value = "",
+                maxLines = 5,
+                onValueChange = {},
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(177.dp),
+                shape = RoundedCornerShape(6.dp),
+                colors = colors
+            )
+        }
+
+        Button(
+            onClick = {
+                // navController.navigate(RouteConfig.ADD)
+            },
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(start = 16.dp, end = 16.dp, bottom = 24.dp)
+                .fillMaxWidth()
+                .height(56.dp),
+            shape = RoundedCornerShape(50.dp)
+        ) {
+            Text(text = "Save")
+        }
+    }
+}
+
+@Composable
+fun FromLabel(title: String, top: Dp = 24.dp) {
+    Text(
+        title,
+        fontSize = 14.sp,
+        fontWeight = FontWeight.Bold,
+        color = Color.Black,
+        modifier = Modifier.padding(top = top, bottom = 8.dp)
+    )
+}

app/src/main/java/com/todottl/ui/screen/EditScreen.kt

@@ -0,0 +1,9 @@
+package com.todottl.ui.screen
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavController
+
+@Composable
+fun EditScreen(navController: NavController, id: Int = 0) {
+
+}

app/src/main/java/com/todottl/ui/screen/IndexScreen.kt

@@ -0,0 +1,181 @@
+package com.todottl.ui.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+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.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+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.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+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
+import androidx.navigation.NavController
+import androidx.navigation.compose.rememberNavController
+import com.todottl.R
+import com.todottl.data.Constant
+import com.todottl.data.RouteConfig
+import com.todottl.ui.theme.TodoTTLTheme
+
+@Composable
+fun IndexScreen(navController: NavController) {
+    var isButtonVisible by remember { mutableStateOf(true) }
+    val listState = rememberLazyListState()
+
+    // 根据滚动状态来更新按钮的可见性
+    LaunchedEffect(remember { derivedStateOf { listState.firstVisibleItemIndex } }) {
+        isButtonVisible = listState.firstVisibleItemIndex == 0
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFFF1F5F9))
+    ) {
+        // 背景图
+        Image(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(222.dp),
+            contentScale = ContentScale.Crop,
+            painter = painterResource(R.mipmap.header),
+            contentDescription = "Header"
+        )
+        Text(
+            "日期",
+            fontSize = 16.sp,
+            fontWeight = FontWeight.Bold,
+            color = Color.White,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(top = 36.dp)
+        )
+
+        Text(
+            "My Todo List",
+            fontSize = 30.sp,
+            fontWeight = FontWeight.Bold,
+            color = Color.White,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(top = 96.dp)
+        )
+
+        Card(
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(top = 158.dp, start = 16.dp, end = 16.dp),
+            colors = CardDefaults.cardColors(containerColor = Color.White),
+            shape = RoundedCornerShape(16.dp)
+        ) {
+            LazyColumn(state = listState) {
+                items(Constant.imageList) {
+                    TodoItem(it)
+                    if (Constant.imageList.indexOf(it) != Constant.imageList.lastIndex) {
+                        HorizontalDivider(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                        )
+                    }
+                }
+            }
+        }
+        if (isButtonVisible) {
+            Button(
+                onClick = {
+                    navController.navigate(RouteConfig.ADD)
+                },
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(start = 16.dp, end = 16.dp, bottom = 24.dp)
+                    .fillMaxWidth()
+                    .height(56.dp),
+                shape = RoundedCornerShape(50.dp)
+            ) {
+                Text(text = "Add New Task")
+            }
+        }
+    }
+}
+
+@Composable
+fun TodoItem(index: Int) {
+    Row(
+        modifier = Modifier
+            .height(80.dp)
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            modifier = Modifier
+                .weight(1f)
+                .alpha(if (index % 2 == 1) 0.5f else 1f),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Image(
+                painter = painterResource(index),
+                modifier = Modifier.size(48.dp),
+                contentDescription = ""
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(start = 12.dp),
+                verticalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    "Today",
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Bold
+                )
+                Text(
+                    "0/0",
+                    fontSize = 14.sp,
+                    modifier = Modifier.alpha(0.7f)
+                )
+            }
+        }
+        Checkbox(
+            checked = index % 2 == 1,
+            modifier = Modifier.size(24.dp),
+            onCheckedChange = {},
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun IndexScreenPreview() {
+    val navController = rememberNavController()
+    TodoTTLTheme {
+        IndexScreen(navController)
+    }
+}

app/src/main/java/com/todottl/ui/screen/TodoTTL.kt

@@ -0,0 +1,19 @@
+package com.todottl.ui.screen
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.todottl.data.RouteConfig
+
+@Composable
+fun TodoTTLScreen() {
+    val navController = rememberNavController()
+    NavHost(navController = navController, startDestination = RouteConfig.INDEX) {
+        composable(RouteConfig.INDEX) { IndexScreen(navController) }
+        composable(RouteConfig.ADD) { AddScreen(navController) }
+        composable("addScreen/{id}") { backStackEntry ->
+            backStackEntry.arguments?.getInt("id")?.let { EditScreen(navController, it) }
+        }
+    }
+}

app/src/main/java/com/todottl/ui/theme/Color.kt

@@ -0,0 +1,11 @@
+package com.todottl.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple80 = Color(0xFFD0BCFF)
+val PurpleGrey80 = Color(0xFFCCC2DC)
+val Pink80 = Color(0xFFEFB8C8)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)

app/src/main/java/com/todottl/ui/theme/Theme.kt

@@ -0,0 +1,58 @@
+package com.todottl.ui.theme
+
+import android.app.Activity
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+
+private val DarkColorScheme = darkColorScheme(
+    primary = Purple80,
+    secondary = PurpleGrey80,
+    tertiary = Pink80
+)
+
+private val LightColorScheme = lightColorScheme(
+    primary = Purple40,
+    secondary = PurpleGrey40,
+    tertiary = Pink40
+
+    /* Other default colors to override
+    background = Color(0xFFFFFBFE),
+    surface = Color(0xFFFFFBFE),
+    onPrimary = Color.White,
+    onSecondary = Color.White,
+    onTertiary = Color.White,
+    onBackground = Color(0xFF1C1B1F),
+    onSurface = Color(0xFF1C1B1F),
+    */
+)
+
+@Composable
+fun TodoTTLTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    dynamicColor: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    val colorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            val context = LocalContext.current
+            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+        }
+
+        darkTheme -> DarkColorScheme
+        else -> LightColorScheme
+    }
+
+    MaterialTheme(
+        colorScheme = colorScheme,
+        typography = Typography,
+        content = content
+    )
+}

app/src/main/java/com/todottl/ui/theme/Type.kt

@@ -0,0 +1,34 @@
+package com.todottl.ui.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    bodyLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    )
+    /* Other default text styles to override
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
+    )
+    */
+)