fix: 修复饼图在浅色模式下图例文字颜色显示问题

- 使用 Material Theme 的 onSurface 颜色来设置图例文字颜色
- 确保文字颜色正确跟随系统主题
- 优化代码结构和注释
This commit is contained in:
yovinchen 2024-11-27 18:07:41 +08:00
parent af880c23eb
commit 47e202fa61

View File

@ -1,13 +1,17 @@
package com.yovinchen.bookkeeping.ui.components package com.yovinchen.bookkeeping.ui.components
import android.graphics.Color import android.graphics.Color as AndroidColor
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView import androidx.compose.ui.viewinterop.AndroidView
import com.github.mikephil.charting.charts.PieChart import com.github.mikephil.charting.charts.PieChart
import com.github.mikephil.charting.components.Legend
import com.github.mikephil.charting.data.PieData import com.github.mikephil.charting.data.PieData
import com.github.mikephil.charting.data.PieDataSet import com.github.mikephil.charting.data.PieDataSet
import com.github.mikephil.charting.data.PieEntry import com.github.mikephil.charting.data.PieEntry
@ -19,6 +23,9 @@ fun CategoryPieChart(
categoryData: List<Pair<String, Float>>, categoryData: List<Pair<String, Float>>,
modifier: Modifier = Modifier modifier: Modifier = Modifier
) { ) {
val isDarkTheme = isSystemInDarkTheme()
val textColor = MaterialTheme.colorScheme.onSurface.toArgb()
AndroidView( AndroidView(
modifier = modifier modifier = modifier
.fillMaxWidth() .fillMaxWidth()
@ -28,11 +35,29 @@ fun CategoryPieChart(
description.isEnabled = false description.isEnabled = false
setUsePercentValues(true) setUsePercentValues(true)
setDrawEntryLabels(true) setDrawEntryLabels(true)
legend.isEnabled = true
// 配置图例
legend.apply {
isEnabled = true
this.textColor = textColor // 使用Material Theme的文字颜色
textSize = 12f
form = Legend.LegendForm.CIRCLE
formSize = 12f
formToTextSpace = 8f
xEntrySpace = 16f
}
isDrawHoleEnabled = true isDrawHoleEnabled = true
holeRadius = 40f holeRadius = 40f
setHoleColor(Color.TRANSPARENT) setHoleColor(AndroidColor.TRANSPARENT)
setTransparentCircleRadius(45f) setTransparentCircleRadius(45f)
// 设置标签文字颜色为白色(因为标签在彩色扇形上)
setEntryLabelColor(AndroidColor.WHITE)
setEntryLabelTextSize(12f)
// 设置中心文字颜色跟随主题
setCenterTextColor(textColor)
} }
}, },
update = { chart -> update = { chart ->
@ -44,7 +69,7 @@ fun CategoryPieChart(
colors = ColorTemplate.MATERIAL_COLORS.toList() colors = ColorTemplate.MATERIAL_COLORS.toList()
valueTextSize = 14f valueTextSize = 14f
valueFormatter = PercentFormatter(chart) valueFormatter = PercentFormatter(chart)
valueTextColor = Color.WHITE valueTextColor = AndroidColor.WHITE // 扇形上的数值文字保持白色
setDrawValues(true) setDrawValues(true)
} }