---
title: "Jetpack Compose"
description: "把 Tanrei 添加到用 Jetpack Compose 构建的 Android 应用中。"
url: "https://tanrei.chnotchy.com/zh-cn/getting-started/compose/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Jetpack Compose

> 把 Tanrei 添加到用 Jetpack Compose 构建的 Android 应用中。

Compose 库提供可组合函数、`TanreiTheme` 和生成的令牌对象。它依赖的是 Compose Foundation，而不是某个 Material 组件库，因此不会给你的应用带进第二套设计系统。

> [!WARNING]
> **尚未发布**
>
> `io.github.chnotchy:tanrei` 尚未发布到 Maven Central。一个平台在跟上当前的规格之后才会发布，在此之前 Jetpack Compose 的 CI 处于暂停状态。下文“从源码”一节展示如何从 [chnotchy/tanrei](https://github.com/chnotchy/tanrei) 添加这个包；“发布之后”一节展示届时的安装方式。

## 安装

### 从源码

> [!WARNING]
> **目前无法构建**
>
> Compose 库尚未跟上当前的规格和令牌：它的源码是针对较早版本的生成令牌代码编写的，无法与现在的令牌代码一起编译。在它跟上之前，它的 CI 处于暂停状态，[状态页面](https://tanrei.chnotchy.com/zh-cn/status/)把它的组件标记为“待跟进”。下面的步骤说明如何把它添加到应用中；等这个库跟上之后，这些步骤就能用了。

把仓库克隆到你的应用旁边，再引入它的 Gradle 构建，这个构建以项目 `:tanrei` 的形式包含这个库：

```kotlin
// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}
```

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}
```

### 发布之后

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}
```

## 使用

在靠近根部的位置，用 `TanreiTheme` 把内容包起来一次：

```kotlin
import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "部署",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}
```

Compose 的惯例是使用肯定形式的标志 `enabled`，Tanrei 也是如此；规格中的 `disabled` 属性对应它的反值。当需要的不只是文本标签时，可以使用接受 `content` lambda 的插槽重载。

## 主题与对比度

`TanreiTheme` 默认跟随系统的深色主题和系统的对比度设置。两者都可以固定：

```kotlin
TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}
```

## 字体

默认情况下，字阶会解析为平台的默认字体族。要使用应用字体资源中的 Inter（以及 Noto Sans JP、Roboto Mono），请把自己的 `TanreiFontFamilies` 传给 `TanreiTheme`。文本样式按层级命名（`TanreiTheme.tokens.typescale.heading2`、`.body`、`.label`；`.toTextStyle()` 可以把它转换为 Compose 的 `TextStyle`），`TanreiTheme.tokens.typescale.heading1.emphasized()` 则是同一样式在其字重上加上标题系列强调级差后的结果（在组合之外使用 `emphasized(system.typescale.emphasis)`）。