0Pricing
Jetpack Compose Academy · บทเรียน

setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้

เชื่อมต้นไม้ Composable เข้ากับ Activity

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

เชื่อมต่อ Compose กับ Android

Composable ของคุณต้องมีพื้นที่ทำงาน การเรียกใช้ setContent ภายใน Activity คือสะพานที่ส่งต้นไม้ของส่วนติดต่อผู้ใช้ไปยังหน้าจอ Android 🔗

ภายใน onCreate

คุณเรียกใช้ setContent จาก onCreate ของ Activity นี่คือช่วงเวลาที่ Android แจ้งแอปว่าถึงเวลาต้องแสดงหน้าจอแล้ว

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent { Greeting() }
}

ต้องรับแลมบ์ดา

setContent รับค่า lambda และภายในบล็อกนั้นคุณจะเรียกใช้ Composable ของคุณ ทุกอย่างในวงเล็บปีกกาจะกลายเป็นเนื้อหาของหน้าจอ

setContent {
    Greeting("Compose")
}

แลมบ์ดานั้นเป็น Composable

lambda นั้นเป็น @Composable ขอบเขตหนึ่งด้วย ดังนั้นคุณจึงสามารถเรียกใช้ Composable ใด ๆ ภายในนั้นได้โดยตรง โดยไม่ต้องตั้งค่าเพิ่มเติม

Composable รากเพียงหนึ่งรายการ

แอปที่เป็นระเบียบจะเรียกใช้ Composable ราก เพียงรายการเดียวที่นี่ ซึ่งมักเป็นทั้งแอปหรือธีมของคุณ จากนั้นจึงซ้อนทุกอย่างไว้ภายใน

setContent {
    MyApp()
}

ห่อด้วยธีมของคุณ

แอปส่วนใหญ่จะห่อรากไว้ใน ธีม เพื่อให้สีและแบบอักษรมีผลทั่วทั้งแอป ธีมเป็นเพียง Composable อีกอันที่ครอบส่วนติดต่อผู้ใช้ของคุณ

setContent {
    MyAppTheme {
        MyApp()
    }
}

แทนที่ setContentView

ในระบบ View แบบเดิม คุณเรียกใช้ setContentView พร้อมเค้าโครง XML แต่ Compose เปลี่ยนเป็น setContent พร้อม lambda ของ Composable

สืบทอดจาก ComponentActivity

Activity ที่ใช้ setContent โดยทั่วไปจะสืบทอดจาก ComponentActivity ซึ่งเป็นคลาสพื้นฐานขนาดเล็กที่ Compose ออกแบบมาให้ทำงานด้วย

class MainActivity : ComponentActivity() {
    // onCreate with setContent
}

ตำแหน่งที่ติดตั้งต้นไม้

setContent คือ จุดเริ่มต้น จากตรงนี้ Compose จะสร้าง จัดวาง และวาดต้นไม้ Composable ทั้งหมดที่คุณเรียกใช้ภายใน

เพิ่ม Surface สำหรับพื้นหลัง

การห่อเนื้อหาไว้ใน Surface จะมอบพื้นหลังตามธีมและระดับความสูง ซึ่งมักเป็นลูกตัวแรกภายใต้ธีมของคุณ

setContent {
    MyAppTheme {
        Surface { MyApp() }
    }
}

ใช้ setContent หนึ่งครั้งต่อหน้าจอ

โดยทั่วไปคุณจะเรียกใช้ setContent ครั้งเดียว ต่อ Activity หากต้องการแสดงเนื้อหาอื่น ให้เปลี่ยนสถานะภายในต้นไม้ ไม่ใช่เรียกใช้ setContent อีกครั้ง

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

ตรวจสอบขั้นสุดท้ายว่าจุดเริ่มต้นของส่วนติดต่อผู้ใช้ Compose อยู่ที่ใด

สรุป

ตอนนี้คุณรู้แล้วว่าทุกอย่างเริ่มต้นที่ใด: เรียกใช้ setContent ใน onCreate ส่ง lambda ของ Composable ห่อไว้ในธีมของคุณ แล้ว Compose จะวาดแอปให้ 🎉

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

บทเรียน “setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้”

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

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

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

บทเรียน “setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เขียนฟังก์ชัน @Composable
  2. พรีวิวแบบสดด้วย @Preview
  3. เรียกใช้ Composable จาก Composable
  4. setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้
← กลับไปที่ Jetpack Compose Academy