You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter:修改文本选中后的文字颜色

解决Flutter选中文本与背景同色导致无法看清的问题

你当前将selectionColor设为白色,而文本本身也是白色,导致选中文本时文字与背景混在一起无法分辨。以下是两种全局生效的解决办法:

方案1:修改选中文本的背景色(推荐)

直接将selectionColor替换为与白色文本对比明显的深色,同时可统一设置选中文本手柄的颜色,确保视觉协调:

textSelectionTheme: TextSelectionThemeData(
    cursorColor: Colors.white, // 保留原光标白色设置
    selectionColor: Colors.grey[800], // 深色背景与白色文本形成清晰对比
    selectionHandleColor: Colors.white, // 可选:设置选中文本手柄为白色,保持风格统一
),

方案2:修改选中文本的文字颜色

若需要保留白色的选中背景,可全局设置文本样式,指定选中文本的颜色:

theme: ThemeData(
    textTheme: TextTheme(
        bodyText2: TextStyle(
            color: Colors.white, // 未选中时的文本颜色
            selectionColor: Colors.black, // 选中文本的颜色
        ),
        // 需同步设置其他文本样式(如headline、subtitle等),确保全局覆盖
    ),
    textSelectionTheme: TextSelectionThemeData(
        cursorColor: Colors.white,
        selectionColor: Colors.white, // 保留原白色背景设置
    ),
),

方案1配置更简单,且能避免遗漏不同文本样式的设置,优先推荐。

内容的提问来源于stack exchange,提问作者Ryokugin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 19:31:02