Android Project Compose

Appearance

页面模板 ​

为方便快速创建标准化的 Feature 页面，可使用以下模板（均适配当前项目包名 com.joker.kit）。将代码复制到 Android Studio 的 File and Code Templates 中，或直接在文档中粘贴后按需修改变量。

使用方式：File > Settings > Editor > File and Code Templates > Files，点击 + 新增模板，粘贴对应代码，并在 Edit Variables 中配置占位符（如 PAGE_NAME、CN_NAME 等）。

Screen 模板 ​

kotlin
package com.joker.kit.feature.${FEATURE_NAME}.view

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.tooling.preview.Preview
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import com.joker.kit.core.base.state.BaseNetWorkUiState
import com.joker.kit.core.designsystem.theme.AppTheme
import com.joker.kit.core.ui.component.network.BaseNetWorkView
import com.joker.kit.core.ui.component.scaffold.AppScaffold
import com.joker.kit.core.ui.component.text.AppText
import com.joker.kit.feature.${FEATURE_NAME}.viewmodel.${PAGE_NAME}ViewModel

/**
 * ${CN_NAME}路由
 *
 * @param viewModel ${CN_NAME} ViewModel
 */
@Composable
internal fun ${PAGE_NAME}Route(
    viewModel: ${PAGE_NAME}ViewModel = hiltViewModel()
) {
    // 收集 UI 状态
    val uiState by viewModel.uiState.collectAsState()
    
    ${PAGE_NAME}Screen(
        uiState = uiState,
        onBackClick = viewModel::navigateBack,
        onRetry = viewModel::retryRequest
    )
}

/**
 * ${CN_NAME}界面
 *
 * @param uiState UI 状态
 * @param onBackClick 返回按钮回调
 * @param onRetry 重试回调
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ${PAGE_NAME}Screen(
    uiState: BaseNetWorkUiState<Any> = BaseNetWorkUiState.Loading,
    onBackClick: () -> Unit = {},
    onRetry: () -> Unit = {}
) {
    AppScaffold(
        titleText = "${CN_NAME}",
        onBackClick = onBackClick,
    ) { 
        BaseNetWorkView(
            uiState = uiState,
            onRetry = onRetry
        ) { data ->
            ${PAGE_NAME}Content(data = data)
        }
    }
}

/**
 * ${CN_NAME}内容视图
 */
@Composable
private fun ${PAGE_NAME}Content(data: Any) {
    AppText(text = "${CN_NAME}")
}

/**
 * ${CN_NAME}界面浅色主题预览
 */
@Preview(showBackground = true)
@Composable
internal fun ${PAGE_NAME}Preview() {
    AppTheme {
        ${PAGE_NAME}Screen(uiState = BaseNetWorkUiState.Success(Any()))
    }
}

/**
 * ${CN_NAME}界面深色主题预览
 */
@Preview(showBackground = true)
@Composable
internal fun ${PAGE_NAME}PreviewDark() {
    AppTheme(darkTheme = true) {
        ${PAGE_NAME}Screen(uiState = BaseNetWorkUiState.Success(Any()))
    }
}

建议变量：

  • PAGE_NAME（如 About）
  • FEATURE_NAME（如 user）
  • CN_NAME（中文名称）

ViewModel 模板 ​

kotlin
package com.joker.kit.feature.${FEATURE_NAME}.viewmodel

import com.joker.kit.core.base.viewmodel.BaseNetWorkViewModel
import com.joker.kit.core.state.UserState
import com.joker.kit.navigation.AppNavigator
import dagger.hilt.android.lifecycle.HiltViewModel
import javax.inject.Inject

/**
 * ${CN_NAME} ViewModel
 * 
 * @param navigator 导航管理器
 * @param userState 用户状态管理
 */
@HiltViewModel
class ${PAGE_NAME}ViewModel @Inject constructor(
    navigator: AppNavigator,
    userState: UserState,
) : BaseNetWorkViewModel<Any>(navigator, userState) {
    // TODO: 注入仓库并实现 requestApiFlow()
}

根据实际场景可替换为 BaseViewModel、BaseNetWorkListViewModel 等。

kotlin
package com.joker.kit.feature.${FEATURE_NAME}.navigation

import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import com.joker.kit.feature.${FEATURE_NAME}.view.${PAGE_NAME}Route
import com.joker.kit.navigation.routes.${ROUTE_GROUP}

/**
 * ${CN_NAME}页面导航
 */
@OptIn(ExperimentalSharedTransitionApi::class)
fun NavGraphBuilder.${PAGE_NAME_CAMEL}Screen() {
    composable<${ROUTE_GROUP}.${ROUTE_NAME}> {
        ${PAGE_NAME}Route()
    }
}

可在同模块的 Graph 文件中调用：

kotlin
fun NavGraphBuilder.${FEATURE_NAME}Graph() {
    ${PAGE_NAME_CAMEL}Screen()
    // 其他页面...
}

Android Studio 配置步骤（简述） ​

  1. 打开 File > Settings > Editor > File and Code Templates > Files。
  2. 点击 +，分别创建 Compose Screen、Compose ViewModel、Compose Navigation 模板。
  3. 粘贴上述代码，并在 Edit Variables 中配置默认值（如 FEATURE_NAME、PAGE_NAME）。
  4. 保存后即可通过 New > Compose Screen 等入口快速生成文件。

使用建议 ​

  • 模板生成后务必补全实际数据类型（例如 Any 改为 GoodsDetail）。
  • 结合“创建页面流程”文档使用，可快速完成路由、ViewModel、UI 的标准化搭建。
  • 若后续模板有更新，可在本页追加说明，保持手册与工程实践一致。