flutter

Question

我对 flutter 没有多少经验。

我想为 Dart 和 Flutter 使用 language_tool 库 (https://pub.dev/packages/language_tool)。

我正在尝试创建一个文本，其中可以点击 tool() 函数发现的错误。

为此，我想到了将 RichText 小部件与 TextSpan 一起使用，如下所述：

至此我写了这段代码，但我不知道如何继续

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

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele';

  List<WritingMistake> mistakes = [];

  List<TextSpan> richtext = [];

  void tool(String text) async {
    var tool = LanguageTool();
    var result = tool.check(text);
    var correction = await result;

    for (var m in correction) {
      WritingMistake mistake = WritingMistake(
        message: m.message,
        offset: m.offset,
        length: m.length,
        issueType: m.issueType,
        issueDescription: m.issueDescription,
        replacements: m.replacements,
      );

      mistakes.add(mistake);
    }

    print(mistakes.length);
    print(mistakes);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                  child: Text(text, style: const TextStyle(fontSize: 20.0))),
            ),
            Container(
              color: Colors.blue,
              height: 150.0,
              width: double.infinity,
              child: Center(
                child: Container(
                  child: RichText(
                    text: TextSpan(
                      text: '',
                      style: TextStyle(color: Colors.black),
                      children: richtext,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我希望我说的很清楚，希望有人能帮助我。

谢谢:)

Answer 1

这是一个小示例，说明您的可点击字词在内容中应该是什么样子。复制并粘贴到 DartPad 中进行操作。

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

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  List<String> mistakes = ['bugs', 'error'];
  String content = 'Your application status is error free'
      ' and no bugs were found.';

  Future<void> onTap(String text) async {
    print(text);
  }

  @override
  Widget build(BuildContext context) {
    String text = 'Henlo i am Gabriele';

    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                child: Text(text, style: const TextStyle(fontSize: 20.0)),
              ),
            ),
            Container(
              color: Colors.blue,
              height: 150.0,
              width: double.infinity,
              child: Center(
                child: RichText(
                  text: TextSpan(
                    text: 'App status: ',
                    style: const TextStyle(color: Colors.black),
                    children: [
                      for (String word in content.split(' '))
                        if (mistakes.contains(word)) ...[
                          TextSpan(
                            text: word + ' ',
                            style: const TextStyle(fontWeight: FontWeight.bold),
                            recognizer: TapGestureRecognizer()
                              ..onTap = () {
                                // Do anything with the state on click.
                                onTap(word);
                              },
                          )
                        ] else ...[
                          TextSpan(text: word + ' ')
                        ],
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

flutter - richtext，列表中的 textspan

flutter - richtext, textspan from a list

dart

richtext

languagetool