Android 开发：基于Scaffold的电子邮件App

1 MainActivity.kt

kotlin 复制代码

package com.jinxuliang.mymailapp

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.jinxuliang.mymailapp.components.*
import com.jinxuliang.mymailapp.model.DrawMenuData
import com.jinxuliang.mymailapp.ui.theme.MyMailAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyMailAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MyMailApp()
                }
            }
        }
    }
}

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun MyMailApp() {

    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()
    val scrollState = rememberScrollState()
    val openDialog=remember{
        mutableStateOf(false)
    }

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { HomeAppBar(scaffoldState, coroutineScope,openDialog) },
        drawerContent = {
            DrawerMenu(scrollState)
        },
        bottomBar = {
            HomeBottomMenu()
        },
        floatingActionButton = {
            MailFab()
        }) {
        MailList(it,scrollState)
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyMailAppTheme {
        MyMailApp()
    }
}

这段代码是一个典型的 Jetpack Compose + Material Scaffold 架构应用入口 。

基础知识使用Scaffold脚手架函数

一、整体架构

入口是：

复制代码

MainActivity → setContent → MyMailAppTheme → MyMailApp()

核心 UI 在 MyMailApp()：

👉 用了 Scaffold 布局骨架

复制代码

Scaffold
 ├── TopBar（顶部栏）
 ├── Drawer（侧边菜单）
 ├── BottomBar（底部导航）
 ├── FAB（悬浮按钮）
 └── Content（主内容 MailList）

二、重点：Scaffold 的作用

Scaffold 是 Material 设计里一个"页面模板容器"，帮你管理常见布局：

kotlin 复制代码

Scaffold(
    scaffoldState = scaffoldState,
    topBar = { HomeAppBar(...) },
    drawerContent = { DrawerMenu(...) },
    bottomBar = { HomeBottomMenu() },
    floatingActionButton = { MailFab() }
) {
    MailList(it, scrollState)
}

👉 可以理解为：

"一个页面壳 + 你往里面填模块"

三、几个关键状态（重点理解）

1️⃣ scaffoldState

kotlin 复制代码

val scaffoldState = rememberScaffoldState()

作用：

控制 Drawer（开/关）
控制 Snackbar

👉 比如：

kotlin 复制代码

scaffoldState.drawerState.open()

2️⃣ coroutineScope

kotlin 复制代码

val coroutineScope = rememberCoroutineScope()

为什么要它？

👉 因为打开 Drawer 是 挂起函数（suspend）

kotlin 复制代码

coroutineScope.launch {
    scaffoldState.drawerState.open()
}

3️⃣ scrollState

kotlin 复制代码

val scrollState = rememberScrollState()

用于：

Drawer 滚动
MailList 滚动

4️⃣ openDialog（状态提升）

kotlin 复制代码

val openDialog = remember {
    mutableStateOf(false)
}

👉 用来控制弹窗是否显示

关键点：

用 remember 保存状态
用 mutableStateOf 实现响应式

四、参数传递

看这一句：

kotlin 复制代码

topBar = { HomeAppBar(scaffoldState, coroutineScope, openDialog) }

👉 说明：

AppBar 可以控制 Drawer
AppBar 可以打开 Dialog

👉 这是 状态提升（State Hoisting）

五、Scaffold content 里的 it 是什么？

kotlin 复制代码

MailList(it, scrollState)

这个 it 是：

👉 PaddingValues

用于避免内容被遮挡：

TopBar
BottomBar
FAB

正确写法应该在 MailList 里：

kotlin 复制代码

Modifier.padding(it)

六、你的代码结构（总结图）

复制代码

MyMailApp
 ├── 状态
 │    ├── scaffoldState
 │    ├── coroutineScope
 │    ├── scrollState
 │    └── openDialog
 │
 └── Scaffold
      ├── HomeAppBar（控制 Drawer + Dialog）
      ├── DrawerMenu（侧边栏）
      ├── HomeBottomMenu（底部）
      ├── MailFab（悬浮按钮）
      └── MailList（主内容）

2 MocData.kt

kotlin 复制代码

package com.jinxuliang.mymailapp

import com.jinxuliang.mymailapp.model.MailData

val mailList= listOf(
    MailData(
    mailId = 1,
    userName = "1userName",
    subject = "1Subject",
    body = "1body",
    timeStamp = "22:22"
),
    MailData(
        mailId = 2,
        userName = "2userName",
        subject = "2Subject",
        body = "2body",
        timeStamp = "22:22"
    )
,MailData(
        mailId = 3,
        userName = "3userName",
        subject = "3Subject",
        body = "3body",
        timeStamp = "22:22"
    )
,MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    )
    ,MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    ),MailData(
        mailId = 4,
        userName = "4userName",
        subject = "4Subject",
        body = "4body",
        timeStamp = "22:22"
    )
)

kotlin 复制代码

val mailList = listOf(...)

👉 定义了一个 不可变列表（List）

用途通常是：

kotlin 复制代码

LazyColumn {
    items(mailList) { mail ->
        MailItem(mail)
    }
}

👉 相当于"假数据 / Mock 数据"