Flutter实现可点击分句换行布局：非Text组件左对齐换行

需求概述 #

• 需实现类似古兰经页面的布局，每个经文分句、每个单词都要支持点击事件
• 不能使用单纯的Text组件（需添加交互），Row/Column组件不适用（需要内容自动换行）
• 参考布局：
  
  目标页面效果：
  

当前实现方案 #

核心逻辑：将每个经文拆分为单词，每个单词用InkWell包裹以支持点击；同时每个经文整体也用InkWell包裹，最后将所有经文放入列表，通过Wrap组件展示。

核心代码 #

List<InkWell> versesList = [];
for (var i = 0; i < versesCount!; i++) {
  versesList.add(InkWell(
    onLongPress: () {},
    child: Wrap(
        direction: Axis.horizontal,
        textDirection: TextDirection.rtl,
        children:
            "${getVerse(surahNumb!, startVerse! + i, verseEndSymbol: true)}"
                .split(" ")
                .map((e) => InkWell(
                      onTap: () => () {},
                      child: Text(e),
                      //style: TextStyle(fontFamily: "Quran", fontSize: 18),
                    ))
                .toList()),
  ));

展示组件代码 #

SizedBox(
  width: 200,
  //height: 480,
  child: Wrap(
      direction: Axis.horizontal,
      alignment: WrapAlignment.start,
      textDirection: TextDirection.rtl,
      children: quranController.versesList),

效果对比 #

• 当前实现效果：
  
• 期望实现效果：
  

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