# HarmonyOS NEXT thể nghiệm quan # XBoard tác phẩm kỹ thuật tường giải Nguyên sang

Thời không chưa vũ

Tuyên bố với 2024-8-15 09:02

Xem

1 cất chứa

Giới thiệu

XBoard là một khoản tập “Bóng rổ chiến thuật bản”, “Hợp tác hỗ động bản”, “Liền nắm tay viết bản” chờ dễ dùng bàn vẽ loại công cụ vì một thân tác phẩm.

bóng rổ chiến thuật bản có tăng thêm đội viên, tự do bút tích, chiến thuật giảng giải chờ đặc sắc công năng.
hợp tác hỗ động bản mục tiêu phục vụ với thân tử hỗ động, hợp tác cộng sang cảnh tượng.
liền nắm tay viết bản nhưng cung cấp bản nháp thử lại phép tính, luân bá văn tự triển lãm chờ phục vụ.

XBoard có linh hoạt tính, tiện lợi tính, giáo dục giá trị, bảo vệ môi trường đặc tính cùng kỹ thuật tổng thể chờ ưu thế.
Hết hạn trước mắt, đã có được “Bóng rổ chiến thuật bản”, “Hợp tác hỗ động bản”, “Liền nắm tay viết bản” chờ công năng.
Mục tiêu là đem Hồng Mông đặc tính tinh tế thả đúng mức mà dung nhập đến thực tế sử dụng cảnh tượng trung.

Bổn tác phẩm chỉ ở thích ứng bất đồng cảnh tượng, người dùng nhu cầu cùng nghiệp vụ hình thức biến hóa.
Lấy thực tế công năng thực hiện hữu hiệu toàn trường cảnh xứng đôi.
XBoard lấy người dùng vì trung tâm, thâm nhập lý giải cũng đoán trước người dùng ở các loại cảnh tượng hạ nhu cầu,
Thiết kế phù hợp người dùng thói quen, tăng lên người dùng thể nghiệm phục vụ.
Thí dụ như: Hợp tác hỗ động bản có thể ở thân tử giáo dục, phụ đạo việc học hoạt động trung tỏa sáng rực rỡ, gia trưởng ở một bộ thiết bị thượng ra đề mục,
Hài tử có thể ở một khác bộ thiết bị thượng đáp lại. Rồi sau đó gia trưởng nhưng căn cứ hoàn thành chất lượng cấp ra cho điểm,
Toàn bộ quá trình thông thuận thả chất lượng tốt. Sử dụng thể nghiệm giai.

Hiệu quả xem trước

Tri thức điểm

1.Phân tầng giá cấu thiết kế

2.Mô khối hóa thiết kế

3.Canvas lắp ráp

4.EventHub

Công trình mục lục

├──commons // công cộng năng lực tầng
│ ├──datastore // số liệu quản lý
│ ├──uicomponents // công cộng UI lắp ráp
│ └──utils // công cụ kho
├──features // cơ sở đặc tính tầng
│ ├──collaborating // hợp tác hỗ động bản
│ ├──portable // liền nắm tay viết bản
│ └──tactical // bóng rổ chiến thuật bản
└──products // sản phẩm định chế tầng
└──phone // ứng dụng nhập khẩu

Cụ thể thực hiện

theo ứng dụng quy mô mở rộng cùng nghiệp vụ nhu cầu phức tạp hóa, số hiệu phức tạp độ tương ứng tăng lên. Bởi vậy, tốt đẹp ứng dụng giá cấu thiết kế trở nên đặc biệt quan trọng, giá cấu thiết kế mục đích là làm ứng dụng càng dễ dàng giữ gìn, mở rộng cùng thí nghiệm.

Phân tầng giá cấu thiết kế:Đem ứng dụng phân chia vì sản phẩm định chế tầng, cơ sở đặc tính tầng cùng công cộng năng lực tầng, có thể hạ thấp tầng gian ỷ lại tính, do đó tăng lên số hiệu nhưng giữ gìn tính. Thông qua phân tầng giá cấu thiết kế tiến thêm một bước minh xác mỗi tầng chức trách cùng tầng gian lẫn nhau cơ chế, vì khai phá giả hiện ra một cái rõ ràng thả kết cấu hóa khai phá dàn giáo.
Mô khối hóa thiết kế:Đem ứng dụng phân giải vì nhiều công năng mô khối, trong đó mỗi cái mô khối phụ trách chấp hành riêng công năng. Thông qua mô khối hóa thiết kế đề cao số hiệu nhưng lý giải tính cùng nhưng phục dùng tính, sử ứng dụng mở rộng cùng giữ gìn trở nên càng vì giản tiện, đồng thời hạ thấp hệ thống các bộ phận chi gian ngẫu hợp độ.

XBoard tác phẩm chủ yếu chia làm ba cái công năng mô khối, mỗi người phụ trách từng người mô khối khai phá, lẫn nhau không ảnh hưởng, đại đại hạ thấp các bộ phận chi gian ngẫu hợp độ, đồng thời đem công cộng lắp ráp rút ra phóng tới công cộng năng lực tầng, làm các mô khối sử dụng, tỷ như tiêu đề lan lắp ráp, đồng thời riêng tư hiệp nghị khung, chế tác vì tam phương kho, phương tiện lúc sau hạng mục sử dụng.

1. Trang đầu thực hiện

Trang đầu chủ yếu biểu hiện riêng tư hiệp nghị cùng trích dẫn tiêu đề lắp ráp cùng nội dung lắp ráp.

privacyDialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogPrivacy({
openPrivacy: openPrivacyPage
}),
autoCancel: false,
alignment: DialogAlignment.Center,
customStyle: true
})

onPageShow() {
preferencesUtil.getChangePrivacy().then((value) => {
if (!value) {
this.privacyDialogController.open()
}
})
}
onPageHide() {
this.privacyDialogController.close()
}
aboutToDisappear() {
this.privacyDialogController.close()
}
// kết thúc biểu hiện riêng tư hiệp nghị khung thoại

build() {
Column() {
Title()
Content()
}
.width(CommonConstants.FULL_PERCENT)
.height(CommonConstants.FULL_PERCENT)
.linearGradient({
// 0 điểm phương hướng thuận kim đồng hồ xoay tròn vì chính hướng góc độ, tuyến tính thay đổi dần lúc đầu góc độ cam chịu giá trị vì 180°
colors: [
[0xDCFFF1, 0.0], // nhan sắc điểm tạm dừng 1 nhan sắc cùng tỉ trọng, đối ứng lắp ráp ở 180° phương hướng thượng lúc đầu vị trí
[0xFFFFFF, 1.0], // nhan sắc điểm tạm dừng 2 nhan sắc cùng tỉ trọng, đối ứng lắp ráp ở 180° phương hướng thượng chung điểm vị trí
]
})
}

Tiêu đề lắp ráp

Row() {
Image($r('app.media.help'))
.objectFit(ImageFit.Contain)
.width(px2vp(72))
.height(px2vp(72))
Blank()
Image($r('app.media.about'))
.objectFit(ImageFit.Contain)
.width(px2vp(60))
.height(px2vp(69))
}
.width(CommonConstants.FULL_PERCENT)
.padding(px2vp(72))

Nội dung lắp ráp, đồng thời cũng là ba cái mô khối nhập khẩu, sử dụng RelativeContainer bố cục

RelativeContainer() {
Image($r('app.media.tactical'))
.offset({ y: -px2vp(470)})
.width(px2vp(759))
.height(px2vp(732))
.objectFit(ImageFit.Contain)
.id('tactical')
.alignRules({
center: {anchor: '__container__', align: VerticalAlign.Center},
middle: {anchor: '__container__', align: HorizontalAlign.Center}
})
.onClick(() => {
console.info(`xx điểm đánh bóng rổ chiến thuật bản `)
router.pushNamedRoute({
name: 'tacticalPage'
})
})
Image($r('app.media.portable'))
.offset({ x: -px2vp(265), y: -px2vp(10)})
.width(px2vp(759))
.height(px2vp(732))
.objectFit(ImageFit.Contain)
.id('portable')
.alignRules({
top: {anchor: 'tactical', align: VerticalAlign.Top},
middle: {anchor: '__container__', align: HorizontalAlign.Center}
})
.onClick(() => {
console.info(`xx điểm đánh liền nắm tay viết bản `)
router.pushNamedRoute({
name: 'portablePage'
})
})
Image($r('app.media.collaborating'))
.offset({ x: px2vp(265), y: -px2vp(10)})
.width(px2vp(759))
.height(px2vp(732))
.objectFit(ImageFit.Contain)
.id('collaborating')
.alignRules({
top: {anchor: 'tactical', align: VerticalAlign.Top},
middle: {anchor: '__container__', align: HorizontalAlign.Center}
})
.onClick(() => {
console.info(`xx điểm đánh hợp tác hỗ động bản `)
router.pushNamedRoute({
name: 'collaboratingPage'
})
})
}
.width(CommonConstants.FULL_PERCENT)
.height(CommonConstants.FULL_PERCENT)

2. Bóng rổ chiến thuật bản mô khối

chủ yếu có bàn vẽ lắp ráp cùng công cụ lan lắp ráp

Column() {
// bàn vẽ
DrawBoard({
strokeStyle: $strokeStyle,
isPaintBtn: $isPaintBtn,
attackArray: this.attackArray,
defendArray: this.defendArray
})
// cái đáy công cụ lan
ToolBar({
strokeStyle: $strokeStyle,
isPaintBtn: $isPaintBtn,
attackArray: this.attackArray,
defendArray: this.defendArray,
colorArray: this.colorArray,
changeBgImage: (param: string) => {
console.info('xx điểm đánh cái đáy lan thiết trí cái nút ')
this.changeBgImage(param)
},
clean: () => {
console.info('xx điểm đánh cái đáy lan thanh bình cái nút ')
this.clean()
},
goBack: () => {
console.info('xx điểm đánh cái đáy lan hồi lui cái nút ')
this.goBack()
}
})
}
.layoutWeight(1)
.padding(10)

3. Liền nắm tay viết bản mô khối

chủ yếu có bàn vẽ lắp ráp cùng công cụ lan lắp ráp

Column() {
// bàn vẽ
DrawBoard({
strokeStyle: $strokeStyle,
lineWidth: $lineWidth,
globalCompositeOperation: $globalCompositeOperation
})
// cái đáy công cụ lan
ToolBar({
strokeStyle: $strokeStyle,
isPaintBtn: $isPaintBtn,
isEraserBtn: $isEraserBtn,
globalCompositeOperation: $globalCompositeOperation,
clean: () => {
console.info('xx điểm đánh cái đáy lan thanh bình cái nút ')
this.clean()
},
goBack: () => {
console.info('xx điểm đánh cái đáy lan hồi lui cái nút ')
this.goBack()
}
})
}
.layoutWeight(1)

4. Hợp tác hỗ động bản mô khối

này giao diện chủ yếu sử dụng SideBarContainer sườn biên lan lắp ráp, bàn vẽ cùng công cụ lan lắp ráp.

SideBarContainer(SideBarContainerType.Overlay) {
Column({space: 30}) {
this.LineWidthComponent()

Divider()

this.ColorComponent()

}.width(CommonConstants.FULL_PERCENT)
.backgroundColor('#19000000')
.borderRadius({topRight: 20, bottomRight: 20})
.padding({ top: 80, bottom: 130, left: 10, right: 10})
.margin({ top: 10, bottom: 90 })

Column() {
// bàn vẽ
DrawBoard({
strokeStyle: $strokeStyle,
lineWidth: $lineWidth,
globalCompositeOperation: $globalCompositeOperation
})
// cái đáy công cụ lan
ToolBar({
strokeStyle: $strokeStyle,
isPaintBtn: $isPaintBtn,
isEraserBtn: $isEraserBtn,
globalCompositeOperation: $globalCompositeOperation,
changeBgImage: (param: string) => {
console.info('xx điểm đánh cái đáy lan thiết trí cái nút ')
this.changeBgImage(param)
},
clean: () => {
console.info('xx điểm đánh cái đáy lan thanh bình cái nút ')
this.clean()
},
goBack: () => {
console.info('xx điểm đánh cái đáy lan hồi lui cái nút ')
this.goBack()
}
})
}
.layoutWeight(1)
}
.controlButton({
top: px2vp(60),
left: px2vp(60),
icons: {
shown: $r('app.media.list'),
hidden: $r('app.media.list'),
switching: $r('app.media.list')
}
})
.showSideBar(false)
.sideBarWidth(px2vp(237))
.minSideBarWidth(px2vp(200))
.maxSideBarWidth(px2vp(250))
.minContentWidth(0)
.divider(null)
.onChange((value: boolean) => {
console.info('status:' + value)
})

Tổng kết

thông qua này hạng mục khai phá, có thể học tập đến phân tầng giá cấu thiết kế, mô khối hóa thiết kế khai phá, học tập đến Canvas cung cấp vải vẽ tranh lắp ráp, dùng cho tự định nghĩa vẽ đồ hình, sử dụng CanvasRenderingContext2D đối tượng cùng OffscreenCanvasRenderingContext2D đối tượng ở Canvas lắp ráp thượng tiến hành vẽ, vẽ đối tượng có thể là cơ sở hình dạng, văn bản, hình ảnh chờ, học tập đến sử dụng EventHub tiến hành số liệu thông tín,EventHubVì UIAbility lắp ráp cung cấp sự kiện cơ chế, sử chúng nó có thể tiến hành đặt mua, hủy bỏ đặt mua cùng kích phát sự kiện chờ số liệu thông tín năng lực.