Kotlin สำหรับ Jetpack Compose

Jetpack Compose สร้างขึ้นจาก Kotlin ในบางกรณี Kotlin มีนิพจน์พิเศษที่ช่วยให้เขียนโค้ด Compose ที่ดีได้ง่ายขึ้น หากคุณคิดในอีก ภาษาโปรแกรม แล้วแปลภาษานั้นเป็นภาษา Kotlin ด้วยความคิด มีแนวโน้มที่จะพลาดประสิทธิภาพบางอย่างของ Compose และคุณอาจพบ โค้ด Kotlin ที่เขียนด้วยสำนวนเข้าใจยาก การทําความคุ้นเคยกับรูปแบบของ Kotlin มากขึ้นจะช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดเหล่านั้นได้

อาร์กิวเมนต์เริ่มต้น

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

ตัวอย่างเช่น สมมติว่าคุณต้องการเขียนฟังก์ชันที่วาดสี่เหลี่ยมจัตุรัส ฟังก์ชันดังกล่าวอาจมีพารามิเตอร์ที่ต้องระบุเพียงรายการเดียว ซึ่งก็คือ sideLength ที่ระบุความยาวของด้านแต่ละด้าน ซึ่งอาจมีพารามิเตอร์ที่ไม่บังคับหลายรายการ เช่น ความหนา edgeColor และอื่นๆ หากผู้โทรไม่ได้ระบุข้อมูลดังกล่าว ใช้ค่าเริ่มต้น สำหรับภาษาอื่น คุณอาจเขียนว่า หลายฟังก์ชัน ได้แก่

// We don't need to do this in Kotlin!
void drawSquare(int sideLength) { }

void drawSquare(int sideLength, int thickness) { }

void drawSquare(int sideLength, int thickness, Color edgeColor) { }
JavaSnippets.java

ใน Kotlin คุณจะเขียนฟังก์ชันเดียวและระบุค่าเริ่มต้นสําหรับ อาร์กิวเมนต์ดังนี้

fun drawSquare(
    sideLength: Int,
    thickness: Int = 2,
    edgeColor: Color = Color.Black
) {
}
KotlinSnippets.kt

นอกจากจะช่วยให้คุณไม่ต้องเขียนฟังก์ชันซ้ำซ้อนหลายรายการแล้ว ฟีเจอร์นี้ยังช่วยให้โค้ดอ่านง่ายขึ้นมาก หากผู้เรียกใช้ไม่ได้ระบุค่าสำหรับอาร์กิวเมนต์ แสดงว่าผู้เรียกใช้ยินดีที่จะใช้ค่าเริ่มต้น นอกจากนี้ พารามิเตอร์ที่มีชื่อยังช่วยให้เห็นสิ่งที่เกิดขึ้นได้ง่ายขึ้น หากคุณดูโค้ดและเห็นการเรียกฟังก์ชันแบบนี้ คุณอาจ ดูความหมายของพารามิเตอร์โดยไม่ต้องตรวจสอบโค้ด drawSquare():

drawSquare(30, 5, Color.Red);
JavaSnippets.java

ในทางตรงกันข้าม โค้ดนี้เป็นการบันทึกด้วยตนเอง:

drawSquare(sideLength = 30, thickness = 5, edgeColor = Color.Red)
KotlinSnippets.kt

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

Text(text = "Hello, Android!")
KotlinSnippets.kt

โค้ดดังกล่าวให้ผลลัพธ์เหมือนกับโค้ดต่อไปนี้ซึ่งมีรายละเอียดมากกว่ามาก ซึ่งมีการกําหนดพารามิเตอร์ Text เพิ่มเติมอย่างชัดเจน

Text(
    text = "Hello, Android!",
    color = Color.Unspecified,
    fontSize = TextUnit.Unspecified,
    letterSpacing = TextUnit.Unspecified,
    overflow = TextOverflow.Clip
)
KotlinSnippets.kt

ซึ่งไม่เพียงเป็นข้อมูลโค้ดชิ้นแรกที่อ่านง่ายขึ้นและยังอ่านง่ายขึ้น การทำเอกสารด้วยตนเอง การระบุเฉพาะพารามิเตอร์ text หมายความว่าคุณกําลังบันทึกว่าต้องการใช้ค่าเริ่มต้นสําหรับพารามิเตอร์อื่นๆ ทั้งหมด ในทางตรงกันข้าม ตัวอย่างที่สองแสดงว่าคุณต้องการกำหนดค่าสำหรับส่วนขยายเหล่านั้น พารามิเตอร์อื่นๆ แม้ว่าค่าที่คุณตั้งจะเป็นค่าเริ่มต้นสำหรับ ฟังก์ชัน

ฟังก์ชันลำดับสูงกว่าและนิพจน์แลมบ์ดา

Kotlin รองรับฟังก์ชันระดับสูง ซึ่งเป็นฟังก์ชันที่รับฟังก์ชันอื่นๆ เป็นพารามิเตอร์ การเขียนต่อยอดมาจากวิธีการนี้ สำหรับ ตัวอย่างเช่น Button ฟังก์ชัน Composable จะมีพารามิเตอร์ lambda onClick ค่า ของพารามิเตอร์นั้นคือฟังก์ชัน ซึ่งปุ่มจะเรียกใช้เมื่อผู้ใช้คลิกปุ่มนั้น

Button(
    // ...
    onClick = myClickFunction
)
// ...
KotlinSnippets.kt

ฟังก์ชันระดับสูงจะจับคู่กับนิพจน์ LAMBDA ซึ่งเป็นนิพจน์ที่ประเมินเป็นฟังก์ชัน หากต้องการใช้ฟังก์ชันเพียงครั้งเดียว คุณไม่จำเป็นต้องกำหนดฟังก์ชันนั้นที่อื่นเพื่อส่งไปยังฟังก์ชันระดับสูงขึ้น แต่คุณสามารถกำหนดฟังก์ชันนั้นในทันทีด้วยนิพจน์แลมบ์ดา ตัวอย่างก่อนหน้านี้จะถือว่ามีการกําหนด myClickFunction() ไว้ที่อื่น แต่หากใช้ฟังก์ชันนั้นที่นี่เท่านั้น ก็กำหนดฟังก์ชันในบรรทัดนั้นด้วยนิพจน์ Lambda ได้เลย ดังนี้

Button(
    // ...
    onClick = {
        // do something
        // do something else
    }
) { /* ... */ }
KotlinSnippets.kt

แลมบ์ดาที่ตามหลัง

Kotlin มีไวยากรณ์พิเศษสำหรับการเรียกใช้ฟังก์ชันที่มีลำดับสูงกว่าซึ่งคำสั่งท้ายสุด คือ lambda ถ้าอยากส่งนิพจน์แลมบ์ดาว่า คุณสามารถใช้ trailing lambda แทนที่จะใส่นิพจน์ lambda ภายในวงเล็บ คุณก็ใส่ข้อความ หลังจากนั้น นี่เป็นกรณีทั่วไปในการเขียน คุณจึงต้องทำความคุ้นเคย กับลักษณะของโค้ด

ตัวอย่างเช่น พารามิเตอร์สุดท้ายของเลย์เอาต์ทั้งหมด เช่น ฟังก์ชันคอมโพสิเบิล Column() จะเป็น content ซึ่งเป็นฟังก์ชันที่แสดงองค์ประกอบ UI ย่อย สมมติว่าคุณต้องการสร้างคอลัมน์ที่มีองค์ประกอบข้อความ 3 รายการ และจำเป็นต้องใช้การจัดรูปแบบบางอย่าง โค้ดนี้ใช้งานได้ แต่ ยุ่งยาก:

Column(
    modifier = Modifier.padding(16.dp),
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)
KotlinSnippets.kt

เนื่องจากพารามิเตอร์ content เป็นค่าสุดท้ายในลายเซ็นของฟังก์ชัน และ เรากำลังส่งผ่านค่าเป็นนิพจน์แลมบ์ดา เราสามารถดึงค่าออกมาจาก วงเล็บ:

Column(modifier = Modifier.padding(16.dp)) {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

ตัวอย่างทั้ง 2 รายการมีความหมายเหมือนกันทุกประการ วงเล็บปีกกาจะกําหนดนิพจน์ Lambda ที่ส่งไปยังพารามิเตอร์ content

อันที่จริงแล้ว หากพารามิเตอร์เดียวที่คุณส่งคือ Lambda ตัวสุดท้ายนั้น (กล่าวคือ หากพารามิเตอร์สุดท้ายคือ Lambda และคุณไม่ได้ส่งพารามิเตอร์อื่นใด) คุณก็ละเว้นวงเล็บไปเลยได้ ตัวอย่างเช่น สมมติว่าคุณไม่จำเป็นต้องส่งตัวแก้ไขไปยัง Column คุณอาจเขียนโค้ดดังนี้

Column {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

ไวยากรณ์นี้ค่อนข้างพบบ่อยในการเขียน โดยเฉพาะสำหรับองค์ประกอบการออกแบบ เช่น Column พารามิเตอร์สุดท้ายคือนิพจน์ Lambda ที่กําหนดองค์ประกอบย่อยขององค์ประกอบ และองค์ประกอบย่อยเหล่านั้นจะระบุไว้ในวงเล็บเหลี่ยมหลังการเรียกฟังก์ชัน

ขอบเขตและผู้รับ

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

ลองดูตัวอย่างที่ใช้ในเครื่องมือเขียน เมื่อคุณเรียกใช้Row layout composable ระบบจะเรียกใช้ Lambda ของเนื้อหาโดยอัตโนมัติภายใน RowScope ซึ่งจะช่วยให้ Row แสดงฟังก์ชันการทำงานที่ใช้งานได้ภายใน Row เท่านั้น ตัวอย่างด้านล่างแสดงวิธีที่ Row แสดงค่าเฉพาะแถวสําหรับตัวแก้ไข align

Row {
    Text(
        text = "Hello world",
        // This Text is inside a RowScope so it has access to
        // Alignment.CenterVertically but not to
        // Alignment.CenterHorizontally, which would be available
        // in a ColumnScope.
        modifier = Modifier.align(Alignment.CenterVertically)
    )
}
KotlinSnippets.kt

API บางรายการยอมรับ Lambda ที่เรียกใช้ในขอบเขตผู้รับ แลมดาเหล่านั้นจะมีสิทธิ์เข้าถึงพร็อพเพอร์ตี้และฟังก์ชันที่กําหนดไว้ที่อื่น โดยอิงตามการประกาศพารามิเตอร์

Box(
    modifier = Modifier.drawBehind {
        // This method accepts a lambda of type DrawScope.() -> Unit
        // therefore in this lambda we can access properties and functions
        // available from DrawScope, such as the `drawRectangle` function.
        drawRect(
            /*...*/
            /* ...
        )
    }
)
KotlinSnippets.kt

สำหรับข้อมูลเพิ่มเติม โปรดดูลิเทอรัลฟังก์ชันที่มี รีซีฟเวอร์ ในเอกสารประกอบของ Kotlin

พร็อพเพอร์ตี้ที่ได้รับมอบสิทธิ์

Kotlin รองรับแบบตัวแทน พร็อพเพอร์ตี้ ระบบจะเรียกพร็อพเพอร์ตี้เหล่านี้ราวกับว่าเป็นช่อง แต่ค่าคือ ซึ่งกำหนดแบบไดนามิกโดยการประเมินนิพจน์ คุณจำได้ พร็อพเพอร์ตี้โดยใช้ไวยากรณ์ by ดังนี้

class DelegatingClass {
    var name: String by nameGetterFunction()

    // ...
}
KotlinSnippets.kt

รหัสอื่นๆ จะเข้าถึงพร็อพเพอร์ตี้ได้ด้วยรหัสลักษณะนี้

val myDC = DelegatingClass()
println("The name property is: " + myDC.name)
KotlinSnippets.kt

เมื่อ println() ทำงาน ระบบจะเรียก nameGetterFunction() เพื่อแสดงค่าของสตริง

พร็อพเพอร์ตี้ที่รับมอบสิทธิ์เหล่านี้มีประโยชน์อย่างยิ่งเมื่อคุณทำงานกับพร็อพเพอร์ตี้ที่ระบบจัดการข้อมูลของรัฐสนับสนุน

var showDialog by remember { mutableStateOf(false) }

// Updating the var automatically triggers a state change
showDialog = true
KotlinSnippets.kt

การทำลายคลาสข้อมูล

หากกําหนดคลาสข้อมูล คุณจะเข้าถึงข้อมูลได้ง่ายๆ ด้วยคําประกาศการแยกโครงสร้าง ตัวอย่างเช่น สมมติว่าคุณกำหนดคลาส Person ดังนี้

data class Person(val name: String, val age: Int)
KotlinSnippets.kt

หากมีออบเจ็กต์ประเภทดังกล่าว คุณจะเข้าถึงค่าได้ด้วยโค้ดอย่างเช่นตัวอย่างนี้ 

val mary = Person(name = "Mary", age = 35)

// ...

val (name, age) = mary
KotlinSnippets.kt

คุณมักจะเห็นโค้ดประเภทนี้ในฟังก์ชันการเขียน

Row {

    val (image, title, subtitle) = createRefs()

    // The `createRefs` function returns a data object;
    // the first three components are extracted into the
    // image, title, and subtitle variables.

    // ...
}
KotlinSnippets.kt

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

ออบเจ็กต์ Singleton

Kotlin ช่วยให้คุณประกาศคลาสแบบ Singleton ได้ง่าย ซึ่งเป็นคลาสที่มีอินสแตนซ์เพียงรายการเดียวเสมอ ระบบจะประกาศเดี่ยวเหล่านี้ด้วยคีย์เวิร์ด object คอมโพสิชันมักใช้ออบเจ็กต์ดังกล่าว ตัวอย่างเช่น MaterialTheme ได้รับการกําหนดให้เป็นออบเจ็กต์แบบ Singleton โดยพร็อพเพอร์ตี้ MaterialTheme.colors, shapes และ typography ทั้งหมดมีค่าสำหรับธีมปัจจุบัน

เครื่องมือสร้างและ DSL ที่ปลอดภัยกับประเภท

Kotlin อนุญาตให้สร้างภาษาเฉพาะโดเมน (DSL) ด้วยเครื่องมือสร้างที่ปลอดภัย DSL ช่วยให้คุณสร้างโครงสร้างข้อมูลที่ซับซ้อนแบบลําดับชั้นในลักษณะที่ดูแลรักษาได้และอ่านง่ายขึ้น

Jetpack Compose ใช้ DSL สำหรับ API บางรายการ เช่น LazyRow และ LazyColumn

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        // Add a single item as a header
        item {
            Text("Message List")
        }

        // Add list of messages
        items(messages) { message ->
            Message(message)
        }
    }
}
KotlinSnippets.kt

Kotlin รับประกันเครื่องมือสร้างที่ปลอดภัยด้วยการพิมพ์โดยใช้ ทำงานตรงตัวกับตัวรับ หากใช้ Canvas แบบคอมโพสิเบิลเป็นตัวอย่าง ฟังก์ชันนี้จะรับฟังก์ชันที่มี DrawScope เป็นตัวรับ onDraw: DrawScope.() -> Unit ที่เป็นพารามิเตอร์ ซึ่งช่วยให้บล็อกโค้ดเรียกฟังก์ชันสมาชิกที่กําหนดไว้ใน DrawScope ได้

Canvas(Modifier.size(120.dp)) {
    // Draw grey background, drawRect function is provided by the receiver
    drawRect(color = Color.Gray)

    // Inset content by 10 pixels on the left/right sides
    // and 12 by the top/bottom
    inset(10.0f, 12.0f) {
        val quadrantSize = size / 2.0f

        // Draw a rectangle within the inset bounds
        drawRect(
            size = quadrantSize,
            color = Color.Red
        )

        rotate(45.0f) {
            drawRect(size = quadrantSize, color = Color.Blue)
        }
    }
}
KotlinSnippets.kt

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวสร้างที่ปลอดภัยต่อประเภทและ DSL ในเอกสารประกอบของ Kotlin

โครูทีน Kotlin

Coroutines รองรับการเขียนโปรแกรมแบบแอซิงโครนัสที่ระดับภาษาใน Kotlin Coroutine จะระงับการดำเนินการโดยไม่บล็อกเทรดได้ UI แบบตอบสนองจะทำงานแบบไม่พร้อมกันโดยพื้นฐาน และ Jetpack Compose แก้ปัญหานี้ด้วยการรองรับ coroutine ที่ระดับ API แทนการใช้การเรียกกลับ

Jetpack Compose มี API ที่ทำให้การใช้ Coroutine ปลอดภัยภายในเลเยอร์ UI rememberCoroutineScope จะแสดงผล CoroutineScope ที่คุณสามารถสร้างโครูทีนในเครื่องจัดการเหตุการณ์และการเรียกใช้ เขียน API ที่ระงับ ดูตัวอย่างด้านล่างโดยใช้ animateScrollTo API ของ ScrollState

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button(
    // ...
    onClick = {
        // Create a new coroutine that scrolls to the top of the list
        // and call the ViewModel to load data
        composableScope.launch {
            scrollState.animateScrollTo(0) // This is a suspend function
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Coroutine จะเรียกใช้บล็อกโค้ดตามลําดับโดยค่าเริ่มต้น การวิ่ง Coroutine ที่เรียกใช้ฟังก์ชันระงับจะระงับการดำเนินการจนกว่าฟังก์ชัน ฟังก์ชันระงับการส่งคืน ซึ่งจะเป็นเช่นนี้แม้ในกรณีที่ฟังก์ชัน "หยุดชั่วคราว" จะย้ายการดำเนินการไปยัง CoroutineDispatcher อื่นก็ตาม ในตัวอย่างก่อนหน้านี้ loadData จะไม่ถูกดำเนินการจนกว่าจะใช้ฟังก์ชันการระงับ animateScrollTo ที่เกินออกมา

หากต้องการเรียกใช้โค้ดพร้อมกัน คุณต้องสร้าง coroutine ใหม่ ในตัวอย่าง เพื่อเลื่อนไปยังด้านบนของหน้าจอและโหลดข้อมูลจาก viewModel ต้องมีโครูทีน 2 ตัว

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button( // ...
    onClick = {
        // Scroll to the top and load data in parallel by creating a new
        // coroutine per independent work to do
        composableScope.launch {
            scrollState.animateScrollTo(0)
        }
        composableScope.launch {
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Coroutine ทำให้การรวม API แบบอะซิงโครนัสง่ายขึ้น ดังต่อไปนี้ ตัวอย่างเช่น เราจะรวมตัวแก้ไข pointerInput เข้ากับ API ของภาพเคลื่อนไหวเพื่อ ทำให้ตำแหน่งขององค์ประกอบเคลื่อนไหวเมื่อผู้ใช้แตะหน้าจอ

@Composable
fun MoveBoxWhereTapped() {
    // Creates an `Animatable` to animate Offset and `remember` it.
    val animatedOffset = remember {
        Animatable(Offset(0f, 0f), Offset.VectorConverter)
    }

    Box(
        // The pointerInput modifier takes a suspend block of code
        Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                // Create a new CoroutineScope to be able to create new
                // coroutines inside a suspend function
                coroutineScope {
                    while (true) {
                        // Wait for the user to tap on the screen
                        val offset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        // Launch a new coroutine to asynchronously animate to
                        // where the user tapped on the screen
                        launch {
                            // Animate to the pressed position
                            animatedOffset.animateTo(offset)
                        }
                    }
                }
            }
    ) {
        Text("Tap anywhere", Modifier.align(Alignment.Center))
        Box(
            Modifier
                .offset {
                    // Use the animated offset as the offset of this Box
                    IntOffset(
                        animatedOffset.value.x.roundToInt(),
                        animatedOffset.value.y.roundToInt()
                    )
                }
                .size(40.dp)
                .background(Color(0xff3c1361), CircleShape)
        )
    }
KotlinSnippets.kt

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Coroutines ได้ที่คู่มือCoroutines ของ Kotlin ใน Android

ไม่มีคำแนะนำในขณะนี้

ลองบัญชี Google