如何在舊的 Android 項目中使用 Android Material Stepper 庫進行表單驗證，但需要使用 Jetpack compose 創建 UI

Question

1. 我將舊的 Android Kotlin 項目與 jetpack compose 合並。
2. 我嘗試了不同的方法來使用步進器庫，但它不起作用。
3. 我也嘗試在我的 xml 中添加它，但它不會工作。 誰能幫忙。
4. 並為步進器創建了一個適配器，但它不會工作

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

  <com.stepstone.stepper.StepperLayout
            android:id="@+id/stepperLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?actionBarSize"
            app:ms_backButtonColor="@color/app_primary_accent"
            app:ms_completeButtonColor="@color/app_primary_accent"
            app:ms_completeButtonText="Submit"
            app:ms_nextButtonColor="@color/app_primary_accent"
            app:ms_stepperType="dots" />

Answer 1

1. 我已經使用片段創建了它。 將此添加到您要添加步進器的活動中。 (test_activity.xml)

<com.stepstone.stepper.StepperLayout
            android:id="@+id/stepperLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?actionBarSize"
            app:ms_backButtonColor="@color/app_primary_accent"
            app:ms_completeButtonColor="@color/app_primary_accent"
            app:ms_completeButtonText="Submit"
            app:ms_nextButtonColor="@color/app_primary_accent"
            app:ms_stepperType="dots" />

2. 在您的活動 TestActivity.kt 中添加以下行

class TestActivity : AppCompatActivity(), StepperLayout.StepperListener {
    private lateinit var stepperLayout: StepperLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        setContentView(R.layout.test_activity)

        stepperLayout = findViewById(R.id.stepperLayout)
        stepperLayout.adapter = StepperAdapter(supportFragmentManager, this)
        stepperLayout.setListener(this)
        actionBarToolbar?.post { supportActionBar?.subtitle = "Page 1" }// custom action bar
    }
    override fun onCompleted(completeButton: View?) {
       var intent= Intent(this,TestActivity::class.java)
        startActivity(intent)
        finish()
    }
    override fun onError(verificationError: VerificationError?) {
    }
    override fun onStepSelected(newStepPosition: Int) {
        val subTitle = when (newStepPosition) {
            0 -> "Page 1"
            1 -> "Page 2"
            2 -> "Page 3"
            else -> ""
        }
        supportActionBar?.subtitle = subTitle
    }
    override fun onReturn() {
        finish()
    }
}

3. 為步進器創建一個適配器

class StepperAdapter(fm: FragmentManager?, context: Context?) :
    AbstractFragmentStepAdapter(fm!!, context!!) {

    override fun getCount(): Int {
        return 8
    }

    override fun createStep(position: Int): Step {
        return when (position) {
            0 -> Page1.newInstance()
            1 -> Page2.newInstance()
            2 -> Page3.newInstance()
            else -> throw IllegalArgumentException("Unsupported position: $position")
        }
    }
}

4. 為每個頁面創建片段

class Page1 : Fragment(), Step {
    companion object {
        fun newInstance() = Page1()
    }
    @ExperimentalComposeUiApi
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                JFLtestTheme {
                    Page1JetCompose()
                }
            }
        }
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }
    override fun verifyStep(): VerificationError? {
        val message = validateInitData()
        return null
    }
    override fun onSelected() {}
    override fun onError(error: VerificationError) {
        ShowDialog.showSnackbar(view, error.errorMessage)
    }
}

5. 現在創建 jetcompose 文件並添加您的布局

@Composable
fun Page1Jetcompose() {
    val context = LocalContext.current
    val emailState = remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current

    Column {
        TextField(
            modifier = Modifier
                .focusRequester(focusRequester)
                .fillMaxWidth(),
            value = emailState.value,
            onValueChange = {
                emailState.value = it
            },
        )
        Button(onClick = {
            focusManager.clearFocus()
            if (emailState.value.isEmpty() ) {
                focusRequester.requestFocus()
                Toast.makeText(context, "error", Toast.LENGTH_SHORT).show()
            }
        }) { Text(text = "Button")
        }
    }
}

Answer 2

因為我希望完全使用 Jetpack Compose 編寫視圖，所以我在 Composable 中創建了一個 Material Stepper 庫，如果這可以提供幫助： https://github.com/Xsims/compose-material-stepper