richtext，列表中的textspan

Question

我对扑动没有太多经验。

我想使用language_tool库(https://pub.dev/packages/language_tool)飞镖和长笛。

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

要做到这一点，我想使用RichText小部件和TextSpan，如下所述：使文本的特定部分可以在flutter 中点击

现在我已经写了这个代码，但我不知道如何进行

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 + ' ')
],
],
),
),
),
),
],
),
),
);
}
}