dart 如何在Flutter中搜索Html小部件中的文本？

crcmnpdw 于 2024-01-03 发布在 Flutter

关注(0)|答案(1)|浏览(174)

我有以下任务。屏幕显示我使用JSON格式的API接收的文本。此文本是包含HTML格式主体的字符串。为了显示，我使用flutter_html库和Html（）小部件。

Html(
   data: """here is my string value with html content""",             
),

字符串
我想实现在这个小部件中显示的文本中的单词搜索。如何才能做到这一点？（搜索我在这个屏幕上有一个textFormField）

dart

来源：https://stackoverflow.com/questions/77640026/how-to-search-in-the-text-in-html-widget-in-flutter

1条答案

按热度按时间

fnatzsnv1#

基础知识

为了解决这个问题，我们应该知道在html中，<mark>标签会突出显示字符串（进一步解释here）。
怎么办
所以我们有2个字符串，一个是主常量字符串，没有更新，另一个是html的源代码，可以更新以显示找到的单词。

static const _htmlBase = 'This is a sample html text which we are using the search function on.';

字符串
另一个在有状态小部件中。我们这里还有TextEditingController。

...
class _HtmlFinderPageState extends State<HtmlFinderPage> {
  final TextEditingController _searchController = TextEditingController();
  String _htmlBody = _htmlBase;
  ...
}
...

型
这是Column，包含我们用例的TextField小部件和Html小部件：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    TextField(
      controller: _searchController,
      decoration: const InputDecoration(
        suffixIcon: Icon(
          Icons.search,
        ),
        hintText: 'find',
      ),
      onChanged: _findTheValue,
    ),
    const SizedBox(height: 12),
    Html(
      data: '''
      <html>
        <body>
          $_htmlBody
        </body>
      </html>
      ''',
    )
  ],
),

型
_findTheValue()函数将_htmlBase字符串中找到的所有值替换为带有 Package 的<mark>标记的相同值，并更新_htmlBody。

void _findTheValue(value) {
  if (value.isNotEmpty) {
    setState(() {
      _htmlBody = _htmlBase.replaceAll(value, '<mark>$value</mark>');
    });
  } else {
    setState(() {
      _htmlBody = _htmlBase;
    });
  }
}

型
现在当我们运行这个，我们有一个包含文本的html，和一个在它上面的搜索字段。当我们在字段中输入时，我们的查询被找到文本并被突出显示。

输出

的数据

完整代码

这是Html finder页面的完整代码：

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

const _htmlBase = 'This is a sample html text which we are using the search function on.';

class HtmlFinderPage extends StatefulWidget {
  const HtmlFinderPage({super.key});

  @override
  State<HtmlFinderPage> createState() => _HtmlFinderPageState();
}

class _HtmlFinderPageState extends State<HtmlFinderPage> {
  final TextEditingController _searchController = TextEditingController();
  String _htmlBody = _htmlBase;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Html Finder'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _searchController,
                decoration: const InputDecoration(
                  suffixIcon: Icon(
                    Icons.search,
                  ),
                  hintText: 'find',
                ),
                onChanged: _findTheValue,
              ),
              const SizedBox(height: 12),
              Html(
                data: '''
                <html>
                  <body>
                    $_htmlBody
                  </body>
                </html>
                ''',
              )
            ],
          ),
        ),
      ),
    );
  }

  void _findTheValue(value) {
    if (value.isNotEmpty) {
      setState(() {
        _htmlBody = _htmlBase.replaceAll(value, '<mark>$value</mark>');
      });
    } else {
      setState(() {
        _htmlBody = _htmlBase;
      });
    }
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

型

GitHub上的完整项目代码

如果你只想运行和测试代码，你可以查看full project

赞(0）回复(0）举报 2024-01-03

我来回答

dart 如何在Flutter中搜索Html小部件中的文本？

1条答案

基础知识

输出

完整代码

GitHub上的完整项目代码

相关问题

热门标签

最新问答