Android Academy · บทเรียน

TextField และข้อมูลนำเข้าจากผู้ใช้

รับข้อความจากผู้ใช้ใน Compose

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

การรับข้อมูลจากผู้ใช้

แอปจริงแทบทุกแอปต้องขอข้อมูลบางอย่างจากผู้ใช้ เช่น ชื่อ อีเมล หรือคำค้นหา ใน Jetpack Compose องค์ประกอบพื้นฐานสำหรับการป้อนข้อความคือ TextField

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

TextField แรกของคุณ

TextField ต้องการสองสิ่ง ได้แก่ value (ข้อความปัจจุบันที่จะแสดง) และการเรียกกลับ onValueChange (สิ่งที่ต้องทำเมื่อผู้ใช้พิมพ์)

Compose ใช้รูปแบบการประกาศ ดังนั้นช่องข้อความจะไม่เก็บข้อความของตัวเองไว้ แต่คุณเป็นผู้เก็บข้อความในสถานะแล้วส่งกลับเข้าไป รูปแบบนี้เรียกว่า การยกสถานะขึ้น

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

ลูปการทำงานของค่า

แนวคิดที่สำคัญที่สุดคือ TextField จะแสดงตรงตามสิ่งที่คุณส่งให้ value เมื่อผู้ใช้กดแป้น Compose จะเรียก onValueChange พร้อมข้อความใหม่

คุณบันทึกข้อความใหม่นั้นลงในสถานะ
การเปลี่ยนสถานะจะเรียกการจัดองค์ประกอบใหม่
ช่องข้อความจะถูกวาดใหม่ด้วย value ที่อัปเดตแล้ว

หากคุณลืมอัปเดตสถานะภายใน onValueChange ช่องข้อความจะดูเหมือนค้าง เพราะ value ไม่เคยเปลี่ยน

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

การเพิ่มป้ายกำกับและข้อความตัวอย่าง

ช่องข้อความเปล่า ๆ ไม่ได้บอกผู้ใช้ว่าควรพิมพ์อะไร ให้เพิ่ม label (ลอยอยู่เหนือช่อง) และ placeholder (คำแนะนำที่แสดงเมื่อช่องว่าง)

รายละเอียดเล็ก ๆ เหล่านี้ช่วยให้เข้าใจแบบฟอร์มได้ง่ายขึ้นมาก

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design มีรูปแบบหลักสองแบบ TextField มีพื้นหลังทึบ ส่วน OutlinedTextField วาดเส้นขอบรอบช่อง ทั้งสองใช้ API เดียวกัน จึงสลับใช้งานได้ง่าย

ช่องแบบมีเส้นขอบได้รับความนิยมในแบบฟอร์ม เพราะเมื่อเรียงในแนวตั้งแล้วอ่านได้ชัดเจน

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

ไอคอนด้านหน้าและด้านหลัง

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

ไอคอนช่วยให้เข้าใจจุดประสงค์ของช่องได้ทันทีเมื่อมอง

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

ปุ่มล้างข้อมูล

รูปแบบประสบการณ์ผู้ใช้ที่พบได้บ่อยคือปุ่ม "x" ขนาดเล็กสำหรับล้างข้อมูลในช่อง ให้แสดงปุ่มนี้เฉพาะเมื่อมีข้อความ โดยใช้ช่อง trailingIcon และ IconButton

สังเกตว่าการล้างข้อมูลทำได้เพียงเปลี่ยนสถานะกลับเป็นสตริงว่าง

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

บรรทัดเดียวเทียบกับหลายบรรทัด

โดยค่าเริ่มต้น TextField สามารถขยายเป็นหลายบรรทัดได้ สำหรับข้อมูลอย่างชื่อหรืออีเมล ให้ตั้งค่า singleLine = true เพื่อไม่ให้ผู้ใช้ขึ้นบรรทัดใหม่

สำหรับบันทึกที่ยาวกว่า ให้คงรูปแบบหลายบรรทัดไว้ และเลือกจำกัดความสูงด้วย maxLines

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

ตอบสนองต่อข้อมูลที่ป้อนแบบทันที

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

ทุกครั้งที่กดแป้นจะอัปเดต text ซึ่งทำให้ทั้งช่องข้อความและตัวนับด้านล่างจัดองค์ประกอบใหม่

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

การแปลงข้อมูลที่ป้อน

บางครั้งคุณอาจต้องการปรับข้อมูลที่ผู้ใช้พิมพ์ให้เป็นรูปแบบมาตรฐานก่อนจัดเก็บ ภายใน onValueChange คุณสามารถแปลงค่าใหม่ก่อนได้

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

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Kotlin ล้วน: การทำความสะอาดชื่อเรียก

ตรรกะการแปลงด้านบนเป็น Kotlin ธรรมดา คุณสามารถทดสอบแยกต่างหากได้โดยไม่ต้องใช้ Android ต่อไปนี้คือกฎการทำความสะอาดแบบเดียวกันที่ทำงานอย่างอิสระ

การเก็บตรรกะลักษณะนี้ไว้ในฟังก์ชันบริสุทธิ์ทำให้การทดสอบหน่วยทำได้ง่าย

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

ตรวจสอบความเข้าใจ

จะเกิดอะไรขึ้นหากการเรียกกลับ onValueChange ของ TextField ไม่เคยอัปเดตสถานะที่ส่งให้ value?

สรุปทบทวน

ตอนนี้คุณเข้าใจแก่นสำคัญของการป้อนข้อความใน Compose แล้ว:

TextField และ OutlinedTextField รับ value และการเรียกกลับ onValueChange
คุณเก็บข้อความไว้ใน remember { mutableStateOf(...) } และอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง (การยกสถานะขึ้น)
label, placeholder, ไอคอนด้านหน้าและด้านหลัง รวมถึง singleLine ช่วยกำหนดรูปลักษณ์และพฤติกรรม
เนื่องจากคุณเป็นผู้ถือครองสถานะ คุณจึงตอบสนองแบบสดหรือแปลงข้อมูลได้ขณะที่ผู้ใช้พิมพ์

ถัดไป: การจัดการสถานะของแบบฟอร์มทั้งชุด ไม่ใช่เพียงช่องเดียว

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

บทเรียน “TextField และข้อมูลนำเข้าจากผู้ใช้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TextField และข้อมูลนำเข้าจากผู้ใช้”

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

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

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

บทเรียน “TextField และข้อมูลนำเข้าจากผู้ใช้” ใช้เวลานานแค่ไหน

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

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

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

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

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