flutter规则,flutter百度百科

Flutter Stack 的布局规则

Stack 是可以将视图根据children中子组件的顺序进行叠加的组件,根据子组件是否被Positioned包裹判断布局的方式

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网站空间、营销软件、网站建设、汝州网站维护、网站推广。

Stack 的fit 属性用来控制Stack如何将自己的父级组件的尺寸约束传达给无位置组件,通过fit属性约束Stack中无位置组件的尺寸,默认值是 StackFie.loose. 如:Stack的父级组件要求Stack的尺寸是 200x200 ~ 500x500.在默认的StackFit.loose(宽松状态)下,Stack 可以运行其children在不违反父级约束的前提下,自由选择尺寸,即可在0x0~500x500的范围内任意选择。相反如何传入的fit是StackFit.expand(扩张状态)下,则会要求所有无位置children必须占满父级约束的最大空间,即尺寸必须为500x500,最后当传入的StackFit.passthrough(穿透状态)时,Stack会将自己父级组件的尺寸约束直接传递给子组件,即保留原有的200x200 ~ 500x500的约束。

StackFie.loose 和StackFit.passthrough的效果

StackFit.expand的效果

【Flutter】引入包import的各种含义,及常用命名规则

import 'dart:xxx'; 引入Dart标准库

import 'xxx/xxx.dart'; 引入相对路径的Dart文件

import 'package:xxx/xxx.dart'; 引入Pub仓库pub.dev(或者pub.flutter-io.cn)中的第三方库

import 'package:project/xxx/xxx.dart'; 引入自定义的dart文件

import 'xxx' show compute1,compute2 只导入compute1,compute2

import 'xxx' hide compute3 除了compute都引入

import 'xxx' as compute4 将库重命名,当有名字冲突时

library compute5; 定义库名称

part of compute6; 表示文件属于某个库

文件导入顺序(从上到下依次)

dart sdk 内的库

flutter内的库

第三方库

自己的库(文件)

相对路径引用

命名规范:

文件夹:小写 下划线 lowercase_with_underscores

文件:小写 下划线 lowercase_with_underscores

类名:大写开头的驼峰命名法 UpperCamelCase

变量名:小写开头的驼峰命名法 lowerCamelCase

常量:小写开头的驼峰命名法 lowerCamelCase

首字母缩写词长度不超过两个字母的,首字母大写,比如 HttpRequest

长度两个字母的首字母缩写词可完全大写,比如 IOStream , DBUtils

但单个单词缩写仍然仅首字母大写,比如 Id

Flutter面试:渲染原理

页面中的各界面元素(Widget)以树的形式组织,即控件树。Flutter通过控件树中的每个控件创建不同类型的渲染对象,组成渲染对象树。而渲染对象树在Flutter的展示过程分为三个阶段:布局、绘制、合成和渲染。

(一)布局

Flutter采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。在布局过程中,渲染对象树中的每个渲染对象都会接收父对象的布局约束参数,决定自己的大小,然后父对象按照控件逻辑决定各个子对象的位置,完成布局过程。

为了防止因子节点发生变化而导致整个控件树重新布局,Flutter加入了一个机制——布局边界(Relayout Boundary),可以在某些节点自动或手动地设置布局边界,当边界内的任何对象发生重新布局时,不会影响边界外的对象,反之亦然。

二)绘制

布局完成后,渲染对象树中的每个节点都有了明确的尺寸和位置。Flutter会把所有的渲染对象绘制到不同的图层上。与布局过程一样,绘制过程也是深度优先遍历,而且总是先绘制自身,再绘制子节点。

以下图为例:节点1在绘制完自身后,会再绘制节点2,然后绘制它的子节点3、4和5,最后绘制节点6。

可以看到,由于一些其他原因(比如,视图手动合并)导致2的子节点5与它的兄弟节点6处于了同一层,这样会导致当节点2需要重绘的时候,与其无关的节点6也会被重绘,带来性能损耗。

为了解决这一问题,Flutter提出了与布局边界对应的机制——重绘边界(Repaint Boundary)。在重绘边界内,Flutter会强制切换新的图层,这样就可以避免边界内外的互相影响,避免无关内容置于同一图层引起不必要的重绘。

重绘边界的一个典型场景是Scrollview。ScrollView滚动的时候需要刷新视图内容,从而触发内容重绘。而当滚动内容重绘时,一般情况下其他内容是不需要重绘的,这时候重绘边界就派上用场了。

(三)合成和渲染

终端设备的页面越来越复杂,因此Flutter的渲染树层级通常很多,直接交付给渲染引擎进行多图层渲染,可能会出现大量渲染内容的重复绘制,所以还需要先进行一次图层合成,即将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果,将相同的图层归类合并,简化渲染树,提高渲染效率。

合并完成后,Flutter会将几何图层数据交由Skia引擎加工成二维图像数据,最终交由GPU进行渲染,完成界面的展示。

四、总结

咱们从各种业界主流跨端方案与Flutter的对比开始,到Flutter的简要介绍以及Flutter的运行机制,并以界面渲染过程为例,从布局、绘制、合成和渲染三个阶段讲述了Flutter的实现原理。相信大家对Flutter已经有一个整体认知,赶快一起上手操作起来吧!


网站名称:flutter规则,flutter百度百科
转载源于:http://myzitong.com/article/dsipiii.html