Flutter中如何让双列布局里的图标与多行RichText对齐？

你当前的代码把所有多行RichText放在一个Column，所有图标放在另一个独立Column，由于多行文本的高度不一致，导致图标无法和对应的文本行准确对齐。要实现每组文本与图标在同一行对齐，核心是调整布局结构：

解决思路 #

把每一组RichText和对应的Icon包装在单独的Row组件中，让每一组成为独立的垂直排列单元，这样不管文本是单行还是多行，都能和图标保持对齐。同时给RichText外层套Expanded，避免文本超出屏幕宽度。

修改后的完整代码 #

child: Column(
  children: [
    // 第一组：文本+图标
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'Revision notes\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'Free notes.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.done_rounded,
          color: Colors.green,
          size: 24.0,
        ),
      ],
    ),
    // 第二组：Quizzes
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'Quizzes\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'Free quizzes.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.done_rounded,
          color: Colors.green,
          size: 24.0,
        ),
      ],
    ),
    // 第三组：No Ads
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'No Ads\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'All annoying ads gone.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.done_rounded,
          color: Colors.green,
          size: 24.0,
        ),
      ],
    ),
    // 第四组：10 Flashcards
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: '10 Flashcards\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'Create your own 10 flashcards.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.done_rounded,
          color: Colors.green,
          size: 24.0,
        ),
      ],
    ),
    // 第五组：Textbooks
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'Textbooks\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'Download all textbooks in PDF.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.close,
          color: Colors.red,
          size: 24.0,
        ),
      ],
    ),
    // 第六组：State Trial Papers
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'State Trial Papers\n',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                TextSpan(text: 'Download all trial papers in PDF.'),
              ],
            ),
          ),
        ),
        Icon(
          Icons.close,
          color: Colors.red,
          size: 24.0,
        ),
      ],
    ),
  ],
),

关键细节说明 #

• 外层用Column包裹所有行单元，保证各组垂直排列
• 每个Row内用Expanded包裹RichText，让文本自动填充剩余宽度，避免溢出屏幕
• 设置Row的crossAxisAlignment: CrossAxisAlignment.start，让图标和文本的顶部对齐；如果需要图标和文本垂直居中，可改为CrossAxisAlignment.center

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