如何将ViewModel与Fragment解耦？XML视图体系复用困境求解

针对你提到的Compose中可通过共享EventFormComponent配合不同ViewModel实现创建/编辑场景复用，但XML体系下Fragment绑定ViewModel导致复用困难、自定义View又缺失registerForActivityResult、弹窗等能力的问题，这里提供几种实用解决方案：

方案1：让Fragment动态接收ViewModel工厂 #

通过让Fragment接受ViewModel的工厂参数，在创建Fragment时传入对应场景的ViewModel工厂，实现同一个Fragment适配创建/编辑两种逻辑。

实现步骤： #

1. 定义通用基类ViewModel，包含创建和编辑场景的共同状态与行为：

abstract class BaseEventViewModel : ViewModel() {
    abstract val uiState: StateFlow<EventFormUiState>
    abstract fun onTitleChanged(title: String)
    abstract fun onSaveClicked()
    // 其他通用方法...
}

class CreateEventViewModel : BaseEventViewModel() {
    // 实现创建场景逻辑
    override val uiState = MutableStateFlow(EventFormUiState())
    // ...
}

class EditEventViewModel(private val eventId: String) : BaseEventViewModel() {
    // 实现编辑场景逻辑，根据eventId加载数据
    override val uiState = MutableStateFlow(loadEventById(eventId))
    // ...
}

2. 修改EventFormFragment，通过viewModels的工厂参数动态获取ViewModel：

class EventFormFragment : Fragment() {
    // 从arguments中获取工厂参数，动态创建对应ViewModel
    private val viewModel: BaseEventViewModel by viewModels {
        val factoryArgs = arguments?.getParcelable<ViewModelFactoryArgs>(KEY_FACTORY_ARGS)
            ?: throw IllegalArgumentException("Factory args required")
        
        when(factoryArgs.type) {
            EventType.CREATE -> CreateEventViewModelFactory()
            EventType.EDIT -> EditEventViewModelFactory(factoryArgs.eventId)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val binding = EventFormBinding.inflate(inflater, container, false)
        // 绑定ViewModel与UI，监听状态变化
        lifecycleScope.launch {
            viewModel.uiState.collect { state ->
                binding.titleEditText.setText(state.title)
                // 更新其他UI元素
            }
        }
        binding.saveButton.setOnClickListener { viewModel.onSaveClicked() }
        
        // 处理registerForActivityResult、弹窗等Fragment专属能力
        val pickImageLauncher = registerForActivityResult(GetContent()) { uri ->
            // 处理图片选择结果
        }
        binding.addImageButton.setOnClickListener { pickImageLauncher.launch("image/*") }
        
        return binding.root
    }

    companion object {
        private const val KEY_FACTORY_ARGS = "factory_args"

        fun newInstanceForCreate(): EventFormFragment {
            return EventFormFragment().apply {
                arguments = bundleOf(
                    KEY_FACTORY_ARGS to ViewModelFactoryArgs(EventType.CREATE)
                )
            }
        }

        fun newInstanceForEdit(eventId: String): EventFormFragment {
            return EventFormFragment().apply {
                arguments = bundleOf(
                    KEY_FACTORY_ARGS to ViewModelFactoryArgs(EventType.EDIT, eventId)
                )
            }
        }
    }

    data class ViewModelFactoryArgs(val type: EventType, val eventId: String? = null) : Parcelable {
        // 实现Parcelable接口...
    }

    enum class EventType { CREATE, EDIT }
}

3. 在Activity中根据场景创建Fragment：

// 创建场景
supportFragmentManager.beginTransaction()
    .replace(R.id.container, EventFormFragment.newInstanceForCreate())
    .commit()

// 编辑场景
supportFragmentManager.beginTransaction()
    .replace(R.id.container, EventFormFragment.newInstanceForEdit("event_123"))
    .commit()

方案2：使用单一ViewModel+状态区分 #

如果创建和编辑场景的逻辑差异不大，可以用一个通用ViewModel，通过传入的eventId（为空则为创建模式）区分场景：

class EventViewModel(private val eventId: String?) : ViewModel() {
    private val _uiState = MutableStateFlow(EventFormUiState())
    val uiState = _uiState.asStateFlow()

    init {
        eventId?.let {
            // 加载已有事件数据
            viewModelScope.launch {
                val event = repository.getEvent(it)
                _uiState.update { it.copy(title = event.title, ...) }
            }
        }
    }

    fun onSaveClicked() {
        if (eventId == null) {
            repository.createEvent(_uiState.value.toEvent())
        } else {
            repository.updateEvent(eventId, _uiState.value.toEvent())
        }
    }
}

// Fragment中获取ViewModel，通过arguments传递eventId
class EventFormFragment : Fragment() {
    private val eventId: String? by lazy { arguments?.getString(KEY_EVENT_ID) }
    private val viewModel: EventViewModel by viewModels {
        EventViewModelFactory(eventId)
    }

    companion object {
        private const val KEY_EVENT_ID = "event_id"

        fun newInstance(eventId: String? = null): EventFormFragment {
            return EventFormFragment().apply {
                arguments = bundleOf(KEY_EVENT_ID to eventId)
            }
        }
    }

    // 后续UI绑定逻辑同方案1...
}

方案3：表单UI提取为自定义View，Fragment作为容器 #

将表单UI逻辑封装到自定义View中，Fragment负责处理registerForActivityResult、弹窗等宿主相关能力，通过回调与自定义View交互：

// 自定义View负责表单UI展示与交互
class EventFormView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
    private val binding = EventFormViewBinding.inflate(LayoutInflater.from(context), this)

    var onTitleChanged: ((String) -> Unit)? = null
    var onSaveClicked: (() -> Unit)? = null
    var onAddImageClicked: (() -> Unit)? = null

    init {
        orientation = VERTICAL
        binding.titleEditText.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(s: Editable?) {
                onTitleChanged?.invoke(s.toString())
            }
            // 实现其他TextWatcher方法...
        })
        binding.saveButton.setOnClickListener { onSaveClicked?.invoke() }
        binding.addImageButton.setOnClickListener { onAddImageClicked?.invoke() }
    }

    fun updateUiState(state: EventFormUiState) {
        binding.titleEditText.setText(state.title)
        // 更新其他UI元素
    }
}

// Fragment作为容器，处理ViewModel和宿主能力
class EventFormFragment : Fragment() {
    private val viewModel: BaseEventViewModel by viewModels() // 根据场景传入对应VM
    private lateinit var eventFormView: EventFormView

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        eventFormView = EventFormView(requireContext())
        // 绑定回调，将UI事件传递给ViewModel
        eventFormView.onTitleChanged = { viewModel.onTitleChanged(it) }
        eventFormView.onSaveClicked = { viewModel.onSaveClicked() }
        eventFormView.onAddImageClicked = { pickImageLauncher.launch("image/*") }

        // 监听ViewModel状态，更新自定义View
        lifecycleScope.launch {
            viewModel.uiState.collect { state ->
                eventFormView.updateUiState(state)
            }
        }

        // 处理registerForActivityResult
        val pickImageLauncher = registerForActivityResult(GetContent()) { uri ->
            viewModel.onImageSelected(uri)
        }

        return eventFormView
    }
}

方案对比 #

• 方案1：适合创建/编辑逻辑差异较大的场景，完全解耦不同场景的ViewModel，Fragment复用性强。
• 方案2：适合逻辑差异小的场景，实现简单，减少ViewModel类的数量。
• 方案3：适合需要高度复用表单UI的场景，将UI和宿主能力分离，自定义View可在其他Fragment/Activity中复用，同时保留Fragment的宿主功能。

内容的提问来源于stack exchange，提问作者Eweries Lyricked