element 字体大小_Flutter中的Element(上篇)

68ac5c5628f2b7db45b8e36d8341f104.gif

点击左上角QiShare,关注我们

925f7d3f15b7a15f03c5e5cf75f7f2fa.gif

级别:★☆☆☆☆
标签:「Flutter」「Element 」「生命周期 」
作者:沐灵洛
审校:QiShare团队


Element是什么?

Widget在树中特定位置的实例。文档中的描述:

An instantiation of a [Widget] at a particular location in the tree.

widgets描述如何配置一个子树,但是相同的widget可以同时被用来配置多个子树,这是因为widget是不可变的。一个Element表示在树中的特定位置对Widget配置数据的使用。随着时间的推移,Element关联的widget可能会变化。比如:如果此位置的widget对应的父widget重新构建了,并且在此位置重新创建了一个新的widget

树中的Elements:大多数的elementchild都是独一无二的,但是有一些widgets关联的element可以有多个children,比如RenderObjectElement的子类MultiChildRenderObjectElement

Element的生命周期
  • framework通过在将要被用来作为element的初始配置的widget上调用[Widget.createElement]创建一个element

  • framework通过调用[mount]将一个新创建的element加入树中给定的父节点的插槽下面。[mount]方法负责注入任何child widgets并且在有需要的时候,会调用[attachRenderObject]将关联的render objects 添加到渲染树render tree中。到这一步的时候element,会进入active状态,并且会显示在屏幕上。

  • 某些时候,父节点可能决定要改变使用在子element上的配置(widget)时。比如:父节点因为一个新的state重新build,(每次build都会产生一个新的widget)framework将使用新widget调用[update]方法,这个新的widget将总是拥有和旧widget同样的runtimeTypeKey。如果父节点希望改变树中此位置的新widget对应的runtimeTypeKey时,会unmount旧的element并且在此位置注入一个新的widget,(意味着使用新的widget创建一个新的element放在此位置)。

  • 还有一些时候呢,树中的祖先节点(或者中间的祖先),想要移除树中的某个element,该怎么办呢?祖先节点自己调用[deactivateChild]。当[deactivateChild]后会发生什么事情呢?祖先将从render tree中遍历移除elements对应的render objects,并且将这个元素加入到owner对应的不活跃的element数组中,最终导致framework对此element调用[deactivate]方法。

关于ownerBuildOwner类型的,它widgets framework的管理类 用于跟踪哪些widgets需要rebuild,并且处理一些适用于整个widget tree的其他任务。

  • 这个时候呢,element会进入inactive状态,并且不会出现在屏幕上。一个element可以保持inactive状态直到当前的动画帧结束。在动画帧结束的时候,所有处于inactiveelements将会被unmounted(即:调用[unmount]方法)。
  • 但是,当处于inactive状态的元素被重新合并到树中时(比如:它或它的祖先有能重用的global key时),framework将从ownerinactive elements数组中移除这个element,并且为此element调用[activate],同时  **reattach**此elementrender objectrender tree中。这时候呢,这个element将 再次变为active状态,并且可能出现在屏幕上。
  • 当处于inactive状态的elements,在当前动画帧结束的时候并没有被重新合并到树中时,framework将为每个elements调用[unmount]方法。
  • 到这时,element会变为defunct,并且以后将再也无法合并到树中(即宣告,element顽强而富有斗志的一生 end)。
Element的生命周期图解
89fced94649c076a33fe98c94abb75a2.png
Element的生命周期图解.png

下一篇我们将与大家一起探讨Element的一些重要的方法的作用以及调用时机。

关注我们的途径有:QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

iOS 解决 [NSURL fileURLWithPath:] 对 # 的编码问题
Xcode 调整导航目录字体大小b
Swift 5.1 (21) - 泛型
Swift 5.1 (20) - 协议
Swift 5.1 (19) -  扩展
Swift 5.1 (18) - 嵌套类型
Swift 5.1 (17) - 类型转换与模式匹配
浅谈编译过程
深入理解HTTPS
浅谈 GPU 及 “App渲染流程”
奇舞团安卓团队——aTaller
奇舞周刊


了解更多iOS及相关新技术,请关注我们的公众号:

8536c91d66aa8dd587b530f091aadb83.png 925f7d3f15b7a15f03c5e5cf75f7f2fa.gif
446d9ebf25f679f90cec3d2f8e0b5007.gif

更多精彩内容,尽在

Flutter,`webview_flutter`插件提供了在WebView嵌入网页和原生页面的功能,并允许进行一些交互。如果你想在WebView模拟安卓的`postUrl`请求,可以使用`WebView`组件的`postUrl`方法。以下是一个简单的示例代码,展示了如何使用`postUrl`方法发送POST请求: ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { String url = 'https://example.com'; // 目标URL String postData = 'user=test&password=test'; // POST数据 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView Flutter PostUrl Example'), ), body: WebView( initialUrl: url, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { controller.postUrl( Uri.parse(url).toString(), Uint8List.fromList(postData.codeUnits), ); }, ), ); } } ``` 这段代码创建了一个简单的Flutter应用,其包含了一个`WebView`。在`onWebViewCreated`回调,我们获取到了`WebView`的控制器,并通过调用`postUrl`方法发送了一个POST请求。`url`是请求的地址,`postData`是POST请求携带的数据,这里使用了`Uint8List`类型来表示要发送的数据,其`codeUnits`属性会将字符串转换为字节列表。 请注意,使用`postUrl`方法时,需要确保目标URL允许从你应用的WebView接收POST请求。此外,由于`webview_flutter`依赖于平台特定的WebView实现,因此某些功能的可用性可能会受到目标设备平台的限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值