51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

用OpenHarmony eTS 实现一个Huawei app标准布局

作者：Buty9147
系统 OpenHarmony
如果我们仔细去看Huawei 手机自带的app，我们会发现所有的app，无论是什么类型的app，其布局结构都是一种类似的结构，这说明这种布局结构的用途真的可以很广泛，而且体验很好。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

一、介绍

Huawei 的app，我们都能看得出来是用心设计过的，值得学习。如果我们仔细去看Huawei 手机自带的app，我们会发现所有的app，无论是什么类型的app，其布局结构都是一种类似的结构，这说明这种布局结构的用途真的可以很广泛，而且体验很好…

像华为的应用市场app、联系人、浏览器、图库、智慧生活app、音乐app、我的华为、畅连 等等，你去看，全部是这种上中下的布局结构，顶部栏（top+middle）+内容展示区（content）+底部tab栏，那么，今天我们就一起来实现一个这样的布局。

二、效果展示

DAYU200真机：

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

视频地址：

模拟器：

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

三.代码讲解

1、准备工作

（1）添加一个用来保存image资源的ets文件，resource_const.ets

export function initImageMap(): Map<string, Resource> {
  let imageMap = new Map() 
  //tappage
  //tab icon
  imageMap.set('tab_01', $r('app.media.ic_public_home'))
  imageMap.set('tab_02', $r('app.media.ic_public_appstore'))
  imageMap.set('tab_03', $r('app.media.ic_gallery_album_damage_video'))
  imageMap.set('tab_04', $r('app.media.ic_gallery_search_things'))
  imageMap.set('tab_05', $r('app.media.ic_user_portrait'))
  imageMap.set('tab_01_filled', $r('app.media.ic_public_home_filled'))
  imageMap.set('tab_02_filled', $r('app.media.ic_public_appstore_filled'))
  imageMap.set('tab_03_filled', $r('app.media.ic_gallery_album_damage_video_filled'))
  imageMap.set('tab_04_filled', $r('app.media.ic_gallery_search_things_filled'))
  imageMap.set('tab_05_filled', $r('app.media.ic_user_portrait_filled'))
  //tab color
  imageMap.set('tab_filled_color', $r('app.color.filled_color'))
  imageMap.set('tab_unfilled_color', $r('app.color.unfilled_color'))
  return imageMap
}

为什么要这么做：

一是因为我发现，有时候如果直接这样用，有时候图片就会错乱，显示的不是该图片。

二是用改起来方便。

Image($r('app.media.light_power'))  //这样直接用
  .width(40)
  .height(40)
  .alignSelf(ItemAlign.End)
  .margin({ right: '10%', bottom: '3%' })
  .onClick(() => {
    router.push({ uri: 'pages/index' })
  })

（2）string.json资源文件中定义tab显示文本。

{
    "name": "tab_01",
    "value": "家居"
  }
,
  {
    "name": "tab_02",
    "value": "商城"
  }
,
  {
    "name": "tab_03",
    "value": "内容"
  }
,
  {
    "name": "tab_04",
    "value": "场景"
  }
,
  {
    "name": "tab_05",
    "value": "我的"
  }

接下来就是进入正题了，新建一个ets页面，tabpage.ets。

2、实现一个底部tab栏

（1）导入需要用的组件。

//日志组件
import { CommonLog  as logger } from '@ohos/ohos_clogger'
//用于数据展示模型
import { NoticeDataModel, initOneNoticeData } from "../model/NoticeDataModel"
//引入定义的常量、视图组件
import { initImageMap } from '../common/resource_const'
//资源管理，用于实现屏幕方向的获取
import resourceManager from '@ohos.resourceManager';

（2）定义tab图标和文本颜色 状态变量。

//tab icon
@State tab_01_icon: Resource = initImageMap().get('tab_01_filled')
@State tab_02_icon: Resource = initImageMap().get('tab_02')
@State tab_03_icon: Resource = initImageMap().get('tab_03')
@State tab_04_icon: Resource = initImageMap().get('tab_04')
@State tab_05_icon: Resource = initImageMap().get('tab_05')
//tab 文本颜色
@State tab_01_color: Resource = initImageMap().get('tab_filled_color')
@State tab_02_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_03_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_04_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_05_color: Resource = initImageMap().get('tab_unfilled_color')

（3）接下来看看build() 的布局。

最外层用Column容器布局，然后是Flex布局，top栏，middle，Content都是一行一行的，所以用Row容器布局，先占个位。

底部的tab栏用Flex布局，每个tab用Column布局，Column是上下2层，一个image，一个文本。

5个tab，所以每个tab的width设为20%，为了更美观，给最外层的Column设置个背景图片 。

build() {
  Column() {
    //用Flex布局  
    Flex({ direction: FlexDirection.Column, wrap: FlexWrap.NoWrap }) {
        //top栏
        Row() {}.width('100%').height('80vp')
        //middle
        Row() {}.width('100%').height('150vp')
        //content
        Row() {}.width('100%').height('100%')
        //bottom tab
        Flex() {
          Column() {
            Image(this.tab_01_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_01'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_01_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }.onClick(() => {
            this.current_tab_index = 1
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_02_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_02'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_02_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 2
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_03_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_03'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_03_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 3
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_04_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_04'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_04_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 4
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_05_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_05'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_05_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 5
            this.switchTab()
          })
          .width('20%')
          .height('100%')
        }
        .width('100%')
        .height('90vp')
        .align(Alignment.Center)
        .flexShrink(0)
        .backgroundColor('#ffdbc9c9')
        .margin({ top: '5vp'})
        .padding({ top: '5vp', bottom: '5vp', left: '5vp', right: '5vp' })
        
    }
  }
  .width('100%')
  .height('100%')
  .alignItems(HorizontalAlign.End)
  //设置个背景图片  
  .backgroundImage($r('app.media.community_notice'), ImageRepeat.XY)
}

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

（4）实现点击tab 切换的效果。

定义当前操作的tab索引。

//当前操作的tab
current_tab_index = 1

（5）定义切换tab函数switchTab()。

设置当前点击tab的选中效果，同时其它tab取消选中效果。该方法还可以继续优化。

//切换Tab
switchTab() {
  if (this.current_tab_index == 1) {
    if (this.tab_01_icon.id != initImageMap().get('tab_01_filled').id) {
      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_01_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_01_filled'))}`)
      //当前选中
      this.tab_01_icon = initImageMap().get('tab_01_filled')
      this.tab_01_color = initImageMap().get('tab_filled_color')
      //重置其它
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')
      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')
      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')
      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 2) {
    if (this.tab_02_icon.id != initImageMap().get('tab_02_filled').id) {
      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_02_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_02_filled'))}`)
      //当前选中
      this.tab_02_icon = initImageMap().get('tab_02_filled')
      this.tab_02_color = initImageMap().get('tab_filled_color')
      //重置其它
      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')
      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')
      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')
      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 3) {
    if (this.tab_03_icon.id != initImageMap().get('tab_03_filled').id) {
      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_03_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_03_filled'))}`)
      //当前选中
      this.tab_03_icon = initImageMap().get('tab_03_filled')
      this.tab_03_color = initImageMap().get('tab_filled_color')
      //重置其它
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')
      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')
      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')
      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 4) {
    if (this.tab_04_icon.id != initImageMap().get('tab_04_filled').id) {
      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_04_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_04_filled'))}`)
      //当前选中
      this.tab_04_icon = initImageMap().get('tab_04_filled')
      this.tab_04_color = initImageMap().get('tab_filled_color')
      //重置其它
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')

      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')

      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')

      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 5) {
    if (this.tab_05_icon.id != initImageMap().get('tab_05_filled').id) {
      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_05_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_05_filled'))}`)
      //当前选中
      this.tab_05_icon = initImageMap().get('tab_05_filled')
      this.tab_05_color = initImageMap().get('tab_filled_color')
      //重置其它
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')
      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')
      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')
      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')
    }
  }

}

（6）在点击tab时设置当前操作的tab索引并调用switchTab() 函数

.onClick(() => {
        this.current_tab_index = 5
        this.switchTab()
      })

3、实现一个顶部工具栏

因为我们想实现一个，向上滑动时，隐藏middle栏的内容，在top栏显示缩减版的middle信息。

所以定义一个show_top_title 变量，用于控制top title的显隐，定义一个show_mid_title状态变量控制middle title的显隐。

//控制组件显隐
@State show_top_title: boolean = false
@State show_mid_title: boolean = true

top栏包含一个文本（初始时不显示），一个搜索按钮，一个添加按钮，我们希望top栏的操作按钮能靠右边，所以注意设置。

.alignItems(HorizontalAlign.End)：

//top栏
Row() {
  Column() {
    if (this.show_top_title) {
      Text('步二神探的家')
        .height('100%')
        .width('100%')
        .fontSize(24)
        .fontWeight(FontWeight.Bolder)
        .fontWeight('#CCFFF')
    }
  }
  .width('60%')
  .height('100%')
  .padding({ left: 10 })

  Column() {
    Image($r('app.media.ic_public_search'))
      .width('50vp')
      .height('100%')
      .borderRadius(30)
      .margin({ right: 10 })
      .objectFit(ImageFit.ScaleDown)
    //.backgroundColor('#bbdd11')
  }
  .width('20%')
  .height('100%')
  //.backgroundColor('#bbdd11')
  .alignItems(HorizontalAlign.End)
  .onClick(() => {
    logger.getInstance(this).debug(`you click '🔍' button`)
  })

  Column() {
    Image($r('app.media.ic_public_add'))
      .width('50vp')
      .height('100%')
      .borderRadius(30)
      .margin({ right: 10 })
      .objectFit(ImageFit.ScaleDown)
    //.backgroundColor('#bbdd11')
  }
  .width('20%')
  .height('100%')
  //.backgroundColor('#bbdd11')
  .alignItems(HorizontalAlign.End)
  .onClick(() => {
    logger.getInstance(this).debug(`you click '+' button`)
  })
}
.width('100%')
.height('80vp')
.align(Alignment.End)
.backgroundColor('#ffdbc9c9')

4、实现一个Grid网格展示

（1）模拟数据列表，该数据来源 NoticeDataModel 的模拟数据，数据结构是一个通知，包括标题和内容，仅用于演示。

import { NoticeDataModel, initOneNoticeData } from "../model/NoticeDataModel"
//数据列表
@State notice_list: NoticeDataModel[] = [
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData()
]

（2）content 布局使用Grid实现一个网格效果，使用ForEach进行遍历notice_list的数据。

ForEach的使用要注意，最后的部分, item => item.id) , 一般用唯一性的字段赋值，可以提高更改后重新渲染的性能。

.columnsTemplate(‘1fr 1fr’) 可以控制 列格式，显示为2列 ，可以是1列，3列。

//content
Row() {
  Grid() {
    ForEach(this.notice_list, item => {
      GridItem() {
        Column() {
          Text(item.notice_title)
            .fontSize(18)
            .width('100%')
          Text(item.notice_content)
            .fontSize(15)
            .width('100%')
            .padding({ top: 5 })
            .fontColor('#6D7278')
        }
        .width('100%')
        .height(160)
        .borderRadius(15)
        .padding({ top: 10, left: 10 })
        .backgroundColor(0xF9CF93)
      }
    }, item => item.id)
  }
  //列格式，显示为2列  
  .columnsTemplate('1fr 1fr')
  .columnsGap(20)
  .rowsGap(20)
  .margin({ top: 10 })
  .onScrollIndex((first: number) => {
    logger.getInstance(this).debug(`${first.toString()}`)
    if (first == 4) {
      this.show_top_title = true;
      this.show_mid_title = false;
    }
    if (first == 2) {
      this.show_top_title = false;
      this.show_mid_title = true;
    }
  })
}
.width('100%')
.height('100%')
.padding({ left: '5vp', right: '5vp' })
.alignItems(VerticalAlign.Top)
//.backgroundColor('#ffc1dfe0')

1列

2列

3列表

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

#夏日挑战赛# 用OpenHarmony eTS 实现一个Huawei app标准布局-开源基础软件社区

（3）当向上滑动content时，隐藏middle的内容，同时显示top栏中的文本内容。

onScrollIndex回调函数：

.onScrollIndex((first: number) => {
  logger.getInstance(this).debug(`${first.toString()}`)
  if (first == 4) {
    this.show_top_title = true;
    this.show_mid_title = false;
  }
  if (first == 2) {
    this.show_top_title = false;
    this.show_mid_title = true;
  }
})

四、思考总结

1、图标下载

​​1.华为提供的HarmonyOS图标库​​

​​2.阿里巴巴矢量图标库​​

2、实现屏幕方向的获取

通过resourceManager获取getConfiguration，然后config.direction获取屏幕方向，这部分代码在HarmonyOS可以正常获取，但在OpenHarmony中还无法使用。

import resourceManager from '@ohos.resourceManager';
resourceManager.getResourceManager('com.example.lanls')
  .then(mgr => {
    logger.getInstance(this).debug(`=====${JSON.stringify(mgr)}`)
    mgr.getConfiguration()
      .then(config => {
        logger.getInstance(this).debug(`${JSON.stringify(config)}`)
        //DIRECTION_VERTICAL = 0,
        this.is_landscape = config.direction.valueOf() == 1 ? true : false
      })
      .catch(error => {
        logger.getInstance(this).error("getstring promise " + error);
      });
  })
  .catch(error => {
    logger.getInstance(this).error("error occurs" + error);
  });
DIRECTION_VERTICAL = 0,
DIRECTION_HORIZONTAL = 1

五、完整代码

​​附件可以直接下载​​

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​。

责任编辑：jianghua 来源： 鸿蒙社区
布局结构app
相关推荐
用 SwiftUI 实现一个开源的 App Store
AppStore在iOS11之前，App排行榜一直是衡量开发者App活跃度的指标，但在iOS11后苹果弱化了榜单功能。

2022-01-17 09:22:42

SwiftUI App Store开源
如何开发一个OpenHarmony购物APP导航页面
一款购物App界面通常包括了扫一扫功能、搜索框、轮播图、标签页、商品列表等功能，我们以橘子购物为例，介绍一下如何使用ArkTS开发一个购物类App。

2023-08-09 14:43:42

应用开发ArkTS
OpenHarmony之 eTS FA调用 eTS ServiceAbility
Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability），HarmonyOS支持应用以Ability为单位进行部署。

2022-05-20 10:56:54

AbilityeTS FA调用
OpenHarmony标准设备应用开发—布局、动画与音乐
我们通过知识体系新开发的几个基于OpenHarmony3.1Beta标准系统的样例：分布式音乐播放、传炸弹、购物车等样例，分别介绍下音乐播放、显示动画、动画转场(页面间转场)三个进阶技能。

2022-02-15 14:45:14

OpenHarmo系统鸿蒙
用一个printf()调用实现一个web服务器
使用一句printf调用来实现一个web服务器是很有可能的，但是我还没发现其他人做到。所以这次我读到这个列表时，我决定实现它。这里是它的代码，一个纯粹单一的printf调用，没有任何附加的变量或者宏（不用担心，我将会解释这段代码是如何工作的）。

2014-04-14 15:54:00

print()Web服务器
用JavaScript实现一个编译器
BabelisaJavaScriptcompiler!这是Babel官方对于babel的定义。身为前端工程师，因此有必要了解编译原理，幸运的是，“TheSuperTinyCompiler”开源项目利用JavaScript写了一个简单的编译器。

2021-06-25 10:38:05

JavaScript编译器前端开发
Openharmony eTS 之 Http Post请求
Httpclient以人们耳熟能详的OKHTTP为基础，整合Androidasynchttp，AutobahnAndroid，OkGo等库的功能特性，致力于在OpenHarmony打造一款高效易用，功能全面的网络请求库。

2022-07-12 17:03:43

鸿蒙网络请求库
ArkUI eTS实践开发一个管家服务系统之一
这一期和大家分享,基于eTS开发一个管家服务系统，其实设想是用DAYU200上实现全屋智能中控系统，也设想了一些功能。

2022-05-07 15:44:45

eTS 开发鸿蒙
用PyTorch实现一个简单的分类器
这篇文章我们先考虑在一个自己定义的简单数据集上实现分类，这样子可以最简单的了解一个神经网络的模型，如何用pytorch搭建起来。

2020-06-04 12:55:44

PyTorch分类器神经网络
实现一个Android锁屏App的难点总结
自定义一个漂亮实用的锁屏app，如果能赢得用户的认可，替换系统自带的锁屏，绝对是一个不小的日活入口。这段时间正好总结一下最近调研的Android平台的锁屏app开发中的难点。

2016-10-18 20:50:00

android锁屏App
前端: 用Javascript实现一个转盘小游戏?
本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于改实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。

2020-11-30 06:20:13

javascript
华为：用一个圈子联接一个圈子
终于明白一个道理，当今的企业级IT市场就是一个圈子联接着一个圈子，谁的圈子半径越大，圈子更稳固，其成绩就越斐然。这里没有丝毫贬义的成分，我还没看见世界上有任何一家企业，能脱离生态圈，而在企业市场中生存。

2016-03-01 14:37:47

华为
OpenHarmony标准设备应用开发一HelloWorld
这一篇我们主要聚焦于如何在标准设备上运行一个最简单的OpenHarmony程序。

2022-02-15 14:06:36

OpenHarmon操作系统鸿蒙
我用新拟物化设计风格，做了一个App改版案例
大家有没有发现Facebook近期的改版也开始在扁平界面中加入了一些拟物化风格的元素。身为一名UI、UX设计师，也趁着这波疫情足不出户自我隔离期，一起加入了这挑起争端的行列，这篇文章会以改造的口罩3.0界面教大家怎么制作拟物化风格的界面。

2020-05-08 13:28:53

新拟物UI设计
ArkUI eTS实践开发一个管家服务系统（二）
Stack布局、Flex、Tabs组件实现华为标准app的Tab页切换效果，初级模拟了华为的智慧生活app效果。

2022-07-07 14:01:59

管家服务系统ArkUI eTS
用Canvas实现一个大气球送给你
近期在做一个气球挂件的特效需求，值此契机，来跟大家分享一下如何利用canvas以及对应的数学知识构造一个栩栩如生的气球。

2021-09-12 17:23:57

canvas动画函数
OpenHarmony内核学习（一）—单独编译OpenHarmony标准系统内核
OpenHarmony标准系统从Linux内核LTS版本中选择合适的版本作为内核的基础版本，目前已完成对Linux4.19及Linux5.10的适配及支持。

2023-02-01 16:28:30

Linux内核鸿蒙
用一个文件，实现迷你 Web 框架（建议收藏）
今天我们就抽丝剥茧、去繁存简，用一个文件，实现一个迷你Web框架，从而把其核心技术部分清晰地讲解清楚，配套的源码均已开源。

2022-04-01 15:18:42

Web 框架网络通信
使用Titanium创建一个基本的布局
本文为使用Titanium创建一个基本的布局。Titanium是一个Web应用程序运行环境，它支持不同的系统平台(Windows、Linux、Mac)，并且支持Web应用程序对本地APIs的访问。在基于Titanium平台上，用户可以快速开发和方便的部署应用程序，并且这些应用程序可以使用本地APIs实现许多普通Web应用程序无法完成的功能和特性。

2012-04-19 17:42:46

Titanium布局
如何从零实现一个你的个人博客Android App?
最近实现了我的第一个个人博客阅读App，但是目前存在很多很多Bugo。可以通过这个App来实现RSS订阅功能，第一时间阅读我的个人博客文章，同时可实现文章收藏与分享功能。

2014-09-25 09:51:29

Android App个人博客
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服