CodeEditor in Compose

Jetpack Compose是用于Android开发的新框架。如果您尝试使用Sora Editor，同时使用使用Jetpack Compose构建的应用程序。本文档可能会对您有所帮助。

我的英语可能不好，如果有的话请纠正它们。谢谢。

创建状态持有者

首先，我们将定义一个CodeEditorState，封装并持有CodeEditor的状态.

data class CodeEditorState(
    val editor: CodeEditor? = null,
    val initialContent: Content = Content()
) {
    var content by mutableStateOf(initialContent)
}

您可以根据需要添加许多状态。

注意

如果您不想使用ViewModel而是希望使用remember*()可组合函数，您可以进行以下操作：

@Composable
fun rememberCodeEditorState(
    initialContent: Content = Content()
) = remember {
    CodeEditorState(
        initialContent = initialContent
    )
}

创建CodeEditor可组合项

现在，我们将创建CodeEditor可组合项，它通过AndroidView间接地实现可组合化。在这个可组合项中，它将接受一个与CodeEditorState类型的参数state.

@Composable
fun CodeEditor(
    modifier: Modifier = Modifier,
    state: CodeEditorState
) {
    // ...
}

设置CodeEditor工厂

我们需要一个Context以实例化一个CodeEditor。

private fun setCodeEditorFactory(
    context: Context,
    state: CodeEditorState
): CodeEditor {
    val editor = CodeEditor(context)
    editor.apply {
        setText(state.content)
        // ...
    }
    state.editor = editor
    return editor
}

一旦我们完成了工厂的创建，我们现在就可以用remember可组合函数进行管理.

@Composable
fun CodeEditor(
    modifier: Modifier = Modifier,
    state: CodeEditorState
) {
    val context = LocalContext.current
    val editor = remember {
        setCodeEditorFactory(
            context = context,
            state = state
        )
    }
    AndroidView(
        factory = { editor },
        modifier = modifier,
        onRelease = {
            it.release()
        }
    )
    // ...
}

为CodeEditor的状态设置LaunchedEffect

当CodeEditor的状态发生变化时执行某些代码，我们需要使用LaunchedEffect

LaunchedEffect(key1 = state.content) {
    state.editor?.setText(state.content)
}

使用CodeEditor可组合项

在我们完成CodeEditor可组合项后，我们就可以在应用程序中使用它。首先，强烈建议在ViewModel中定义CodeEditorState。

例如，在MainScreen中，我们将创建一个MainViewModel，在这个viewmodel中，我们定义了一个CodeEditorState。

class MainViewModel : ViewModel() {
    val editorState by mutableStateOf(
        CodeEditorState()
    )
}

接着在MainScreen可组合项中，使用Modifier对您的CodeEditor进行必要的调整。

@Composable
fun MainScreen(
    viewModel: MainViewModel = viewModel()
) {
    Column {
        CodeEditor(
            modifier = Modifier
                .fillMaxSize(),
            state = viewModel.editorState
        )
    }
}

警告

如果CodeEditor的底部有可组合项，请使用Modifier.weight(1f)而不是Modifier.fillMaxSize()。否则CodeEditor将会占满整个容器。

结语

一般情况下，CodeEditor是我们唯一需要使用AndroidView的小部件。至于其他类似于SymbolInputView的组件，目前建议完全使用Compose进行实现。

---

以上便是全部。我并不知道在JetPack Compose中使用Sora编辑器的CodeEditor是否是一个正确的选择，但我希望您能通过本指南获得灵感。感谢您的阅读。