Flutter中如何实现被嵌套组件包裹的Text组件内联换行

要实现多个被InkWell包裹的文本片段像普通文本一样流式排版、自动换行，同时保留每个片段的独立点击事件和波纹效果，可以通过RichText + Stack + 文本区域测量的方式解决，具体实现如下：

核心思路 #

1. 用RichText渲染所有文本片段，确保整体排版和自动换行逻辑和普通文本一致
2. 通过TextPainter测量每个文本片段在RichText中的实际位置和边界
3. 在Stack中将InkWell精准定位到对应文本片段的区域上，实现点击事件和波纹效果

完整代码实现 #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class ClickableTextFlow extends StatefulWidget {
  final List<({String text, VoidCallback onTap})> items;
  final TextStyle? style;

  const ClickableTextFlow({
    super.key,
    required this.items,
    this.style,
  });

  @override
  State<ClickableTextFlow> createState() => _ClickableTextFlowState();
}

class _ClickableTextFlowState extends State<ClickableTextFlow> {
  final GlobalKey _textKey = GlobalKey();
  List<Rect> _clickableRegions = [];

  @override
  void didUpdateWidget(covariant ClickableTextFlow oldWidget) {
    super.didUpdateWidget(oldWidget);
    _calculateRegions();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _calculateRegions();
  }

  void _calculateRegions() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderParagraph = _textKey.currentContext?.findRenderObject() as RenderParagraph?;
      if (renderParagraph == null) return;

      final textPainter = renderParagraph.createTextPainter();
      final screenWidth = MediaQuery.of(context).size.width;
      textPainter.layout(maxWidth: screenWidth);

      final regions = <Rect>[];
      int currentOffset = 0;

      for (final item in widget.items) {
        final textLength = item.text.length;
        final endOffset = currentOffset + textLength;
        // 获取当前文本片段的边界矩形
        final textRect = textPainter.getBoxForSelection(
          TextSelection(baseOffset: currentOffset, extentOffset: endOffset),
        );
        regions.add(textRect);
        // 加上空格的偏移量（如果不是最后一个片段）
        currentOffset = endOffset + (item != widget.items.last ? 1 : 0);
      }

      setState(() => _clickableRegions = regions);
    });
  }

  @override
  Widget build(BuildContext context) {
    final defaultStyle = DefaultTextStyle.of(context).style;
    final textSpans = <TextSpan>[];

    for (int i = 0; i < widget.items.length; i++) {
      textSpans.add(TextSpan(
        text: widget.items[i].text,
        style: widget.style ?? defaultStyle,
      ));
      // 添加片段间的空格
      if (i != widget.items.length - 1) {
        textSpans.add(TextSpan(text: " ", style: widget.style ?? defaultStyle));
      }
    }

    return Stack(
      children: [
        RichText(
          key: _textKey,
          text: TextSpan(children: textSpans),
        ),
        // 叠加对应区域的InkWell
        ...List.generate(widget.items.length, (index) {
          if (_clickableRegions.length <= index) return const SizedBox.shrink();
          return Positioned.fromRect(
            rect: _clickableRegions[index],
            child: InkWell(
              onTap: widget.items[index].onTap,
              borderRadius: BorderRadius.zero,
            ),
          );
        }),
      ],
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: ClickableTextFlow(
          items: [
            (text: "苹果", onTap: () => print("苹果被点击")),
            (text: "香蕉", onTap: () => print("香蕉被点击")),
            (text: "大西瓜是一种很好吃的水果，夏天吃特别解渴，能有效补充身体流失的水分", onTap: () => print("大西瓜被点击")),
            (text: "葡萄", onTap: () => print("葡萄被点击")),
          ],
          style: TextStyle(fontSize: 16, color: Colors.black87),
        ),
      ),
    ),
  ));
}

说明 #

• 该组件会自动处理文本的流式换行，完全和普通文本的排版逻辑一致
• 每个文本片段的点击区域精准对应其渲染位置，点击时会显示InkWell的波纹效果
• 支持自定义文本样式，适配不同场景的需求

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