在Jetpack Compose(Material3)中全局声明随主题切换的颜色

针对你重复定义TopAppBar颜色的问题，这里提供两种高效的全局化方案，彻底消除重复代码：

方法一：扩展MaterialTheme ColorScheme（推荐） #

利用Material3的ColorScheme扩展能力，将TopAppBar的颜色绑定到主题，自动跟随深浅模式切换，无需在每个Composable中重复判断。

步骤1：添加ColorScheme扩展 #

在项目中创建一个颜色扩展文件，定义TopAppBar的全局颜色：

import androidx.compose.material3.ColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.graphics.Color

// 替换为你项目中实际的Purple500颜色值
private val Purple500 = Color(0xFF6200EE)

// 扩展ColorScheme，添加TopAppBar专属颜色属性
val ColorScheme.topAppBarBackgroundColor: Color
    get() = if (isLight) Purple500 else Color.Black

val ColorScheme.topAppBarContentColor: Color
    get() = if (isLight) Color.White else Color.LightGray

步骤2：在Composable中直接使用 #

修改你原来的Composable，删除重复的isLight判断和颜色定义，直接调用扩展属性：

修改DefaultListAppBar：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DefaultListAppBar(
    onSearchClicked: () -> Unit,
    onSortClicked: (Priority) -> Unit,
    onDeleteClicked: () -> Unit
) {
    TopAppBar(
        title = {
            Text(
                text = "Tasks",
                color = MaterialTheme.colorScheme.topAppBarContentColor
            )
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.topAppBarBackgroundColor
        ),
        actions = {
            ListAppBarActions(
                onSearchClicked = onSearchClicked,
                onSortClicked = onSortClicked,
                onDeleteClicked = onDeleteClicked
            )
        }
    )
}

修改SearchAction：

@Composable
fun SearchAction(onSearchClicked: () -> Unit) {
    IconButton(onClick = onSearchClicked) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = stringResource(R.string.search_tasks),
            tint = MaterialTheme.colorScheme.topAppBarContentColor
        )
    }
}

同理，SortAction、DeleteAllAction、SearchAppBar等组件都可以用同样的方式替换，彻底消除重复代码。

方法二：使用CompositionLocal（适合局部覆盖场景） #

如果需要在应用的某个局部区域自定义TopAppBar颜色，可以用CompositionLocal实现全局可访问且支持局部覆盖的颜色配置。

步骤1：创建CompositionLocal实例 #

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color

// 定义TopAppBar颜色的CompositionLocal
val LocalTopAppBarColors = compositionLocalOf {
    object {
        val backgroundColor: Color = Color.Unspecified
        val contentColor: Color = Color.Unspecified
    }
}

步骤2：在主题中提供全局值 #

在你的应用主题组件中，根据深浅模式提供默认的TopAppBar颜色：

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme // 替换为你项目的深色主题配色
    } else {
        LightColorScheme // 替换为你项目的浅色主题配色
    }
    
    // 定义TopAppBar颜色
    val topAppBarColors = object {
        val backgroundColor: Color = if (darkTheme) Color.Black else Purple500
        val contentColor: Color = if (darkTheme) Color.LightGray else Color.White
    }

    CompositionLocalProvider(
        LocalTopAppBarColors provides topAppBarColors,
        content = content
    )
}

步骤3：在Composable中使用 #

@Composable
fun SortAction(onSortClicked: (Priority) -> Unit) {
    val topAppBarColors = LocalTopAppBarColors.current
    var expanded by remember { mutableStateOf(false) }

    IconButton(onClick = { expanded = true }) {
        Icon(
            painter = painterResource(id = R.drawable.baseline_filter_list_24),
            contentDescription = stringResource(R.string.sort_tasks),
            tint = topAppBarColors.contentColor
        )

        // DropdownMenu部分代码保持不变
    }
}

如果需要在某个子树中覆盖颜色，只需在该子树外层重新提供CompositionLocal的值即可。

内容的提问来源于stack exchange，提问作者Dr Mido