大坡3D软件开发

前面学习了表格类似的布局容器，在这里也有列表形式的容器，比如List容器。特别适合图片进行浏览显示，这样用户可以不断地滚动查看图片，差不多是无限查看的可能。.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线。.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果。采用列面，本身就可以滚动，所以可以上下查看内容。这里设置的排列方向为竖直的排列方向。

.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // 同时设置合理的行列号。}.columnStart(1).columnEnd(4) // 只设置列号，不会从第1列开始布局。从上图看到4字这项占用的空间比较大，其它的是一样的，这样的布局又是如何实现的呢？这时候就需要使用到GridItem容器。就是上面显示最后那列内容为5的表格。这样设置就会显示为4的单元格大小。

而这个行列布局完全靠两个字符串来决定，因此，灵活性上来说，它没有GridRow容器灵活，但是它简单一些，对于大量元素显示的布局就比较合适，比如图片浏览显示等等。主要的属性就两个，第一个属性是columnsTemplate，它是设置每行多少列显示的。例如， '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。设置为'0fr'时，该列的列宽为0，不显示GridItem。如果这两个属性都设置，那么只按照这个设置进行显示，多余不会显示。

在不同屏幕上布局是一个比较困难的问题，因为屏幕大小不一样，导致内容布局会比较混乱。所以提出一种网络的方式来布局，即使屏幕大小改变了，但是布局行列数不变，那么内容就不会混乱。这个参数是用来设置判断不同屏幕大小时，进行切换的判断标准。当屏幕大小为xs时，空间占用两格，当屏幕为sm时，占用3格，当为md时，占用4格。这个参数是用来表示每格之间的间距，x是表示横向方向，y是表示竖向方式。要想把这种布局搞好，还是需要不断试验和修改才能调整适合不同设备的界面。所以可以根据这个情况来设置界面的布局。主要有上面这些标志。

前面学习了Column等容器，现在学习一个灵活弹性的容器，它就是Flex容器。它可以让容器里面的组件按不同的方式来排序前后，而不需要调整界面显示的代码。在这里可以看到组件显示的方向不一样，前面一行是从左到右进行布局，而后面一行是从右到左布局。针对这种需求，只能使用Flex容器才能方便实现。标准Flex布局容器。这是方向参数的区别。

要在文本组件里显示出来，需要定义一个数字变量，然后在上面两个事件里对这个变量进行计数，点击减少就对变量进行减少，点击增加就对变量进行增加，然后就可以在文本组件里显示出变量的值变化。这段就是事件响应代码，如果变量值不是按1变化，可以按10变化地修改。上面组件中间显示5的组件是一个文本组件，边上提供了增减的按钮。

这样就可以拖动的操作了。

这个Column容器设置显示为上一个容器的90%宽度，所以在手机两边就留有空间。其中看到每个边框有实线的也是一个Column容器，这里只不过把它的边框显示出来，最外面这个Column没有把边框线显示出来。先在最外面建立一个Column容器，space和方框显示等显示内容都是作为一行进行排列。如果一行里子容器不填满宽度，那么就需要进行排列，默认是中间排列，也可以设置为从左向右，或者从右向左都可行。这个容器已经使用了很多次，但是还是需要来简单地学习一下，它的主要作用是沿垂直方向布局的容器。

在开发应用的时候，经常需要一些提示，特别当用户打开应用时，有一些事情需要提醒一下用户，但是不能自动打开这个窗口提示，这样会让用户比较烦。方法1： Badge(value: {count: number, position?在这里显示红点的地方，就是目前介绍的容器Badge实现的功能。从上面来看，有三种不同的形式，一种是在图标上显示一个红点，一种是图标后面显示红色文字，最后一种是显示一个数量。方法2： Badge(value: {value: string, position?根据字符串创建标记组件。

EGL 是渲染 API(如 OpenGL ES)和原生窗口系统之间的接口,通常来说，OpenGL 是一个操作 GPU 的 API，它通过驱动向 GPU 发送相关指令，控制图形渲染管线状态机的运行状态，但是当涉及到与本地窗口系统进行交互时，就需要这么一个中间层，且它最好是与平台无关的,因此 EGL 被设计出来，作为 OpenGL 和原生窗口系统之间的桥梁。这也许就是EGL的功劳吧，简单地说EGL就是Opengl和平台各平台之间的一个适配器，是一系列的接口，具体实现是由具体的设备厂商实现的。

并且使用GL_FLOAT类型，由于坐标值已经归一化，也就是在-1到1之间，所以设置为GL_FALSE，无须归一化处理。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。这个数组定义了三角形的三个坐标，第一个顶点是（0.0f, 0.5f, 0.0f），第二个顶点是（-0.5f, -0.5f, 0.0f），第三个顶点是（0.5f, -0.5f, 0.0f）。

如果成功，就会返回非0值，这时候就可以返回整个编译后的着色器对象shader，否则后面就去查找编译出错的原因。这段代码把上面的x组件的ID转换为string串对象，然后调用函数 PluginRender::GetInstance获取渲染对象render ，最后调用渲染对象的函数render->m_eglCore->ChangeColor。这个函数主要传入两个参数，第一个参数type是加载着色器的类型，在这里主要有两种，一种是GL_VERTEX_SHADER，另外一种是GL_FRAGMENT_SHADER；

在这个函数，先设置m_flag标志，这个标志是用来表示是否画四边形，如果为false表示还没有画四边形，这时候点击界面就不会改变颜色。这段代码就可以通过X组件的指针来获取X组件的ID字符串，把它保存在变量idStr，这样后面就可以通过ID串来找到对应的渲染对象。这段代码从环境变量里获取X组件的指针，保存在exportInstance里，后面会通过X组件指针来操作X组件。要显示四边形，先要构造一个四边形的顶点数组。在上面这段代码里，先进行日志输出，然后进行参数判断，如果参数不正确就返回出错。

ExecuteDraw的作用是设置要显示图形的顶点坐标，以及显示的颜色，并进行绘制。这个函数输入几个参数，第一个参数position是用来表明是哪一个索引输入位置，是从函数glGetAttribLocation(m_program, POSITION_NAME)里获取的返回值，其实就是"a_position"的位置，也就是顶点坐标的输入索引；在这里使用这行代码glVertexAttrib4fv(1, color)来设置所有顶点的颜色值，这里指定的索引号为1，也就是GLSL程序里的位置1的颜色索引。

着色器程序对象相当于着色器对象的容器，和任何OpenGL管理的对象一样，在使用着色器程序对象之前，需要通过glCreateProgram接口来创建出一个着色器程序对象。这段代码就是对前面进行链接的程序进行判断是否出错，如果连接成功就可以返回当前的程序进行使用，当前程序是保存在变量program里。这段代码调用glAttachShader进行关联到着色器管理对象，这样顶点着色器和片段着色器就放到管理对象里面，最后调用glLinkProgram来进行连接，才能生成GPU执行的二进制程序。

layout(location = 0)，叫做布局限定符，目的是为了方便给变量提供数据，layout()的还有其他的选项，在这里location相当于设定了变量在着色器程序中的访问位置。还需要注意的是，变量名不能以 gl_ 作为前缀，这个是 GLSL 保留的前缀，用于 GLSL 的内部变量。gl_Position vec4 输出属性，变换后的顶点位置，用于后面的裁剪等操作，所有的顶点着色器都必须写这个值。gl_MultiTexColor vec4 输入属性，表示的是顶点的第n个纹理的坐标。

在前面介绍了X组件调用函数来初始化，初始化之后，就需要调用EGL函数来初始化OpenGL的环境，才能使用OpenGL函数来绘制图形。调用 EGLboolean eglInitialize(EGLDisplay dpy, EGLint *major, EGLint *minor)，该函数会进行一些内部初始化工作，并传回EGL版本号(major.minor)。保存窗口的宽度和高度，以便后面使用。这段代码开始进行初始化EGL，主要是调用eglInitialize函数，然后获取OpenGL的版本号。

接着重要的功能，就是设置X组件回调函数对象m_callback，它的4个调函数指针，都设置好之后，就可以给X组件进行处理了。前面已经分析怎么样注册X组件的回调函数，然后这些回调函数就可以在X组件合适的时机进行回调，就可以让C++的代码在合适的时间做合适的事情。在这段代码，先从容器里查找是否在存在这个ID的X组件插件，如果没有就会创建一个PluginRender对象，这个对象负责注册回调对象维护，并且管理显示图像的对象。在这个回调函数里，传入两个参数，第一个参数component是一个X组件的指针；

这段代码就通过NAPI的函数napi_get_named_property获取X组件的通用指针，它定义名称为OH_NATIVE_XCOMPONENT_OBJ，这是X组件在C++端的名称。这段代码就是使用获得的X组件的指针，然后通过函数OH_NativeXComponent_GetXComponentId来获取X组件的ID，这个ID保存在idStr数组里，给后面使用。因此，我们需要注册C++层的回调函数OnSurfaceCreated，这样当X组件创建成功之后调用我们在C++里的代码。

接着就是做主要的事情，映射库的导出方法getContext，这是在ArkTS里看到的方法，在C++里实际上是函数PluginManager::GetContext，这个函数也是一个静态的全局函数，可以任何地方调用，并且这个函数里的访问变量也是全局的。这行代码干的活比较多，首先要拿到X组件在C++里的指针，然后绑定这个X组件和ID关系，并且注册X组件的回调函数，这样才能根据X组件的生命周期来处理界面，最后还需要导出X组件交互函数，以便用户在X组件点击时触发C++层的代码运行。接着查找GLES库。

这些函数都是根据APP生命周期来调用库里的函数，这样库里的函数就可以根据这些函数来安排不同的代码执行了，在这个例子里基本上就是打印一个日志输出，没有什么实质内容。前面已经分析应用生命周期和页面生命周期，所以我们需要在OpenGL开发的库里区分这两个状态，以便在不同的状态下导出不同的函数给TS侧使用。然后返回一个任何类型的对象。上面页面的生命周期的调用顺序流程图，根据流程图，就可以在将要显示的函数加载资源文件，以便在显示出来时就能画到界面上。这样在C++开发的代码库里，就可以根据这些函数来执行需要的代码。

紧跟着下来onLoad方法设置加载XComponent组件成功之后获取这个组件对应的对象，保存在变量this.xComponentContext，这样后面就可以调用它为更新X组件绘制的内容，达到交互的目的。在这里要注意的是显示文本串是从资源里加载，并且资源里有中英资源，可以根据系统的语言来自动切换不同的语言显示的。在X组件里又设置了这个库的名称，那么在加载X组件时，就会自动要求系统加载这个库，当这个库加载完成之后，就会调用。从上面可知，应用生命周期是大于页面生命周期的，所以需要区分所处状态。

前面学习调用C++开发的代码库，这样可以加入C++语言来开发鸿蒙应用，加快对一些要求运算速度比较高的场合，也提高对旧的项目移植性。前面的C++语言开发的应用，只是简单的调用功能计算，并没有C++代码来操作界面的要求，并且没有使用复杂的C++的功能，这里不仅要在C++里输出图形到界面，并且还是采用OpenGL来开发，OpenGL就是一个非常复杂的库，以及不同的编程习惯。从上图我们就可以看到整个软件的基本组成，与前面学习的C++开发代码库是一样的，只是不同的文件，以及增加X组件的应用。

在这里调用函数napi_create_double，它是用来从C++类型double创建一个JS类型对象返回，并且把返回结果保存在变量napiResult，由于napi_value是指针，那么&napiResult就是指向指针的指针。返回值采用napi_value类型定义，napi_value类型是一个指针类型，并且是一个通用的指针类型，其实它就是相当于void*类型，可以保存任何类型的数值指针。接着定义它返回napi_value类型，这个类型是NAPI的通用类型，可以表示数字、字符串和布尔值等。

extern "C"的作用就是声明这个函数是以C语言接口方式导出，方便JS引擎加载模块时，可以按C的方式执行函数RegisterModule，RegisterModule的作用是把本模块的信息demoModule放到引擎的调用队列里，以便后面TS代码执行时去查找队列。"myHypot"是声明在文件index.d.ts的函数，也就是JS引擎可以识别的函数，而MyHypot是C++的函数，这中间的转换就靠NAPI框架转换了。我们从JS调用框架图就知道，调用主要分为三层，JS开发的C++模块、框架层、JS引擎。

是C++库，版本为10.0.1，libc++ 是C++标准库的一种实现，C++11、C++14标准已完全支持，C++17和C++20标准正在完善。接着下来先分析C++部分的代码，主要关注点是C++代码要怎么样编写，才能被ArkTS代码调用，它们之间的数据类型又是怎么样转换的。有了这两个文件，就可以知道C++代码生成库的名称为libhello.so，并且符合index.d.ts类型导出的动态连接库。在这里定义了加载C++库的名称为libhello.so，同时指明类型声明在文件./index.d.ts里。

由于鸿蒙应用主要基于ArkTS开发，主要使用的语言是ETS，也就是JS脚本方式来开发，这与C++语言开发是不同的语言，这样就不能直接相互调用，因为不同的语言使用不同的数据结构，不同的调用方式，不同的运行环境。因为C++语言开发的底层库已经比较长的时间，即使不考虑性能的情况之下，也需要很大的工作量来重写和测试，所以ArkTS一定需要能调用C++代码的能力，这样才能方便旧的项目，或者性能要求比较高的项目进行开发。简单起见，先来学习一个鸿蒙代码库提供的一个例子，这样杜绝各种创建项目的不同，以及填写不同的参数。

前面学习了Web组件选择文件文件上传的处理，现在来学习怎么样在一个Web容器里，再打开一个窗口来显示内容，相当于弹出另一个Web组件窗口，其实相当于两个Web组件同时在操作的方式。要想让Web组件运行上述的网页，就需要处理打开窗口的功能。”，当我们点击这个按钮之后，就需要Web组件来处理，并且打开一个窗口来显示。需要创建一个新的Web组件控制器WebviewController，同时创建一个新的Web组件来显示。这个是子窗口显示的Web组件，在前面介绍的窗口事件函数里响应处理，调用它来创建子窗口。

前面学习怎么样设置Web界面显示不同的颜色配置，这种适合不同时间来设置，比如白天要亮一些，晚上要暗一些。现在来学习使用Web组件选择文件文件列表的功能。由于这个方法在模拟器里运行不成功，需要使用真实手机来测试，所以需要连接手机。第三步返回设置页面，搜索“开发人员选项”，然后打开“开发人员选项”。后面就可以根据自己的需要来设置开发人员选项了。这样就可以使用真机来调试APP了。第四步把开发选项打开。

通过darkMode()接口可以配置不同的深色模式，WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式，并且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式，并且深色模式跟随系统。前面学习了Web加载程序内置的HTML数据来显示，这样可以加速界面的显示，接着下来学习怎么样设置Web组件显示界面的背景配色。有了这个接口，就可以设置Web为不同的颜色。可以看到上面界面全部变成黑色背景了。一般情况下，Web组件是采用默认跟随系统设置的背景颜色。

前面学习了Web组件加载本地的文件数据，这样很方便不需要网络的界面显示，或者提示类的界面，比如软件使用说明书，又比如软件使用协议，又或者固定显示的长文本数据。如果有多个文件，也可以通过按钮来切换不同的文件显示。如果文本比较短小的HTML数据，放到文件里，再通过文件显示，就会多了一个访问文件的过程，这样导致显示数据有点慢，面对这样的需求又有什么样的解决方案呢？这样就可以快速地实现程序内嵌数据的快速显示。下面就来通过例子来演示这个接口的使用。有了这个接口，就轻而易举了。

比如很多显示的内容，可以制作网页的文件格式，然后直接使用它来显示，就可以减少界面的制作。另外，当手机没有网络的时候，如果想从网络上获取内容就会失败，这时候可以使用本地的网页内容来代替。说明： 在引用资源类型时，注意其数据类型要与属性方法本身的类型一致，例如某个属性方法支持设置string | Resource，那么在使用Resource引用类型时，其数据类型也应当为string。由于显示本地的网页，不需要网络的权限，这时候APP可以不用设置网络的权限。在这里就采取最后的方式来加载本地的HTML文件。

可见，通过上述的函数，就可以切换不同的网页内容显示了。这种方式在很多APP里非常有用的，因为可以把网页上内容放到自己服务器上，可以每天做不同的修改，特别广告显示，或者不断更新用户查看的内容，提醒等等。前面学习了加载Web组件，在使用这个组件之前需要设置网络加载的权限，否则是不能使用Web组件，所以大家在使用这个组件时，需要仔细检查是否有设置这个权限。如果Web组件只是默认加载一次连接，就可以使用构造时传入的参数来决定，如果想不断地变换不同的网络地址，就需要使用这个函数loadUrl()来解决了。

我们知道目前已经进入网络3.0时代，之前经历了1.0的文本时代，2.0的多媒体时代，现在进入全面交互时代。前面学习向导组件，现在来学习Web组件，这个组件也是一个比较复杂的组件，也是一个功能很强的组件，毕竟它是一个浏览器功能相当的组件，可以显示网页内容。总共有两个参数，第一个参数src是打开网页的地址，或以是网上的地址，也可以本地的地址；如果比较熟悉的人员，也可以直接编辑json文件，但是要小心输入的字符串资源，有可能编译不通过。点击第一步的按钮，就可以可视化，这样找到请求的权限，再进行添加。

向导组件也是一个常用的组件，因为很多工作流程都需程序化，引导用户一步一步地进行，这样才能让用户明白地填写相应参数，选择合适的内容。这时候就会切换到第二页显示，这时下面有可以向前一页导航的按钮，也有向后一页导航的按钮。在这里发现每一项都需要重复设置一些相同的类型属性，那么能不能把这些设置提出来？还可以修改每一页的显示状态，因为根据用户的选择，有可能跳过一些页面的设置。在后面添加一个复合语句来定义所有页面的内容，这样使用起来非常方便。如果发现填写出错，就可以点击返回按钮，再次进行修改。在这里演法了扩展装饰器。

可以用手滑动上面的滑块，就可以调节对应的数字。滑动的时候可以设备滑动的步长，默认的步长是1，意思就是说最小调整的单位为1。前面学习了下拉选择菜单组件，现在来学习滑动选择组件，它是提供快速调节设置值，如音量调节、亮度调节等应用场景。也就是说，这个组件可以通过滑动条来设置对应的数值，而不需要用户手动输入数字。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。

Select([{ value: '菜单1', icon: $r('app.media.demo3') },由于它是下拉式的菜单，所以候选的内容建议不要太多，否则会滚动比较麻烦。{ value: '菜单4', icon: $r('app.media.demo3') }]){ value: '菜单2', icon: $r('app.media.demo3') },{ value: '菜单3', icon: $r('app.media.demo3') },设置下拉菜单初始选项的索引，第一项的索引为0。

基上提供了输入内容变化时立即获取的事件函数onChange，当输入完成之后用户点击搜索时事件函数onSubmit。这个搜索框组件，其实比较像探索网站的输入，可以输入内容，并且带有一个搜索的按钮。不过，这个组件还是缺少了一个搜索输入历史提示，或者说是输入内容动态提示的功能，这个还需要开发人员自己来完善这个功能。它还提供了一个控制器可以控制输入光标的位置，比如你输入了一串文本，突然想修改中间某一段，那么就需要移动到这个字符位置，然后再执行删除和修改的工作。有了这些内容，就可以自由地创建搜索框组件了。

由于手机的屏幕过小，那么显示的内容总会显示不下来，这时候肯定就会想到怎么样滚动显示了。从上图看到右边有一条滚动条显示，不过这个滚动条只是用来显示当前位置和全局内容多少，并不能执行滚动的操作，不像PC上的滚动条上点击之后会移动到相就的位置。滚动条的布局，有两个方向一个是纵向，一个横向。这里传入了控制器，并且定义为纵向布局。

这是一个段落。'这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字';这是一个在div元素中的标题。">h1下划线' +">h1斜体' +这个一个段落这是一个段落