gpt4 book ai didi

html - Laravel 搜索结果包含 HTML 并在 Flutter UI 中呈现

转载 作者:IT王子 更新时间:2023-10-29 07:14:59 24 4
gpt4 key购买 nike

我有一个连接到基于 Laravel 构建的数据库的 flutter 应用程序。本质上,我们的用户将拥有一个个人资料,他们的个人资料将与某些类型的帖子相匹配。当这些帖子匹配并显示在前端时(我认为它们以 JSON 形式返回,但不是 100% 确定),我们希望这些结果中的某些字段包含一些在我们的 Flutter UI 中呈现的 html。

诸如 ul、li、换行符、p 和粗体之类的东西。没什么大不了的。为了做到这一点,阅读这些文本字段的正确方法是什么?

最佳答案

我认为,有两种可能的解决方案。

第一种解决方案:

尝试在 pubspec.ymal 中添加以下依赖

dependencies:
flutter_html_view: ^0.5.11

然后像这样使用它:

import 'package:flutter_html_view/flutter_html_view.dart';

String html = '<body>Hello world! <a href="#">HTML5 rocks!</a> <ul><li>test</li></ul>';

new HtmlView(
data: html,
baseURL: "", // optional, type String
onLaunchFail: (url) { // optional, type Function
print("launch $url failed");
},
scrollable: false
)

支持的标签有:

  • p
  • 他们
  • b
  • 图片
  • 视频
  • h1, h2, h3, h4, h5, h6

注意事项

这个插件将一些html标签转换为flutter widgets此插件不支持渲染完整的 html 代码(没有内置支持 flutter 中的网页渲染)

第二种解决方案:

基本上,您需要将 html 转换为 Markdown。

dependencies
html2md: "^0.3.2"
flutter_markdown: "^0.2.0"

代码是这样的

//importing packages
import 'package:html2md/html2md.dart' as html2md;
import 'package:flutter_markdown/flutter_markdown.dart';

// get the html string
static String html = '<h1>This is heading 1</h1> <h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><img alt="Test Image" src="https://i.ytimg.com/vi/RHLknisJ-Sg/maxresdefault.jpg" /><p>This paragraph contains a lot of lines in the source code, but the browser ignores it.</p>';

//convert it
String markdown = html2md.convert(html);

要在小部件上使用它,只需执行以下操作:

new MarkdownBody(
data: markdown,
)

关于html - Laravel 搜索结果包含 HTML 并在 Flutter UI 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57665102/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com