Flutter：使用 TapGestureRecognizer 更改 TextSpan 的文本样式

Posted 2023-02-27

【中文标题】Flutter：使用 TapGestureRecognizer 更改 TextSpan 的文本样式

【英文标题】：Flutter: Changing textstyle of TextSpan with TapGestureRecognizer

【发布时间】：2019-04-24 22:12:41

【问题描述】：

我想让文本中的每个单词都可以点击。然后，当点击一个特定的单词时，它的 textcolor 应该会改变。

让每个单词都可以点击就可以了。但是，当我单击一个单词时，不知何故 textcolor 不会改变。这是我走了多远：

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

 class MakeStringClickable extends StatefulWidget
 @override
 State<StatefulWidget> createState() 
 // TODO: implement createState
 return _MakeStringClickableState();
 
 

class _MakeStringClickableState extends State<MakeStringClickable>

String textToSplit = 'I would like to make each word clickable. On click of a particular word it's color should change.';

@override
Widget build(BuildContext context) 
return Scaffold(
  body: Container(
      alignment: Alignment.center,
      child: _buildTextSpanWithSplittedText(textToSplit, context)
  ),
);


RichText _buildTextSpanWithSplittedText(String textToSplit, BuildContext context) 
bool isPressed = false;
final splittedText = textToSplit.split(" ");
final spans = new List<TextSpan>();

  for(int i = 0; i <= splittedText.length - 1; i++ )
    spans.add(TextSpan(
      text: splittedText[i].toString() + " ",
      style: TextStyle(color: isPressed ? Colors.black : Colors.red),
      recognizer: new TapGestureRecognizer()..onTap = () 
      setState(() isPressed = !isPressed;);
      
    ));
  
  return RichText(text: TextSpan(children: spans));

我希望单击任何单词时它的颜色都会变为黑色，但是以某种方式更改样式无法按预期工作。我希望有人能够帮助我。

【参考方案1】：

第一个问题是 _buildTextSpanWithSplittedText 方法中有 isPressed ，每次重新绘制时都会覆盖该方法。如果您将该变量保留在类级别，它将应用于所有 TextSpan。 所以一个可能的解决方案是使用 List，这里是一个例子：

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

class MakeStringClickable extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _MakeStringClickableState();
  


class _MakeStringClickableState extends State<MakeStringClickable> 
  List<TapSection> sections;
  String textToSplit =
      'FirstWord would like to make each word clickable. On click of a particular word it\'s color should change.';
  TapGestureRecognizer r1;
  @override
  void initState() 
    sections = List<TapSection>();
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Container(
        alignment: Alignment.center,
        child: _buildTextSpanWithSplittedText(textToSplit, context));
  

  RichText _buildTextSpanWithSplittedText(
      String textToSplit, BuildContext context) 
    final splittedText = textToSplit.split(" ");
    final spans = List<TextSpan>();
    for (int i = 0; i <= splittedText.length - 1; i++) 
      var tapSection = TapSection(callBack: () 
        setState(() );
      );
      sections.add(tapSection);
      spans.add(TextSpan(
          text: splittedText[i].toString() + " ",
          style: TextStyle(
              color: sections[i].isPressed ? Colors.black : Colors.red),
          recognizer: sections[i].recognizer));
    
    return RichText(text: TextSpan(children: spans));
  


class TapSection 
  TapGestureRecognizer recognizer;
  bool isPressed = false;
  final Function callBack;

  TapSection(this.callBack) 
    recognizer = TapGestureRecognizer();
    recognizer.onTap = () 
      this.isPressed = !this.isPressed;
      this.callBack();
    ;
  

请注意，我们需要调用 setState 作为此解决方案的回调。 希望对您有所帮助。

【讨论】：

太棒了，就像我想象的那样！非常感谢您的时间和帮助！ :) 还有一个问题：我想一次只允许一个术语来改变它的颜色。因此，当我单击第二个术语时，它应该更改它的颜色，并且我之前按下的术语应该将它的颜色更改回默认值。我该如何操作代码来做到这一点？非常感谢您的进一步帮助！