Flutter如何根据状态文本内容为文本设置对应背景高亮颜色

你可以通过判断状态值匹配对应背景色，将原有的Text组件用Chip（推荐，自带标签样式）或Container包裹即可实现需求，修改步骤如下：

1. 先封装获取状态背景色的方法，方便后续维护扩展

Color getStatusBackgroundColor(String status) {
  switch (status) {
    case "Unassigned":
      return Colors.purple;
    case "Resolved":
      return Colors.green;
    case "Closed":
      return Colors.red;
    default:
      return Colors.grey; // 未知状态兜底颜色
  }
}

2. 修改原有布局代码
   这里推荐使用Chip组件，自带圆角、内边距，适配状态标签场景：

List<TicketModel> arrayList = [];

Row(
  children: [
    Text(
      "Status",
      style: Themes.getPlanCellTitleLabelTextStyle(context),
    ),
    const Spacer(),
    Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Chip(
          label: Text(
            "${arrayList[index].status}",
            // 深色背景搭配白色文字提高可读性，可自行调整
            style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          backgroundColor: getStatusBackgroundColor(arrayList[index].status),
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
      ],
    )
  ],
);

如果你需要完全自定义样式，也可以用Container实现，替换上述Chip部分的代码即可：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
  decoration: BoxDecoration(
    color: getStatusBackgroundColor(arrayList[index].status),
    borderRadius: BorderRadius.circular(20), // 调整圆角大小
  ),
  child: Text(
    "${arrayList[index].status}",
    style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  ),
)

你可以根据实际设计需求调整圆角、内边距、文字样式等参数。

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari