目录
1、模块化语法
1.1 模块化基本认知
1.2 默认导出和导入
1.2.1 在ets下新建tools目录
1.2.2 在tools下新建moduls.ets文件
1.2.3 index.ets
1.3 按需导出和导入
1.4 全部导入
2、自定义组件 -基础
2.1 自定义组件 - 基本使用
2.2 自定义组件 -通用样式
2.2.1 ets下新建components文件夹
2.2.2 components新建HelloCom.ets
2.2.3 Index.ets
2.3 自定义组件 -成员函数变量
3、@BuilderParam
3.1 @BuilderParam 传递UI
3.2 多个 @BuilderParam 参数
4、 状态管理
4.1 状态管理概述
4.2 @ State 自己的状态
4.3 @Prop -父子单向
前言：自定义组件-组件通信（模块化语法）、自定义组件、传递UI、状态管理
1、模块化语法
1.1 模块化基本认知
1.2 默认导出和导入
1.2.1 在ets下新建tools目录
1.2.2 在tools下新建moduls.ets文件
interface Person {
name: string
age: number
}
let num: number = 10
let person: Person ={
name: '春天的菠菜',
age: 18
}
// 默认导出（导出一个值）
export default num1.2.3 index.ets
导入进来 import 导入进来新取的名称 from 路径（相对路径）
import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'
@Extend(Text)
function textExtend(){
.fontSize(20)
.fontWeight(700)
.backgroundColor(Color.Green)
.padding(10)
.margin(5)
}
@Entry
@Component
struct Index {
@State message: string = '@春天的菠菜';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
build() {
Column(){
Text('来自tools/modlus 模块的值：'+ myNum)
.textExtend()
}
.width('100%').height(100)
}
}
1.3 按需导出和导入
tools下新建/module3.ets
// 按需导出
// 多个特性, 逐个 export 按需导出
// export let name1: string = '刘备'
// export let price: number = 9.98
// export let sayHi = () => {
// console.log('打招呼')
// }
let name1: string = '刘备'
let name2: string = '张飞'
let name3: string = '关羽'
let price: number = 9.98
let price2: number = 10.1
let sayHi = () => {
console.log('打招呼')
}
let run = () => {
console.log('跑步')
}
// 一次性将多个特性, 进行导出
export {
name1, name2, name3,
price, price2,
sayHi, run
}
import window from '@ohos.window';
// 相对路径
import myNum from '../tools/moduls'
import { name1, price, sayHi }from '../tools/module3'
sayHi()
@Extend(Text)
function textExtend(){
.fontSize(20)
.fontWeight(700)
.backgroundColor(Color.Green)
.padding(10)
.margin(5)
}
@Entry
@Component
struct Index {
@State message: string = '@春天的菠菜';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
build() {
Column(){
Text('来自tools/modlus 模块的值：'+ myNum)
.textExtend().margin(5)
Text('来自tools/module3 模块的值：'+ name1 +'**' + price )
.textExtend()
}
.width('100%').height(100)
}
}
1.4 全部导入
2、自定义组件 -基础
2.1 自定义组件 - 基本使用
1、无@Entry 2、 struct 后面自定义名称
import window from '@ohos.window';
@Extend(Text)
function textExtend(){
.fontSize(20)
.fontWeight(700)
.backgroundColor(Color.Green)
.padding(10)
.margin(5)
}
@Entry
@Component
struct Index {
@State message: string = '@春天的菠菜';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
build() {
Column() {
MyHeader()
MyMain()
MyFooter()
}
}
}
@Component
struct MyCom {
@State count: number = 1
build() {
Row() {
Text(this.count.toString())
.fontColor(Color.White)
.margin(10)
Button('按钮')
.onClick(() => {
this.count++
})
}
}
}
@Component
struct MyHeader {
build() {
Row() {
Text('我是头部')
.fontColor(Color.White)
}
.width('100%')
.height(50)
.backgroundColor(Color.Brown)
}
}
@Component
struct MyMain {
build() {
Column() {
// 将相同的业务逻辑, 封装成一个通用的组件
MyCom()
MyCom()
MyCom()
}
.layoutWeight(1)
.width('100%')
.backgroundColor(Color.Gray)
}
}
@Component
struct MyFooter {
build() {
Row() {
Text('我是底部')
}
.width('100%')
.height(50)
.backgroundColor(Color.Green)
}
}
2.2 自定义组件 -通用样式
2.2.1 ets下新建components文件夹
2.2.2 components新建HelloCom.ets
@Preview
@Component
export struct HelloCom {
build() {
Row() {
Text('自定义组件')
Button('按钮')
}
.width(200)
.height(50)
.backgroundColor(Color.Orange)
}
}2.2.3 Index.ets
import window from '@ohos.window';
import { HelloCom } from '../components/HelloCom'
@Extend(Text)
function textExtend(){
.fontSize(20)
.fontWeight(700)
.backgroundColor(Color.Green)
.padding(10)
.margin(5)
}
@Entry
@Component
struct Index {
@State message: string = '@春天的菠菜';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
build() {
Column() {
HelloCom()
.width(250)
.height(60)
.backgroundColor(Color.Gray)
.onClick(() => {
AlertDialog.show({
message: '测试点击'
})
})
}
}
}
2.3 自定义组件 -成员函数变量
带=符号的可以外部传参
import window from '@ohos.window';
@Extend(Text)
function textExtend(){
.fontSize(20)
.fontWeight(700)
.backgroundColor(Color.Green)
.padding(10)
.margin(5)
}
@Entry
@Component
struct Index {
@State message: string = '@春天的菠菜';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
build() {
Column() {
MyPanel({
title: '我的订单',
extra: '全部订单',
getMore() {
AlertDialog.show({
message: '点击了全部订单'
})
}
})
MyPanel({
title: '小米有品众筹',
extra: '七款众筹中',
getMore() {
AlertDialog.show({
message: '点击了众筹'
})
}
}
)
}
.width('100%').height('100%')
.backgroundColor('#ccc')
.padding(20)
}
}
@Component
struct MyPanel {
// 成员变量 -数据
title: string = '默认的大标题'
extra: string = '查看更多'
// 成员变量 -函数 可以传入覆盖
getMore = () =>{
AlertDialog.show({
message: '查看更多'
})
}
// 成员函数 -- 不可以外部传入覆盖
sayHi (){
AlertDialog.show({
message: '打招呼 你好'
})
}
build() {
Column(){
Row(){
Text(this.title)
.fontSize(18)
Text(this.extra)
.fontSize(18)
.onClick( () => {
this.getMore()
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row(){
Text('内容部分')
.fontSize(18)
Button('按钮')
.onClick(() => {
this.sayHi()
})
}
.padding(20)
}
.width('100%').height(200)
.margin({bottom: 20})
.borderRadius(10)
.padding(10)
.backgroundColor(Color.White)
}
}
3、@BuilderParam
3.1 @BuilderParam 传递UI
3.2 多个 @BuilderParam 参数
4、 状态管理
4.1 状态管理概述
4.2 @ State 自己的状态
4.3 @Prop -父子单向
