ด้วยการเปิดตัวชุดเครื่องมือ “Jetpack Compose” นักพัฒนา Android บอกลาเค้าโครง XML แบบเก่า คำอธิบายที่ชัดเจนของอินเทอร์เฟซผู้ใช้ช่วยลดความยุ่งยากในการสร้างหน้าจอ การผูกข้อมูล และการนำกลับมาใช้ใหม่

แม้จะมีข้อดีมากมายของJetpack Composeแต่กรณีการใช้งานบางอย่างก็ยังต้องการโค้ดจำนวนมาก ฉันเข้าใจสิ่งนี้เป็นพิเศษเมื่อฉันต้องการสร้างแบบฟอร์มที่ใหญ่ขึ้นสำหรับแอป Android ในเรื่องนี้ ฉันต้องการแสดงวิธีสร้างแบบฟอร์มง่ายๆ ด้วย Jetpack Compose

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

ช่องข้อความธรรมดา

ตัวอย่างต่อไปนี้เป็นตัวอย่างทางการของ Android สำหรับTextFieldที่เขียนได้

@Composable
fun SimpleFilledTextFieldSample() {
    var textState by remember { mutableStateOf("Hello") }

    TextField(
        value = textState,
        onValueChange = { textState = it },
        label = { Text("Label") }
    )
}

แยกความกังวล

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

นอกจากนี้ ฉันต้องการปฏิบัติตามหลักสถาปัตยกรรมที่เป็นมาตรฐานของ Android และแยกเลเยอร์ต่างๆ ฉันจึงต้องการมีข้อมูลใน ViewModel ด้วย UiState

ตัวอย่างต่อไปนี้แสดงช่องข้อความอย่างง่ายอีกครั้งด้วย "ตัวตรวจสอบความถูกต้องของความยาวขั้นต่ำ" ตัวอย่างนี้ยังเป็นไปตามหลักการสถาปัตยกรรมมาตรฐาน

data class MainUiState(
    val currentName: String = "",
    val currentNameErrors: MutableList<String> = mutableListOf(),
)
class MainViewModel: ViewModel() {
    // Main UI state
    private val _uiState = MutableStateFlow(MainUiState())
    val uiState: StateFlow<MainUiState> = _uiState.asStateFlow()

    fun updateName(name: String) {
        val errors = mutableListOf<String>()
        if (name.length < 4) {
            errors.add("The name must be at least 4 characters.")
        }
        _uiState.value = _uiState.value.copy(
            currentName = name,
            currentNameErrors = errors
        )
    }
}
class MainActivity : ComponentActivity() {
    // ...
    
    @Composable
    fun SimpleFilledTextFieldSample(
        mainViewModel: MainViewModel = viewModel()
    ) {
        val mainUiState by mainViewModel.uiState.collectAsState()
        Column(modifier = Modifier.padding(16.dp)) {
            TextField(
                value = mainUiState.currentName,
                singleLine = true,
                modifier = Modifier.fillMaxWidth(),
                onValueChange = { mainViewModel.updateName(it) },
                label = { Text(text = "Enter your Name") },
                isError = mainUiState.currentNameErrors.isNotEmpty()
            )
            mainUiState.currentNameErrors.forEach {
                Text(
                    modifier = Modifier.padding(vertical = 8.dp),
                    text = it,
                    color = Color.Red
                )
            }
        }
    }
}

เขียนแบบฟอร์มไลบรารี

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

https:///@benlue/advanced-forms-in-android-with-compose-form-154ee0bff65b