Android Academy · บทเรียน

Composable แรกของคุณ

สร้างและดูตัวอย่างฟังก์ชัน composable

Composable แรกของคุณ เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

Composable แรกของคุณ

composable คือฟังก์ชัน Kotlin ที่มีเครื่องหมาย @Composable กำกับไว้ มาลองเขียนฟังก์ชันที่ทักทายผู้ใช้ด้วยชื่อกัน

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

คำอธิบายประกอบ @Composable

คำอธิบายประกอบ @Composable บอกคอมไพเลอร์ว่าฟังก์ชันนี้สามารถ สร้างส่วนติดต่อผู้ใช้ และเรียกใช้ composables อื่นได้ หากไม่มีคำอธิบายประกอบนี้ คุณจะเรียกใช้ Text Button หรือฟังก์ชันส่วนติดต่อผู้ใช้อื่น ๆ ไม่ได้

หลักการตั้งชื่อ

Composables ที่สร้างส่วนติดต่อผู้ใช้ควรตั้งชื่อเป็นคำนามแบบ PascalCase เช่น Greeting หรือ ProfileCard ซึ่งคล้ายกับคลาส วิธีนี้สื่อว่า “ฟังก์ชันนี้วาดบางสิ่ง” ไม่ใช่ “ฟังก์ชันนี้ส่งคืนค่า”

พารามิเตอร์เป็นตัวกำหนดส่วนติดต่อผู้ใช้

composable รับพารามิเตอร์เช่นเดียวกับฟังก์ชันทั่วไป พารามิเตอร์เหล่านี้คือข้อมูลนำเข้าของคุณ อาร์กิวเมนต์ที่ต่างกันจะสร้างส่วนติดต่อผู้ใช้ที่ต่างกัน

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

การเรียกใช้ Composables

Composables เรียกใช้ได้จากcomposables อื่นเท่านั้น คุณสร้างหน้าจอด้วยการซ้อนการเรียกใช้เข้าด้วยกัน

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

โฮสต์ด้วย setContent

หากต้องการแสดง composables จริง ๆ Activity จะเรียกใช้ setContent { } ใน onCreate แลมบ์ดานี้คือรากของส่วนติดต่อผู้ใช้ Compose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Composables ส่งคืน Unit

โปรดสังเกตว่า composables ไม่ได้ส่งคืนออบเจ็กต์ส่วนติดต่อผู้ใช้ แต่มีชนิดค่าที่ส่งคืนเป็น Unit และสร้างส่วนติดต่อผู้ใช้เป็นผลข้างเคียงจากการถูกเรียกใช้ คุณสร้างส่วนติดต่อผู้ใช้ด้วยการเรียกใช้ ไม่ใช่การส่งคืนค่า

พารามิเตอร์เริ่มต้น

อาร์กิวเมนต์เริ่มต้นของ Kotlin เหมาะกับกรณีนี้มาก คุณสามารถกำหนดค่าเริ่มต้นให้พารามิเตอร์ เพื่อให้ผู้เรียกไม่ต้องระบุพารามิเตอร์นั้น

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

การนำ Composables กลับมาใช้ใหม่

เนื่องจาก composables เป็นฟังก์ชัน จึงนำกลับมาใช้ใหม่ได้ กำหนด Greeting เพียงครั้งเดียว แล้วเรียกใช้ที่ใดก็ได้ด้วยชื่อต่าง ๆ วิธีนี้ช่วยหลีกเลี่ยงการทำซ้ำโค้ดส่วนติดต่อผู้ใช้

ทำให้มีขนาดเล็ก

Composables ที่ดีควรมีขนาดเล็กและมุ่งเน้นงานเดียว composable หนึ่งรายการควรอธิบายส่วนตรรกะหนึ่งส่วนของส่วนติดต่อผู้ใช้ สร้างหน้าจอขนาดใหญ่ด้วยการรวม composables ขนาดเล็กเข้าด้วยกัน

ประกอบทุกอย่างเข้าด้วยกัน

นี่คือ composable แรกที่สมบูรณ์และเชื่อมเข้ากับกิจกรรมแล้ว เมื่อเรียกใช้บนอุปกรณ์ จะแสดงข้อความ “Hello, Compose!”

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

ตรวจสอบอย่างรวดเร็ว

คำอธิบายประกอบ @Composable อนุญาตให้ฟังก์ชันทำอะไร

สรุป

คุณได้เขียน composable แรกของคุณแล้ว โปรดจำไว้ว่า:

กำกับฟังก์ชันส่วนติดต่อผู้ใช้ด้วย @Composable
ใช้ชื่อแบบ PascalCase
พารามิเตอร์คือข้อมูลนำเข้าที่กำหนดรูปร่างของส่วนติดต่อผู้ใช้
setContent { } ใช้โฮสต์ composables ในกิจกรรม

คำถามที่พบบ่อย

บทเรียน “Composable แรกของคุณ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Composable แรกของคุณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Composable แรกของคุณ”

สร้างและดูตัวอย่างฟังก์ชัน composable คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Composable แรกของคุณ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Android Academy