Question

我要创建一个“ TextSpans”列表。如果您按一个单词，则该单词应会更改。

例如：

这棵树看起来很棒 => onTapped'Tree'字符串应更改为这棵树看起来很好。

如果再次按下按钮，则该值应更改为默认值：这棵树看起来很棒。

反正有做吗？

class Satz extends StatefulWidget {
  @override
  _SatzState createState() => _SatzState();
}

class _SatzState extends State<Satz> {
  
  String stringValue= 'The tree looks great';
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      backgroundColor: Colors.blue,
          body: Container(
                 child: ListView.builder(

                   itemCount: 1,
                   itemBuilder: (context, length,){
                    return RichText(
                      text: TextSpan(
                        children: createTextSpans(stringValue)));
                   }) )
          );}}
  List<TextSpan> createTextSpans(stringValue){
    final string = stringValue;
    final arrayStrings = string.split(" ");
    List<TextSpan> arrayOfTextSpan = [];
    for (int index = 0; index < arrayStrings.length; index++){
      final text = arrayStrings[index] + " ";
      final span = TextSpan(
        text: text,
        style: TextStyle(fontSize: 50),
        recognizer: TapGestureRecognizer()..onTap = () {
          print(text);
        }
      );
      arrayOfTextSpan.add(span);
    }
    return arrayOfTextSpan;
}

非常感谢您。

Answer 1

我可以给你个主意。尝试这样的事情，

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

void main() {
  runApp(MaterialApp(
    home: Satz(),
  ));
}

class Satz extends StatefulWidget {
  @override
  _SatzState createState() => _SatzState();
}

class _SatzState extends State<Satz> {
  String stringValue = 'The tree looks great';
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
          child: ListView(
        children: [
          RichText(
            text: TextSpan(
              children: stringValue.split(' ').asMap().entries.map((entry) {
                String text = entry.value;
                int index = entry.key;
                return TextSpan(
                  text: text + " ",
                  style: TextStyle(fontSize: 50),
                  recognizer: new TapGestureRecognizer()
                    ..onTap = () {
                      List<String> correctedValue = stringValue.replaceAll(',','').split(' ');
                      print(correctedValue[index]);
                      if(!text.contains(',')){
                        correctedValue[index] += ',';                      
                      }
                      setState(
                        () {
                          stringValue = correctedValue.join(' ');
                        },
                      );
                    },
                );
              }).toList(),
            ),
          ),
        ],
      )),
    );
  }
}

Flutter TextSpan手势检测功能

1 个答案: