群晖做网站服务器会卡吗郑州发布评论

群晖做网站服务器会卡吗,郑州发布评论,正规招聘网站有哪些,找工程项目上哪个平台好呢kUI提供了很多布局组件#xff0c;其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架#xff0c;本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。一、效果展示1、效果展示1整个APP外层Tabs包含4个选项卡#xff1a;首页、发现、消息、我的。在首页中#xff0c;上滑…kUI提供了很多布局组件其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。一、效果展示1、效果展示1整个APP外层Tabs包含4个选项卡首页、发现、消息、我的。在首页中上滑列表会出现吸顶效果分类可以左右滑动当滑到最后一个分类时与外层Tabs联动滑到“发现”页面。首页中的分类标签可以用户自定义选择显示。2、技术分析主要使用Tabs选项卡搭建整个APP的框架通过设置Tabs相关的属性和方法实现布局、滚动、吸顶、内外层嵌套联动等功能。Tabs组件的页面组成包含两个部分分别是TabContent和TabBar。TabContent是内容页TabBar是导航页签栏根据不同的导航类型布局会有区别可以分为底部导航、顶部导航、侧边导航其导航栏分别位于底部、顶部和侧边。本例中通过嵌套Tabs实现外层Tabs为底部导航、内层Tabs为顶部导航。二、功能实现1、准备工作1.1 数据准备在商业项目中界面显示的数据是通过网络请求后端接口获得本例重点放在Tabs组件的用法研究上因此简化数据获取过程直接将数据写入到json文件中。将准备好的界面数据文件tab标签和数据列表拷贝到resources/rawfile目录下包含4个文件default_all_tabs.json、default_all_tabs_en.json、default_content_items.json、default_content_items_en.json。1.2 本地化将界面文字zh_CN/elementinteger.json、string.jsonen_US/elementinteger.json、string.jsonbase/elementinteger.json、string.json、color.json1.3 素材base/media图片素材1.4 通用类ets目录新建common目录新建constat目录用于存放常量新建utils目录用于存放工具类。constant目录下新建Constants.ets文件记录用到的常量。export class Constants {/*** Full screen width.*/static readonly FULL_WIDTH: string 100%;/*** Full screen height.*/static readonly FULL_HEIGHT: string 100%;}utils目录下新建StringUtil.ets文件用于处理从文件中读取的数据。import { util } from kit.ArkTS;import { BusinessError } from kit.BasicServicesKit;import { hilog } from kit.PerformanceAnalysisKit;export default class StringUtil {static async getStringFromRawFile(ctx: Context, source: string) {try {let getJson await ctx.resourceManager.getRawFileContent(source);let textDecoder util.TextDecoder.create(utf-8, { ignoreBOM: true });let result textDecoder.decodeToString(getJson);return Promise.resolve(result);} catch (error) {let code (error as BusinessError).code;let message (error as BusinessError).message;hilog.error(0x0000, StringUtil, getStringSync failed,error code: %{code}s,message: %{message}s., code,message);return Promise.reject(error);}}}2、整体框架整体布局分为2部分顶部搜索栏和其下的嵌套Tabs页面。为了提升可维护性采用组件化编程思想。2.1 搜索组件在ets目录下新建view目录用于存放组件新建搜索组件SearchBarComponent.etsimport { Constants } from ../common/constant/Constants;Componentexport default struct SearchBarComponent {State changeValue: string ;build() {Row() {// 1、传统方法// Stack() {// TextInput({ placeholder: $r(app.string.search_placeholder) })// .height(40)// .width(Constants.FULL_WIDTH)// .fontSize(16)// .placeholderColor(Color.Grey)// .placeholderFont({ size: 16, weight: FontWeight.Normal })// .borderStyle(BorderStyle.Solid)// .backgroundColor($r(app.color.search_bar_input_color))// .padding({ left: 35, right: 66 })// .onChange((currentContent) {// this.changeValue currentContent;// })// Row() {// Image($r(app.media.ic_search)).width(20).height(20)// Button($r(app.string.search))// .padding({ left: 20, right: 20 })// .height(36)// .fontColor($r(app.color.search_bar_button_color))// .fontSize(16)// .backgroundColor($r(app.color.search_bar_input_color))//// }.width(Constants.FULL_WIDTH)// .hitTestBehavior(HitTestMode.None)// .justifyContent(FlexAlign.SpaceBetween)// .padding({ left: 10, right: 2 })// }.alignContent(Alignment.Start)// .width(Constants.FULL_WIDTH)// 2、搜索组件Search({placeholder:$r(app.string.search_placeholder)}).searchButton(搜索)}.justifyContent(FlexAlign.SpaceBetween).padding(10).width(Constants.FULL_WIDTH).backgroundColor($r(app.color.out_tab_bar_background_color)).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])}}在主界面引入即可查看效果。修改Index.etsimport { Constants } from ../common/constant/Constants;import SearchBarComponent from ../view/SearchBarComponent;EntryComponentstruct Index {build() {Column() {// 搜索栏SearchBarComponent()}.height(Constants.FULL_HEIGHT).width(Constants.FULL_WIDTH).expandSafeArea([SafeAreaType.SYSTEM])}}2.2 外层Tabs通过界面分析外层Tabs的每一个TabContent内容不同可以抽取为组件。第一个TabContent抽取为组件InTabsComponent后边的几个抽取为OtherTabContentComponent。在view目录下新建组件InTabsComponent.etsComponentexport default struct InTabsComponent {build() {Text(内层Tabs)}}在InTabsComponent中先简单写点提示信息待整体框架完成后后续再继续完成内层的内容。在view目录下新建组件OtherTabComponent.etsimport { Constants } from ../common/constant/Constants;Componentexport default struct OtherTabContentComponent {State bgColor: ResourceColor $r(app.color.other_tab_content_default_color);build() {Column().width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).backgroundColor(this.bgColor)}}在OtherTabComponent中通过接收父组件传递的颜色参数来设置背景颜色用以区分不同的Tab。在view目录下新建外层组件OutTabsComponent.etsimport { Constants } from ../common/constant/Constants;import InTabsComponent from ./InTabsComponent;import OtherTabContentComponent from ./OtherTabComponent;Componentexport default struct OutTabsComponent {State currentIndex: number 0;private tabsController: TabsController new TabsController();BuildertabBuilder(index: number, name: string | Resource, icon: Resource) {Column() {SymbolGlyph(icon).fontColor([this.currentIndex index? $r(app.color.out_tab_bar_font_active_color): $r(app.color.out_tab_bar_font_inactive_color)]).fontSize(25)Text(name).margin({ top: 4 }).fontSize(10).fontColor(this.currentIndex index? $r(app.color.out_tab_bar_font_active_color): $r(app.color.out_tab_bar_font_inactive_color))}.justifyContent(FlexAlign.Center).height(Constants.FULL_HEIGHT).width(Constants.FULL_WIDTH).padding({ bottom: 60 })}build() {Tabs({barPosition: BarPosition.End,index: this.currentIndex,controller: this.tabsController,}) {TabContent() {InTabsComponent()}.tabBar(this.tabBuilder(0, $r(app.string.out_bar_text_home), $r(sys.symbol.house)))TabContent() {OtherTabContentComponent({ bgColor: Color.Blue })}.tabBar(this.tabBuilder(1, $r(app.string.out_bar_text_discover), $r(sys.symbol.map_badge_local)))TabContent() {OtherTabContentComponent({ bgColor: Color.Yellow })}.tabBar(this.tabBuilder(2, $r(app.string.out_bar_text_messages), $r(sys.symbol.ellipsis_message)))TabContent() {OtherTabContentComponent({ bgColor: Color.Orange })}.tabBar(this.tabBuilder(3, $r(app.string.out_bar_text_profile), $r(sys.symbol.person)))}.vertical(false).barMode(BarMode.Fixed).scrollable(true) // false to disable scroll to switch// .edgeEffect(EdgeEffect.None) // disables edge springback.onChange((index: number) {this.currentIndex index;}).height(Constants.FULL_HEIGHT).width(Constants.FULL_WIDTH).backgroundColor($r(app.color.out_tab_bar_background_color)).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]).barHeight(120).barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK).barOverlap(true)}}在主界面中引入外层Tabs组件OutTabsComponent修改主界面Index.etsimport OutTabsComponent from ../view/OutTabsComponent;...// 外层tabsOutTabsComponent()这样就实现了整体布局。3、内层组件分析内层组件布局结构顶部是一张Banner图片下边是一个Tabs组件。整个内层组件可以上下滚动并且上滑要产生吸顶效果因此外层组件应该使用Scroll滚动组件作为顶层父容器里边滚动的内容使用List组件即可List里边的内容也需要封装成组件。3.1 Banner组件接下来先封装顶部的Banner图片组件在view目录下新建BannerComponent组件BannerComponent.etsimport { Constants } from ../common/constant/Constants;Componentexport default struct BannerComponent {build() {Column() {Image($r(app.media.pic5)).width(Constants.FULL_WIDTH).height(186).borderRadius(16)}.margin({left: 5,right: 5,top: 10,bottom: 2})}}3.2 列表项组件接下来封装列表项组件ContentItemComponent封装数据类ContentItemModel在ets目录下新建model目录新建ContentItemModel.etsexport default class ContentItemModel {username: string | Resource ;publishTime: string | Resource ;rawTitle: string | Resource ;title: string | Resource ;imgUrl1: string | Resource ;imgUrl2: string | Resource ;imgUrl3: string | Resource ;imgUrl4: string | Resource ;}封装数据类ContentItemViewModel在ets目录下新建viewmodel目录新建ContentItemViewModel.ets文件import ContentItemModel from ../model/ContentItemModel;Observedexport default class ContentItemViewModel {username: string | Resource ;publishTime: string | Resource ;rawTitle: string | Resource ;title: string | Resource ;imgUrl1: string | Resource ;imgUrl2: string | Resource ;imgUrl3: string | Resource ;imgUrl4: string | Resource ;updateContentItem(contentItemModel: ContentItemModel) {this.username contentItemModel.username;this.publishTime contentItemModel.publishTime;this.rawTitle contentItemModel.rawTitle;this.title contentItemModel.title;this.imgUrl1 contentItemModel.imgUrl1;this.imgUrl2 contentItemModel.imgUrl2;this.imgUrl3 contentItemModel.imgUrl3;this.imgUrl4 contentItemModel.imgUrl4;}}在view目录新建ContentItemComponent.etsimport { Constants } from ../common/constant/Constants;import ContentItemViewModel from ../viewmodel/ContentItemViewModel;Componentexport default struct ContentItemComponent {Prop contentItemViewModel: ContentItemViewModel;build() {Column() {Row() {Image(this.contentItemViewModel.imgUrl1).width(30).height(30).borderRadius(15)Column() {Text(this.contentItemViewModel.username).fontSize(15)Text(this.contentItemViewModel.publishTime).fontSize(12).fontColor($r(app.color.content_item_text_color))}.margin({ left: 10 }).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}Column() {Text(this.contentItemViewModel.title).fontSize(16).id(title).textAlign(TextAlign.Start)}.margin({top:10, bottom: 10})Row() {Image(this.contentItemViewModel.imgUrl2).width(115).height(115)Image(this.contentItemViewModel.imgUrl3).width(115).height(115)Image(this.contentItemViewModel.imgUrl4).width(115).height(115)}.width(Constants.FULL_WIDTH).justifyContent(FlexAlign.SpaceBetween)}.width(Constants.FULL_WIDTH).alignItems(HorizontalAlign.Start)}}3.3 列表数据封装在制作列表项组件时封装了每一项数据对应的类ContentItemModel还需要封装一个类用于表示整个Tabs界面的数据。在model目录下新建InTabsModel.etsimport { BusinessError } from kit.BasicServicesKit;import { hilog } from kit.PerformanceAnalysisKit;import ContentItemModel from ./ContentItemModel;import StringUtil from ../common/utils/StringUtil;export default class InTabsModel {contentItems: ContentItemModel[] [];async loadContentItems(ctx: Context) {let filename ;try {filename await ctx.resourceManager.getStringValue($r(app.string.default_content_items_file).id);} catch (error) {let err error as BusinessError;hilog.error(0x0000, InTabsModel, getStringValue failed, error code${err.code}, message${err.message});}let res await StringUtil.getStringFromRawFile(ctx, filename);this.contentItems JSON.parse(res).map((item: ContentItemModel) {let img1 item.imgUrl1 as string;if (img1.indexOf(app.media) 0) {item.imgUrl1 $r(img1);}let img2 item.imgUrl2 as string;if (img2.indexOf(app.media) 0) {item.imgUrl2 $r(img2);}let img3 item.imgUrl3 as string;if (img3.indexOf(app.media) 0) {item.imgUrl3 $r(img3);}let img4 item.imgUrl4 as string;if (img4.indexOf(app.media) 0) {item.imgUrl4 $r(img4);}return item;});}}该类主要实现从本地文件中读取列表数据。在viewmodel目录下新建文件InTabsViewModel.etsimport ContentItemViewModel from ./ContentItemViewModel;import InTabsModel from ../model/InTabsModel;Observedclass ContentItemArray extends ArrayContentItemViewModel {}Observedexport default class InTabsViewModel {private inTabsModel: InTabsModel new InTabsModel();contentItems: ContentItemArray new ContentItemArray();async loadContentData(ctx: Context) {await this.inTabsModel.loadContentItems(ctx);let tempItems: ContentItemArray [];for (let item of this.inTabsModel.contentItems) {let contentItemViewModel new ContentItemViewModel();contentItemViewModel.updateContentItem(item);tempItems.push(contentItemViewModel);}this.contentItems tempItems;}}3.4 Tab类封装将每一个Tab抽象为TabItemModel类以便于记录当前选中的选项卡。在model目录下新建TabItemModel.etsexport default class TabItemModel {id: number 0;name: string | Resource ;isChecked: boolean true;}在viewmodel目录下新建TabItemViewModel.etsimport TabItemModel from ../model/TabItemModel;Observedexport default class TabItemViewModel {id: number 0;name: string | Resource ;isChecked: boolean true;updateTab(tabItemModel: TabItemModel) {this.id tabItemModel.id;this.name tabItemModel.name;this.isChecked tabItemModel.isChecked;}}3.5 标签分类封装内层Tabs的标签TarBar也是直接从文件读取内层标签初始加载时直接读取文件内容进行显示后续还需要添加分类的选择和取消功能实现自定义显示分类。本小节先封装相关类在model目录下新建SelectTabsModel类用于存取文件中的标签分类SelectTabsModel.etsimport { BusinessError } from kit.BasicServicesKit;import { hilog } from kit.PerformanceAnalysisKit;import TabItemModel from ./TabItemModel;import StringUtil from ../common/utils/StringUtil;export default class SelectTabsModel {allTabs: TabItemModel[] [];async loadAllTabs(ctx: Context) {let filename ;try {filename await ctx.resourceManager.getStringValue($r(app.string.default_all_tabs_file).id);} catch (error) {let err error as BusinessError;hilog.error(0x0000, SelectTabsModel, getStringValue failed, error code${err.code}, message${err.message});}let result await StringUtil.getStringFromRawFile(ctx, filename);this.allTabs JSON.parse(result);}}在viewmodel目录下新建SelectTabsViewModel.etsimport TabItemViewModel from ./TabItemViewModel;import SelectTabsModel from ../model/SelectTabsModel;Observedclass TabItemArray extends ArrayTabItemViewModel {}Observedexport default class SelectTabsViewModel {allTabs: TabItemArray new TabItemArray();selectedTabs: TabItemArray new TabItemArray();private selectTabsModel: SelectTabsModel new SelectTabsModel();async loadTabs(ctx: Context) {await this.selectTabsModel.loadAllTabs(ctx);let tempTabs: TabItemViewModel[] [];for (let tab of this.selectTabsModel.allTabs) {let tabItemViewModel new TabItemViewModel();tabItemViewModel.updateTab(tab);tempTabs.push(tabItemViewModel);}this.allTabs tempTabs;this.updateSelectedTabs();}updateSelectedTabs() {let tempTabs: TabItemViewModel[] [];for (let tab of this.allTabs) {if (tab.isChecked) {tempTabs.push(tab);}}this.selectedTabs tempTabs;}}3.6 内层组件修改InTabsComponent.etsimport { Constants } from ../common/constant/Constants;import BannerComponent from ./BannerComponent;import { CommonModifier } from kit.ArkUI;import ContentItemComponent from ./ContentItemComponent;import ContentItemViewModel from ../viewmodel/ContentItemViewModel;import TabItemViewModel from ../viewmodel/TabItemViewModel;import InTabsViewModel from ../viewmodel/InTabsViewModel;import { EnvironmentCallback, Configuration, AbilityConstant } from kit.AbilityKit;import SelectTabsViewModel from ../viewmodel/SelectTabsViewModel;Componentexport default struct InTabsComponent {State selectTabsViewModel: SelectTabsViewModel new SelectTabsViewModel();State inTabsViewModel: InTabsViewModel new InTabsViewModel();State tabBarModifier: CommonModifier new CommonModifier();State focusIndex: number 0;State showSelectTabsComponent: boolean false;State selectTabsComponentZIndex: number -1;private ctx: Context this.getUIContext().getHostContext() as Context;private subsController: TabsController new TabsController();private tabBarItemScroller: Scroller new Scroller();subscribeSystemLanguageUpdate() {let systemLanguage: string | undefined;let inTabsViewModel this.inTabsViewModel;let selectTabsViewModel this.selectTabsViewModel;let applicationContext this.ctx.getApplicationContext();let environmentCallback: EnvironmentCallback {async onConfigurationUpdated(newConfig: Configuration) {if (systemLanguage ! newConfig.language) {await inTabsViewModel.loadContentData(applicationContext);await selectTabsViewModel.loadTabs(applicationContext);systemLanguage newConfig.language;}},onMemoryLevel: (level: AbilityConstant.MemoryLevel): void {// do nothing}};applicationContext.on(environment, environmentCallback);}async aboutToAppear() {await this.inTabsViewModel.loadContentData(this.ctx);await this.selectTabsViewModel.loadTabs(this.ctx);this.tabBarModifier.margin({ right: 56 }).align(Alignment.Start);this.subscribeSystemLanguageUpdate();}BuildertabBuilder(index: number, tab: TabItemViewModel) {Row() {Text(tab.name).fontSize(14).fontWeight(this.focusIndex index ? FontWeight.Medium : FontWeight.Regular).fontColor(this.focusIndex index ? Color.White : $r(app.color.in_tab_bar_text_normal_color))}.justifyContent(FlexAlign.Center).backgroundColor(this.focusIndex index? $r(app.color.in_tab_bar_background_active_color): $r(app.color.in_tab_bar_background_inactive_color)).borderRadius(20).height(40).margin({ left: 4, right: 4 }).padding({ left: 18, right: 18 }).onClick(() {this.focusIndex index;this.subsController.changeIndex(index);this.tabBarItemScroller.scrollToIndex(index, true, ScrollAlign.CENTER);})}build() {Scroll() {Column() {BannerComponent()Stack({ alignContent: Alignment.TopEnd }) {Row() {Image($r(app.media.more)).width(20).height(20).margin({ left: 10 }).onClick(() {// todo:弹层选择分类})}.margin({ top: 8, bottom: 8, right: 5 }).backgroundColor($r(app.color.in_tab_bar_background_inactive_color)).width(40).height(40).borderRadius(20).zIndex(1)Column() {Tabs({barPosition: BarPosition.Start,