Flutter Widget 之 package:html

773 阅读1分钟

你厌倦了Flutter的小部件树吗?

image.png

你怀念HTML DOM吗?

image.png

那就来看看HTML包,package:html是一个html5解析器,它给你一个HTML文档的模型的对象

Dart不是网络浏览器,所以我们确实需要HTML解析器来获取DOM,获取你一直想要解析的HTML并将其发送给解析器,这回返回一个document,你猜怎么着?

你可以从JavaScript中访问许多你熟悉的访问器了

import 'package:html/parser.dart';

String myHtml = '<body><div id = "dash"><p>Hello</p></body>';

var document = parse(myHtml);

这包括outerHtml

image.png

getElementById()

image.png

或querySelectorAll()

image.png

最常见的选择器是为像querySelector这样的方法实现的,但不是全部。

例如,像类型的第一个元素或类型的最后一个元素,这样的伪类选择器将不被实现

print(document.querySelectorAll("div:first-of-type"));

// Unhandled expection:
// UnimplementError: 'first-of-type' selector
// of type PseudoClassSelector is not implemented
print(document.querySelectorAll("div:last-of-type"));

// Unhandled expection:
// UnimplementError: 'last-of-type' selector
// of type PseudoClassSelector is not implemented

但除此之外,你现在可以访问完整的DOM树了

image.png

如果想了解有关package:html 的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址