string - 当它被点击时改变字符串内的单个字符样式
问题描述
例如,我有欢迎词,当用户单击字母 ci 获取位置时,我想更改 c 的颜色,但我无法将此位置更改为字符串的索引。我使用 RichText 在一个字符串中使用不同的样式,这是代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:positioned_tap_detector/positioned_tap_detector.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
RichText rich;
String word;
String letter;
String pressedLetter;
Color color = Colors.black;
TapPosition _position = TapPosition(Offset.zero, Offset.zero);
int x=0;
int y=0;
@override
Widget build(BuildContext context) {
word = 'ویژدان';
letter = 'د';
var blackRt = new GestureDetector(
child: Text(
word,
style: TextStyle(fontSize: 25),
),
onTap: () {
setState(() {
color = Colors.red;
});
});
var redRt = useDifferentDesignInAString(word, Colors.red);
Widget currentRT = new Container();
if (color == Colors.black)
currentRT = blackRt;
else if (color == Colors.red) currentRT = redRt;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: PositionedTapDetector(
onTap: _onTap,
child: currentRT,
),
),
);
}
void _onTap(TapPosition position) {
setState((){
_position = position;
x=position.global.dx.toInt();
y=position.global.dy.toInt();
String pressed=word[offset];
});
}
RichText useDifferentDesignInAString(String word, Color color) {
String firstPart = "";
String remain = "";
RichText richText;
if (word.startsWith(letter)) {
richText = RichText(
text: TextSpan(
text: letter,
style: TextStyle(color: color, fontSize: 25),
children: <TextSpan>[
TextSpan(
text: word.substring(1, word.length),
style: TextStyle(color: Colors.black, fontSize: 25)),
],
),
);
} else if (word.endsWith(letter)) {
richText = RichText(
text: TextSpan(
text: word.substring(0, word.length - 2),
style: TextStyle(color: Colors.black, fontSize: 25),
children: <TextSpan>[
TextSpan(text: letter, style: TextStyle(color: color, fontSize: 25))
],
),
);
} else {
for (int i = 0; i < word.length; i++) {
if (word[i] != letter && i < word.indexOf(letter)) {
firstPart = firstPart + word[i];
} else if (word[i] != letter && i > word.indexOf(letter)) {
remain = remain + word[i];
}
}
richText = RichText(
text: TextSpan(
text: firstPart,
style: TextStyle(color: Colors.black, fontSize: 25),
children: <TextSpan>[
TextSpan(
text: letter,
style: TextStyle(color: color, fontSize: 25),
),
TextSpan(
text: remain,
style: TextStyle(color: Colors.black, fontSize: 25)),
],
),
);
}
return richText;
}
}
问题在于 ontap 方法内部,当我找到位置时,我无法将其转换为索引以获取单击的真实字符,如果它是 c 更改颜色,否则显示吐司。
解决方案
推荐阅读
- r - 为向量元素分配与前一个匹配值相关的值
- python - GP 回归模型为所有测试输入预测非常相似的数字
- java - Spring Boot在包含签名的jar文件时启动缓慢
- marklogic - 数组的 TDE 标量类型
- laravel-5 - 通过 Postman 调用 API 调用工作正常,但当被网页调用时,它陷入困境并返回失败
- c# - 如何在 WPF 中更改 listviewitems 突出显示的颜色
- java - 如何使用弹簧靴使用自定义验证器保存具有字段的对象?
- c++ - Visual Studio - Imread 系统找不到指定的文件
- r - 如何在这个回归图中跨十分位数添加中值?
- python - 如何使用 keras 预测两个数值列?