{"id":1961,"date":"2026-03-30T12:26:42","date_gmt":"2026-03-30T04:26:42","guid":{"rendered":"https:\/\/badgameshow.com\/fly\/?p=1961"},"modified":"2026-03-30T12:26:42","modified_gmt":"2026-03-30T04:26:42","slug":"jetpack-compose-tutorial","status":"publish","type":"post","link":"https:\/\/badgameshow.com\/fly\/jetpack-compose-tutorial\/","title":{"rendered":"\u3010Android\u3011Jetpack Compose \u5165\u9580\u6559\u5b78 \u57fa\u672c UI \u5143\u4ef6\u7bc4\u4f8b"},"content":{"rendered":"<h1>\u3010Android\u3011Jetpack Compose \u5165\u9580\u6559\u5b78 \u57fa\u672c UI \u5143\u4ef6\u7bc4\u4f8b<\/h1>\n<h4>Jetpack Compose \u662f Google \u63a8\u51fa\u7684\u73fe\u4ee3\u5316 Android UI \u6846\u67b6\uff0c\u63a1\u7528\u5ba3\u544a\u5f0f\u5beb\u6cd5\u53d6\u4ee3\u50b3\u7d71 XML \u4f48\u5c40\uff0c\u5927\u5e45\u7c21\u5316 UI \u958b\u767c\u6d41\u7a0b\u3002\u672c\u7bc7\u6574\u7406\u5e38\u7528\u7684\u57fa\u672c\u5143\u4ef6\u7bc4\u4f8b\uff0c\u8b93\u4f60\u5feb\u901f\u4e0a\u624b\u3002<\/h4>\n<hr \/>\n<h4>\u6587\u7ae0\u76ee\u9304<\/h4>\n<ol>\n<li><a href=\"#a\">\u74b0\u5883\u9700\u6c42<\/a><\/li>\n<li><a href=\"#b\">\u5efa\u7acb Compose \u5c08\u6848<\/a><\/li>\n<li><a href=\"#c\">Text \u6587\u5b57<\/a><\/li>\n<li><a href=\"#d\">Button \u6309\u9215<\/a><\/li>\n<li><a href=\"#e\">TextField \u8f38\u5165\u6846<\/a><\/li>\n<li><a href=\"#f\">Image \u5716\u7247<\/a><\/li>\n<li><a href=\"#g\">Column \/ Row \u6392\u7248<\/a><\/li>\n<li><a href=\"#h\">\u5b8c\u6574\u7bc4\u4f8b<\/a><\/li>\n<\/ol>\n<hr \/>\n<p><a id=\"a\"><\/a><\/p>\n<h4>1. \u74b0\u5883\u9700\u6c42<\/h4>\n<ul>\n<li>Android Studio Hedgehog \u4ee5\u4e0a<\/li>\n<li>Kotlin 1.9+<\/li>\n<li>Compose BOM 2024.02.00 \u4ee5\u4e0a<\/li>\n<\/ul>\n<hr \/>\n<p><a id=\"b\"><\/a><\/p>\n<h4>2. \u5efa\u7acb Compose \u5c08\u6848<\/h4>\n<p>\u5728 <code>build.gradle.kts<\/code> \u52a0\u5165\u4f9d\u8cf4\uff1a<\/p>\n<pre><code class=\"language-kotlin line-numbers\">dependencies {\n    implementation(platform(\"androidx.compose:compose-bom:2024.02.00\"))\n    implementation(\"androidx.compose.ui:ui\")\n    implementation(\"androidx.compose.material3:material3\")\n    implementation(\"androidx.activity:activity-compose:1.8.2\")\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"c\"><\/a><\/p>\n<h4>3. Text \u6587\u5b57<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">@Composable\nfun TextExample() {\n    Text(\n        text = \"Hello Compose!\",\n        fontSize = 24.sp,\n        fontWeight = FontWeight.Bold,\n        color = Color.Blue\n    )\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"d\"><\/a><\/p>\n<h4>4. Button \u6309\u9215<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">@Composable\nfun ButtonExample() {\n    var count by remember { mutableStateOf(0) }\n\n    Button(onClick = { count++ }) {\n        Text(text = \"\u9ede\u64ca\u6b21\u6578\uff1a$count\")\n    }\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"e\"><\/a><\/p>\n<h4>5. TextField \u8f38\u5165\u6846<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">@Composable\nfun TextFieldExample() {\n    var text by remember { mutableStateOf(\"\") }\n\n    TextField(\n        value = text,\n        onValueChange = { text = it },\n        label = { Text(\"\u8acb\u8f38\u5165\u6587\u5b57\") },\n        placeholder = { Text(\"\u8f38\u5165...\") }\n    )\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"f\"><\/a><\/p>\n<h4>6. Image \u5716\u7247<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">@Composable\nfun ImageExample() {\n    Image(\n        painter = painterResource(id = R.drawable.ic_launcher_foreground),\n        contentDescription = \"\u5716\u7247\u63cf\u8ff0\",\n        modifier = Modifier\n            .size(100.dp)\n            .clip(CircleShape)\n    )\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"g\"><\/a><\/p>\n<h4>7. Column \/ Row \u6392\u7248<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">\/\/ \u5782\u76f4\u6392\u5217\n@Composable\nfun ColumnExample() {\n    Column(\n        modifier = Modifier.fillMaxWidth(),\n        horizontalAlignment = Alignment.CenterHorizontally\n    ) {\n        Text(\"\u7b2c\u4e00\u884c\")\n        Text(\"\u7b2c\u4e8c\u884c\")\n        Text(\"\u7b2c\u4e09\u884c\")\n    }\n}\n\n\/\/ \u6c34\u5e73\u6392\u5217\n@Composable\nfun RowExample() {\n    Row(\n        modifier = Modifier.fillMaxWidth(),\n        horizontalArrangement = Arrangement.SpaceEvenly\n    ) {\n        Text(\"\u5de6\")\n        Text(\"\u4e2d\")\n        Text(\"\u53f3\")\n    }\n}\n<\/code><\/pre>\n<hr \/>\n<p><a id=\"h\"><\/a><\/p>\n<h4>8. \u5b8c\u6574\u7bc4\u4f8b<\/h4>\n<pre><code class=\"language-kotlin line-numbers\">@Composable\nfun MainScreen() {\n    var inputText by remember { mutableStateOf(\"\") }\n    var displayText by remember { mutableStateOf(\"\") }\n\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .padding(16.dp),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n        Text(\n            text = \"Jetpack Compose \u7bc4\u4f8b\",\n            fontSize = 24.sp,\n            fontWeight = FontWeight.Bold\n        )\n\n        Spacer(modifier = Modifier.height(16.dp))\n\n        TextField(\n            value = inputText,\n            onValueChange = { inputText = it },\n            label = { Text(\"\u8acb\u8f38\u5165\u6587\u5b57\") }\n        )\n\n        Spacer(modifier = Modifier.height(16.dp))\n\n        Button(onClick = { displayText = inputText }) {\n            Text(\"\u9001\u51fa\")\n        }\n\n        Spacer(modifier = Modifier.height(16.dp))\n\n        if (displayText.isNotEmpty()) {\n            Text(\n                text = \"\u4f60\u8f38\u5165\u4e86\uff1a$displayText\",\n                color = Color.Green\n            )\n        }\n    }\n}\n\n\/\/ \u5728 Activity \u4e2d\u4f7f\u7528\nclass MainActivity : AppCompatActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            MainScreen()\n        }\n    }\n}\n<\/code><\/pre>\n<hr \/>\n<h4>\u76f8\u95dc\u9023\u7d50<\/h4>\n<ul>\n<li><a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/developer.android.com\/jetpack\/compose\" target=\"_blank\" rel=\"noopener\">Jetpack Compose \u5b98\u65b9\u6587\u4ef6<\/a><\/li>\n<li><a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/developer.android.com\/jetpack\/compose\/bom\/bom-mapping\" target=\"_blank\" rel=\"noopener\">Compose BOM \u7248\u672c\u5c0d\u7167\u8868<\/a><\/li>\n<\/ul>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Jetpack Compose \u5165\u9580\u6559\u5b78\uff0c\u5305\u542b Text\u3001Button\u3001TextField\u3001Image\u3001Column\u3001Row \u5b8c\u6574\u7bc4\u4f8b\u7a0b\u5f0f\u78bc\uff0c\u8b93\u4f60\u5feb\u901f\u4e0a\u624b Android \u73fe\u4ee3\u5316 UI \u958b\u767c\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[5,106],"tags":[13,355,353,15,354],"class_list":["post-1961","post","type-post","status-publish","format-standard","hentry","category-android","category-jetpack","tag-android","tag-composable","tag-jetpack-compose","tag-kotlin","tag-ui"],"_links":{"self":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/comments?post=1961"}],"version-history":[{"count":2,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1961\/revisions"}],"predecessor-version":[{"id":1963,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1961\/revisions\/1963"}],"wp:attachment":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/media?parent=1961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/categories?post=1961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/tags?post=1961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}