如何在Android Jetpack Compose应用中显示LaTeX或数学公式？

优先推荐：MathJax Compose 封装库 #

这个库专门适配Jetpack Compose，维护状态活跃，支持主流LaTeX语法和数学公式渲染。

Gradle 配置 #

1. 在项目根目录的settings.gradle.kts中添加JitPack仓库：

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

2. 在模块级build.gradle.kts中添加依赖：

dependencies {
    // MathJax Compose 核心依赖
    implementation("com.github.deniscerri:mathjax-compose:1.3.0")
    
    // 基础Compose依赖（若项目未配置）
    implementation(platform("androidx.compose:compose-bom:2024.02.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
}

Compose 最简实现代码 #

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.deniscerri.mathjax.MathJax

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    // 示例：渲染勾股定理公式
                    val latexFormula = "$$a^2 + b^2 = c^2$$"
                    MathJax(
                        modifier = Modifier.fillMaxSize(),
                        text = latexFormula,
                        // 可选：开启深色模式适配
                        isDarkMode = false
                    )
                }
            }
        }
    }
}

备选方案：XML 中使用 KaTeX 库 #

如果Compose方案出现兼容性问题，可使用适配XML的android-katex库，轻量且渲染速度快。

Gradle 配置 #

在模块级build.gradle.kts中添加依赖：

dependencies {
    implementation("io.github.himanshubeniwal:android-katex:1.0.3")
}

XML 布局文件（activity_main.xml） #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <io.github.himanshubeniwal.katex.KaTeXView
        android:id="@+id/katex_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

对应 Kotlin 代码 #

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.github.himanshubeniwal.katex.KaTeXView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val katexView = findViewById<KaTeXView>(R.id.katex_view)
        // 示例：渲染欧拉公式
        val latexFormula = "$$e^{i\\pi} + 1 = 0$$"
        katexView.setFormula(latexFormula)
    }
}

注意事项 #

• MathJax Compose 支持自定义样式、缩放比例等配置，可通过调整参数实现需求。
• 若遇到依赖冲突，可通过exclude关键字排除重复依赖模块，例如：

implementation("com.github.deniscerri:mathjax-compose:1.3.0") {
    exclude(group = "androidx.compose.ui")
}

内容的提问来源于stack exchange，提问作者Chhotan Bag