企业网站推广方案范例,做外贸推广自己网站,网站网页进口,大连高新园区本着不拖更的原则#xff0c;今天上新了#xff0c;今天实现了类微信app的发现页和我的页面。先看效果。 效果是不是看着还不错。其实这两个页面功能实现还是比较简单的#xff0c;接下来还是老规矩#xff0c;先进行页面的拆分和代码实现#xff0c;然后进行相关我认为比…本着不拖更的原则今天上新了今天实现了类微信app的发现页和我的页面。先看效果。 效果是不是看着还不错。其实这两个页面功能实现还是比较简单的接下来还是老规矩先进行页面的拆分和代码实现然后进行相关我认为比较重要的知识点的说明。
页面拆分 页面看似复杂但是其实经过拆分之后发现就是由两部分组合。
顶部的TitleBar内容Cell
复杂的内容区域部分无非就是由一个个小的内容Cell复用组装起来的嘛上篇文章也写过了。一个Foreach而已嘛。
代码实现
实现TitleBar在实现TitleBar的时候为了练习控件使用专门引入了RelativeContainer组件的使用。在知识解惑部分会做详细说明。
Preview
Component
export default struct SearchTitleBar {Prop title: string;build() {RelativeContainer() {Text(this.title).fontColor(0x333333).fontSize(18).fontWeight(FontWeight.Medium).alignRules({left: { anchor: __container__, align: HorizontalAlign.Start },right: { anchor: __container__, align: HorizontalAlign.End },top: { anchor: __container__, align: VerticalAlign.Top },bottom: { anchor: __container__, align: VerticalAlign.Bottom },}).textAlign(TextAlign.Center).id(id_title)Column() {Image($r(app.media.toolbar_search)).width(22).height(22)}.height(100%).margin({right: 12}).justifyContent(FlexAlign.Center).alignRules({right: { anchor: id_more, align: HorizontalAlign.Start }}).id(id_search)Column() {Image($r(app.media.toolbar_more)).width(22).height(22).margin({right: 16})}.height(100%).justifyContent(FlexAlign.Center).alignRules({right: { anchor: __container__, align: HorizontalAlign.End },}).id(id_more)}.width(100%).height(50).backgroundColor(0xEDEDED)}
}对于Cell的实现代码在下面的讲解Column部分也会列出来如果这会不想看在看完Flex和Column之后看起来会更加清晰。
import { DiscoverCellEntity } from ../../common/bean/DiscoverCellEntity
import commonDataViewModel from ../../viewmodel/CommonDataViewModel;Preview
Component
export default struct CellItemView {private discoverCellEntity: DiscoverCellEntity;build() {Row({ space: 5 }) {Row() {Image(this.discoverCellEntity.icon).width(22).height(22).margin({ left: 16 })Text(this.discoverCellEntity.title).fontWeight(FontWeight.Regular).fontSize(16).fontColor(0x333333).margin({ left: 12 })Row().width(5).height(5).margin({ left: 4 }).borderRadius(2.5).backgroundColor(0xF14400).visibility(this.discoverCellEntity.hasNew ? Visibility.Visible : Visibility.Hidden)}Row() {Image(commonDataViewModel.getUserAvatar()).width(35).height(35).objectFit(ImageFit.Cover).borderRadius(4).visibility(this.discoverCellEntity.hasAvatar ? Visibility.Visible : Visibility.Hidden)Image($r(app.media.ic_right_arrow)).width(22).height(22).margin({ right: 12 })}.justifyContent(FlexAlign.Center).height(100%).onClick(() {})}.justifyContent(FlexAlign.SpaceBetween).width(100%).height(60).backgroundColor(0xFFFFFF)}
}用到的知识点
由于在上篇文章中牵扯到的一些布局知识点没有讲解到我一个同事看了我的文章之后建议对于一些基础的知识也带一带简单做个说明所以本次会把上次和本地用到的布局相关知识进行一个简单说明如果对相关的知识比较熟悉这部分内容可以酌情阅读。
Column和Row 类似于Android中的LinearLayout只是类似。对于Column和Row本身如果对于前端Flex布局比较熟悉的话基本上看一眼就知道啥意思了。所以我在讲解Column和Row之前先讲解一下Flex布局。 如果想做详细理解同学可以直接先看一下我引入的这篇文章你会了解到更多关于flex的知识。 flex入门 来源于知乎。
Flex布局
Flex是一个支持横向和纵向填充内容的布局容器。在布局填充到flex中之后我们可以通过对横向和纵向进行控制用来实现容器内内容的横竖向排列方式可以帮我们实现等分、居左、居右等很多种对其方式。 我们用来在纵向和横向上控制的内容在flex中被描述成了相应的主轴和副轴交叉轴。比如一个横向的布局排列主轴就是对应的横向而副轴交叉轴就是竖向了。
justify-content 决定flex items在主轴上的对齐方式align-items: 决定items在交叉轴上的对齐方式 主轴和交叉轴的操作上支持类型有以下几种我这里以主轴为横向排列进行演示对应的如果竖向排列逻辑是类似的自行举一反三即可。
//默认起点对齐
justify-content: flex-start;
//终点对齐
justify-content: flex-end;
//居中对齐
justify-content: center;
//两端对齐
justify-content: space-between;
//周围分布相同空间
justify-content: space-around;
//均匀空间
justify-content: space-evenly;自己懒得画这些效果图所以直接从别人博客拿了图。大家理解着看理解之后会发现很简单。
接着看一下Column的源码Row类似就不做过多分析了
declare class ColumnAttribute extends CommonMethodColumnAttribute {/*** Sets the alignment format of the subassembly in the horizontal direction.* since 7*//*** Sets the alignment format of the subassembly in the horizontal direction.* form* since 9*/alignItems(value: HorizontalAlign): ColumnAttribute;/*** Sets the alignment format of the subassembly in the vertical direction.* since 8*//*** Sets the alignment format of the subassembly in the vertical direction.* form* since 9*/justifyContent(value: FlexAlign): ColumnAttribute;在学会了Flex之后在看这个代码是不是豁然开朗?这不就是变种的简化版本Flex吗。我们只管填充内容接下来的变化直接交给alignItems和justifyContent属性帮我们完成就行了。
为了加深理解看一个我实现过程中的代码片段。
Row({ space: 5 }) {Row() {Image(this.discoverCellEntity.icon).width(22).height(22).margin({ left: 16 })Text(this.discoverCellEntity.title).fontWeight(FontWeight.Regular).fontSize(16).fontColor(0x333333).margin({ left: 12 })Row().width(5).height(5).margin({ left: 4 }).borderRadius(2.5).backgroundColor(0xF14400).visibility(this.discoverCellEntity.hasNew ? Visibility.Visible : Visibility.Hidden)}Row() {Image(commonDataViewModel.getUserAvatar()).width(35).height(35).objectFit(ImageFit.Cover).borderRadius(4).visibility(this.discoverCellEntity.hasAvatar ? Visibility.Visible : Visibility.Hidden)Image($r(app.media.ic_right_arrow)).width(22).height(22).margin({ right: 12 })}.justifyContent(FlexAlign.Center).height(100%).onClick(() {})}.justifyContent(FlexAlign.SpaceBetween).width(100%).height(60).backgroundColor(0xFFFFFF)上面的代码帮我们实现了一个cell效果。是不是很简单瞬间理解了有没有。
RelativeContainer
这个布局被命名为Relative但是我更觉得应该命名为ConstraintLayout不能说完全相似只能说是一模一样。
Column和Row布局在绘制过程中简单界面还好但是如果负责的界面的话会出现无数的Column和Row之间的魔鬼嵌套。导致代码层级无限深阅读代码造成困难修改更是地狱级别。这个时候RelativeContainer的优势就出来了使用它可以将布局进行层级平铺通过布局间的依赖关系控制实现整体的界面布局。
这是鸿蒙开发者官网上的文档地址 RelativeContainer
容器内子组件区分水平方向垂直方向 水平方向为left middle right对应容器的HorizontalAlign.Start HorizontalAlign.Center HorizontalAlign.End。垂直方向为top center bottom对应容器的VerticalAlign.Top VerticalAlign.Center VerticalAlign.Bottom。子组件可以将容器或者其他子组件设为锚点 参与相对布局的容器内组件必须设置id不设置id的组件不显示容器id固定为__container__。 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点同方向上两个以上位置设置锚点以后会跳过第三个。 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。 对齐后需要额外偏移可设置offset。特殊情况 互相依赖环形依赖时容器内子组件全部不绘制。 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0即不绘制。 容器不设置宽高时容器与容器内子组件不绘制。
上面的话不知道你看懂了没有。下面我使用下面的图进行一个说明。 如果我们要实现上面的效果可以先写五个Row().width(100).height(100)元素设置不同颜色之后放置在RelativeContainer容器中。 上下左右四个角的元素我们分析发现其实我们要把他们定位到正确位置只需要依赖父容器的上下左右位置即可。比如左上的大红色上top是和父容器上(top)对其的左边是和父容器的左边对其的。就很容器写出如下的代码
.alignRules({top: {anchor: __container__, align: VerticalAlign.Top},left: {anchor: __container__, align: HorizontalAlign.Start}})当运行代码你会发现确实和和想象中一样左上的大红色固定到了指定位置了。其余的左下、右上、右下也是类似的。
剩下中间的这个元素我们分析发现和父容器都没有任何关系。但是和四周的四个元素是有依赖关系的。中间元素左上左上元素右下、中间元素右上右上元素左下以此类推。不难写出代码。
.alignRules({top: {anchor: row1, align: VerticalAlign.Bottom},left: {anchor: row1, align: HorizontalAlign.End},right: {anchor: row2, align: HorizontalAlign.Start}
})夜已深今天就到这里了谢谢你的阅读。
