Flutter应用中如何为字符串内指定单词添加下划线？

要给字符串里的「Capital」添加下划线，核心是用Flutter的RichText组件实现富文本样式，下面分两种场景给出实现方案：

场景1：自定义组件支持富文本参数 #

如果QuestionCategory是你自己实现的组件，可以直接修改它的参数类型，让question接收Widget类型，这样就能直接传入带样式的RichText：

第一步：修改QuestionCategory组件定义 #

class QuestionCategory extends StatelessWidget {
  final Widget question;
  final String correctAnswer;

  const QuestionCategory({
    Key? key,
    required this.question,
    required this.correctAnswer,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        question,
        Text('正确答案：$correctAnswer'),
      ],
    );
  }
}

第二步：使用组件时传入富文本 #

QuestionCategory(
  question: RichText(
    text: TextSpan(
      // 继承当前上下文的默认文本样式
      style: DefaultTextStyle.of(context).style,
      children: const [
        TextSpan(text: 'What is the '),
        TextSpan(
          text: 'Capital',
          // 添加下划线样式
          style: TextStyle(decoration: TextDecoration.underline),
        ),
        TextSpan(text: ' of India?'),
      ],
    ),
  ),
  correctAnswer: 'Delhi',
),

场景2：不修改原有组件，内部处理字符串 #

如果不想改动QuestionCategory的参数结构，可以在组件内部拆分原字符串，自动给「Capital」加上下划线：

class QuestionCategory extends StatelessWidget {
  final String question;
  final String correctAnswer;

  const QuestionCategory({
    Key? key,
    required this.question,
    required this.correctAnswer,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 拆分字符串，生成带样式的文本片段
    final textSpans = <TextSpan>[];
    final parts = question.split('Capital');

    for (int i = 0; i < parts.length; i++) {
      if (parts[i].isNotEmpty) {
        textSpans.add(TextSpan(text: parts[i]));
      }
      // 除了最后一段，后面都加上带下划线的Capital
      if (i != parts.length - 1) {
        textSpans.add(const TextSpan(
          text: 'Capital',
          style: TextStyle(decoration: TextDecoration.underline),
        ));
      }
    }

    return Column(
      children: [
        RichText(
          text: TextSpan(
            style: DefaultTextStyle.of(context).style,
            children: textSpans,
          ),
        ),
        Text('正确答案：$correctAnswer'),
      ],
    );
  }
}

使用时保持原有写法即可：

QuestionCategory(
  question: 'What is the Capital of India?',
  correctAnswer: 'Delhi',
),

自定义下划线样式 #

如果需要调整下划线的颜色、样式（虚线、波浪线等），可以扩展TextStyle的参数：

TextSpan(
  text: 'Capital',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red, // 下划线颜色
    decorationStyle: TextDecorationStyle.dashed, // 下划线样式（虚线）
    decorationThickness: 2, // 下划线粗细
  ),
),

内容的提问来源于stack exchange，提问作者Mahender Kumar