Flutter 中文本小部件內的可拖動文本部分

Question

我正在制作一個游戲，用戶可以在不傷害字符串的 rest 的情況下拖動字符串的某些部分（圖像中用紅色突出顯示）。 為了指定哪些文本可以拖動，我將可拖動部分編碼為以下格式：x{String}x。 我在 _constructGame function 中解碼了它。我期待一個組織良好的字符串，但事實證明它沒有發生。 我遇到了邏輯錯誤，而不是系統錯誤。 但我不能只是弄清楚。 我嘗試進行研究，但它們與我的問題無關。

為了達到我的目標，我還使用了一個小部件列表，比如固定文本、可拖動部分、固定文本……

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:schoolproject/GameTextList.dart';

class GameRoute extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _GameRouteState();
  
}

class _GameRouteState extends State<GameRoute>{

  // Random().nextInt(GameTextList.texts.length)
  String gameText = GameTextList.texts[0];

  Draggable _createDraggableText(String text) {
    return Draggable<String>(
      data: text,
      child: Text(
        text,
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
      ),
      feedback: Text(
        text,
        style: TextStyle(fontSize: 16.0,fontWeight: FontWeight.bold, color: Colors.red),
      ),
      childWhenDragging: Text(
        text,
        style: TextStyle(color: Colors.grey),
      ),
    );
  }

  // Precondition: There must be at least one draggable
  List<Widget> _constructGame(String mes) {
    List<Widget> widgets = <Widget>[];

    // Decode the message
    int i = 0;
    int j = 0;
    while (i != mes.length - 1) {
      if (mes[i] == "x" && mes[i + 1] == "{") {
        var last = mes.indexOf("}x", i);
        widgets.add(Text(mes.substring(j, i))); // Bugün hava çok
        widgets.add(_createDraggableText(mes.substring(i + 2, last))); // soğuktu
        j = last + 2;
      }
      i++;
    }
    // add the remaining part of the text
    widgets.add(Text(mes.substring(j, mes.length)));
    return widgets;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Egzersiz")),
      body: Wrap(
        children: _constructGame(gameText),
      )
      );
  }

}

---

class GameTextList {
    static List<String> texts = [
      "Bugün hava çok x{soğuktuuuuuuuuuuuuuuu}x. Fakat üstümüze mont giymeyi x{unuttuk}x. Şu an yağmur x{yağıyor}x. Son zamanlarda"
          " hava düzensiz olabileceğinden tedbirli olmak x{gerekecekmiş}x.",

      "Planktonların varlığı ekosistem için x{mühimdir}x hatta onlar x{olmasaydı}x  Dünyadaki canlıların bir çoğu yok "
          "x{olurdu}x. Nitekim bu canlılar atmosferdeki oksijenin %50'sini x{oluştururlar}x. Yine de insanlar bilinçsizce"
          " denize atık bırakmaya devam x{ederse}x solunulacak bir x{kalmayacak}x.",

      "Uranyumun keşfedildiği tarih x{1789'dur}x.",

      """
Yapma x{ne olursun}x, bırak o yerimi x{doldursun}x. Bana ihtiyacın x{olursa}x sarıl ona, elbet x{unutursun}x.x{Girmişşe}x kalbine bambaşka biri...""",

    ];
}

Answer 1

分析您的代碼后，我對您的方法中的_constructGame進行了一些更改，現在它可以正常工作了。 我只是簡單地調試並確定您一次只需要在小部件列表中添加一個單詞，就像您為提取x{Draggable Word}x所做的那樣。所以我為普通字符串添加代碼並為相同的舊行添加注釋。

添加代碼：

final noramlStringArray = normalString.split(" ");
    noramlStringArray.asMap().forEach((index, word) {
    if (index != (noramlStringArray.length - 1)) {
      widgets.add(Text("$word ")); // add word with trailing space 
    } else {
      widgets.add(Text(word)); // add last word without space 
    }
});

如果字符串包含用單個空格替換的雙倍或更多空格，則添加String extension以刪除多余的空格。

extension on String {
  String removeExtraWhiteSpace() {
    return replaceAll(RegExp("[ \t\r\f]"), " ");
  }
}

在下面的行中使用了 removeExtraWhiteSpace()擴展。

_constructGame(gameText.removeExtraWhiteSpace())

用下面的代碼替換你的_constructGame方法。

 // Precondition: There must be at least one draggable
List<Widget> _constructGame(String mes) {
    List<Widget> widgets = <Widget>[];
    
    try {
      // Decode the message
      int i = 0;
      int j = 0;
      while (i != mes.length - 1) {
        if (mes[i] == "x" && mes[i + 1] == "{") {
          var last = mes.indexOf("}x", i);
    
          final normalString = mes.substring(j, i);
          final noramlStringArray = normalString.split(" ");
          noramlStringArray.asMap().forEach((index, word) {
            if (index != (noramlStringArray.length - 1)) {
              widgets.add(Text("$word ")); // add word with trailing space 
            } else {
              widgets.add(Text(word)); // add last word without space 
            }
          });
    
          //widgets.add(Text(mes.substring(j, i))); // Bugün hava çok
    
          widgets
              .add(_createDraggableText(mes.substring(i + 2, last))); // soğuktu
          j = last + 2;
        }
        i++;
      }
      // add the remaining part of the text
      //widgets.add(Text(mes.substring(j, mes.length)));
      final normalString = mes.substring(j, mes.length);
    
      final noramlStringArray = normalString.split(" ");
      noramlStringArray.asMap().forEach((index, word) {
        if (index != (noramlStringArray.length - 1)) {
          widgets.add(Text("$word "));
        } else {
          widgets.add(Text(word));
        }
      });
      return widgets;
    } catch (ex) {
      debugPrint("Error: $ex");
      return widgets;
    }
}

如果您的單詞不會設置為保持寬度，那么它只會自動設置為換行符。