安卓软件开发:Jetpack Compose中常见的核心概念总结-4

原创

Nimyears

修改于 2024-11-04 17:13:52

1050

文章被收录于专栏：JetpackCompose M3JetpackCompose M3 玩转全栈

16. 刷新布局

PullRefresh - 下拉刷新

val pullRefreshState = rememberPullRefreshState(isRefreshing, { /* TODO */ })

Box(
    modifier = Modifier
        .fillMaxSize()
        .pullRefresh(pullRefreshState)
) {
    LazyColumn {
        items(100) { index ->
            Text("Item $index", modifier = Modifier.padding(16.dp))
        }
    }
}

pullRefresh: 添加下拉刷新的功能。

17. 对话框和弹窗

Popup - 弹出框

var showPopup by remember { mutableStateOf(false) }

Box {
    Button(onClick = { showPopup = true }) {
        Text("Show Popup")
    }

    if (showPopup) {
        Popup(alignment = Alignment.Center) {
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .background(Color.White)
                    .clickable { showPopup = false }
            ) {
                Text("This is a popup")
            }
        }
    }
}

Popup: 创建一个弹出框，可以用于显示临时内容。

18. 调试与重组

Debug Recomposition - 重组调试

@Composable
fun DebugComposable() {
    val count = remember { mutableStateOf(0) }
    Log.d("DebugComposable", "Recomposition count: ${count.value}")
    Button(onClick = { count.value++ }) {
        Text("Click me")
    }
}

Log.d: 调试重组次数，帮助理解组件的重组行为。

remember - 记住状态

val state = remember { mutableStateOf(0) }

remember: 记住组件的状态，使重组过程中保持不变。

19. 工具栏和顶部AppBar

TopAppBar - 顶部工具栏

TopAppBar(
    title = { Text("Nim App") },
    navigationIcon = {
        IconButton(onClick = { /* Navigate back */ }) {
            Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
        }
    },
    actions = {
        IconButton(onClick = { /* Perform action */ }) {
            Icon(Icons.Filled.Settings, contentDescription = "Settings")
        }
    }
)

TopAppBar: 创建一个包含标题、导航图标和动作图标的顶部应用栏。

Scaffold - 脚手架布局

Scaffold(
    topBar = {
        TopAppBar(title = { Text("Home") })
    },
    content = { padding ->
        Box(modifier = Modifier.padding(padding)) {
            Text("Content goes here")
        }
    }
)

Scaffold: 提供应用布局结构，包括顶部工具栏、内容和底部导航栏等区域。

20. 对话框和模态窗口

AlertDialog - 警告对话框

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text("Alert") },
        text = { Text("This is an alert dialog") },
        confirmButton = {
            Button(onClick = { showDialog = false }) {
                Text("OK")
            }
        },
        dismissButton = {
            Button(onClick = { showDialog = false }) {
                Text("Cancel")
            }
        }
    )
}