如何使从Flutter中的JSON动态接收的文本可点击? [英] How to make a piece of text dynamically received from json clickable in Flutter?

问题描述

我想知道是否可以使用任何方法(实现，程序包)来制作动态接收的字符串CLICKABLE的特定部分.

I would like to know if there's any way(implementation, package) I could use to make a specific part of a dynamically received String, CLICKABLE.

例如，让我们看一下这个json文件.

For example, let's take a look at this json file.

我想知道是否在包含所有用户的列表构建器中显示该用户之后，是否可以在突出显示的客户端-服务器"字词上使用某种可单击的扁平按钮，以便在按下该按钮时，我可以导航到一个单独的词典页面，然后进一步搜索该单词?

I would like to know if after I display this user in a list builder which contains all the users, can I have some kind of a clickable flatbutton on that highlighted "client-server" word, so that when I press it, I can navigate let's say to a separate dictionary page, and search for that word furthermore?

我的意思是，如何标记客户端服务器"一词，因此Flutter可以帮助我在建立列表时使其动态可点击?有什么办法可以做到吗?尤其是能够附加索引或ID，以便可以在其他屏幕上使用它?

I mean, how can I mark the "client-server" word, so Flutter can help me get it dynamically clickable while building the list? Is there any way I could do that? Especially being able to have an index or an id attached to it so that I can use it in another screen?

作为一种解决方案，我想知道是否可以使用html(client-server)之类的一些按钮标记将json文件中的"client-server"一词包装起来，当我将字符串设置为flutter小部件时，是否可以用id或名称识别它，以便在按下它时可以将名称或/和id传递给导航器，以便在字典中搜索它，但是坦率地说，就像我在网络上搜索时一样，没有什么可以做这种行为.

As a solution, I was wondering if I could wrap that "client-server" word in the json file with some button tags like in html ( client-server ) and when I set the string to the flutter widget it could somehow recognise it with an id or a name so that when I press it, I can pass the name or/and the id to the Navigator searching for it in the dictionary, but frankly as I've searched on the web, there's nothing that can do this type of behaviour.

在此先感谢您抽出宝贵的时间来阅读我的问题.

Thank you in advance for taking the time to read my question.

推荐答案

List<Map> products = [];

  @override
  void initState() {
    super.initState();
    Map tmp = {
      "products": [
        {
          "prod_id": "prod-345",
          "name": "Something",
          "category": "Cloth",
          "thumbnail": "",
          "desc": 'An example of description',
          "click_on": 'example',
          'action': 'https://google.com'
        },
        {
          "prod_id": "prod-123",
          "name": "Something Else",
          "category": "Watch",
          "thumbnail": "",
          "desc": '2nd example of description',
          "click_on": 'description',
          'action': 'second_screen'
        },
      ]
    };
    products.addAll(tmp['products']);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Let\'s parse some JSON'),
        ),
        body: Container(
            padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
            child: ListView.builder(
                itemCount: products.length,
                itemBuilder: (cc, ind) {
                  return ListTile(
                      title: Text(products[ind]['name']),
                      subtitle: Text.rich(TextSpan(
                          text: products[ind]['desc'].toString().substring(
                              0,
                              products[ind]['desc'].toString().indexOf(
                                  products[ind]['click_on'].toString())),
                          children: <TextSpan>[
                            TextSpan(
                              //if you want style !
                              style:TextStyle(
                              decoration:TextDecoration.underline,
                              ),
                              text: products[ind]['click_on'],
                              recognizer: new TapGestureRecognizer()
                                ..onTap = () => print('Tap Here onTap'),
                            ),
                            TextSpan(
                              text: products[ind]['desc'].toString().substring(
                                  products[ind]['desc'].toString().indexOf(
                                          products[ind]['click_on']
                                              .toString()) +
                                      products[ind]['click_on']
                                          .toString()
                                          .length,
                                  products[ind]['desc'].toString().length),
                            )
                          ])));
                })));
  }

这篇关于如何使从Flutter中的JSON动态接收的文本可点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！