☀️說明：請使用開物室V3.0.0.601 Beta1及更高版本。使用模拟器運行時請選擇API7及以上的設備。

☀️1，打開開物室，創建一個新工程，選擇模闆Empty Ability。

☀️2，進入配置工程界面，工程類型 選擇Application，語言選擇eTS，其他參數根據實際需要設置即可。

☀️1，工程創建完成後，在工程窗口，點擊“entry > src > main > ets > default > pages”，打開“index.ets”文件。

☀️2，第一個頁面由Flex容器組件、Text組件和Button組件構成。在“index.ets”中編寫并設置頁面組件的屬性和樣式，示例代碼如下所示：

@Entry

@Component

struct Index {

build() {

//Flex容器組件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text組件

Text('Hello World')

.fontSize(60)

.fontWeight(500)

//Button組件

Button('Next')

.fontSize(40)

.fontWeight(500)

.width(280)

.height(60)

}

//容器整體寬高

.width('100%')

.height('100%')

}

}

☀️1，在工程窗口，打開“entry > src > main > ets > default”，右鍵點擊“pages”文件夾，選擇“New > eTS Page”，命名為“details”，單擊回車鍵。創建完成後，可以看到“pages”文件夾下的文件目錄結構。

☀️2，詳情頁面由Flex容器組件、Text組件構成。在“details.ets”中編寫并設置頁面組件的屬性和樣式，示例代碼如下所示：

@Entry

@Component

struct Details {

build() {

//Flex容器組件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text組件

Text('Hi there')

.fontSize(60)

.fontWeight(500)

}

//容器整體寬高

.width('100%')

.height('100%')

}

}

☀️1，打開第一個頁面的“index.ets”文件，導入router模塊，頁面路由router根據頁面的網址源來找到目标頁面，從而實現跳轉。示例代碼如下：

//導入router模塊

import router from '@system.router';

@Entry

@Component

struct Index {

build() {

//Flex容器組件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text組件

Text('Hello World')

.fontSize(60)

.fontWeight(500)

//Button組件

Button('Next')

.fontSize(40)

.fontWeight(500)

.width(280)

.height(60)

//點擊Button實現頁面跳轉

.onClick(() => {

router.push({ uri: 'pages/details' })

})

}

//容器整體寬高

.width('100%')

.height('100%')

}

}

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!