页面原型

登录页面原型

在DevEco Studio项目的pages目录上单击鼠标右键，选择创建ArkTS File文件，命名为Login。

/**
 * 登录页面
 * 
 */
@Entry
@Component
struct Login {
    @State message: string = "登录页面";

    build() {
        // 先创建一个线性布局
        Row() {
            Column() {
                Text(this.message)
                    .fontSize(38);

                // 摆上需要的原型组件
                TextInput()
                TextInput()
                Button("注册/登录")

            }.width("100%")
        }.height("100%")
    }
}

然后在src/main/resources/base/profile/main_pages.json文件中添加路由。

{
  "src": [
    "pages/Index",
    "pages/Login"
  ]
}

再来创建其他各个页面的简单原型。

首页原型

/**
 * 首页
 *
 */
@Preview
@Component
// 导出组件
export struct Main {
    @State message: string = "首页";

    build() {
        Row() {
            Column() {
                Text(this.message).fontSize(38)
            }.width("100%")
        }.height("100%")
    }
}

视频发布页面原型

/**
 * 视频发布
 *
 */
@Preview
@Component
// 导出组件
export struct VideoPublish {
    @State message: string = "视频发布";

    build() {
        Row() {
            Column() {
                Text(this.message).fontSize(38)
            }.width("100%")
        }.height("100%")
    }
}

“我”页面原型

/**
 * 我
 *
 */
@Preview
@Component
// 导出组件
export struct Me {
    @State message: string = "我";

    build() {
        Row() {
            Column() {
                Text(this.message).fontSize(38)
            }.width("100%")
        }.height("100%")
    }
}

页面导航

在src/main/ets/pages/Index.ets页面中创建导航布局。

import { Main } from './Main'
import { Me } from './Me'
import { VideoPublish } from './VideoPublish'

@Entry
@Component
struct Index {
    build() {
        // 设置导航栏
        Tabs( {barPosition: BarPosition.End} ) {
            // 各个导航的页签
            TabContent() {
                Main()
            }.tabBar("首页")

            TabContent() {
                VideoPublish()
            }.tabBar("+")

            TabContent() {
                Me()
            }.tabBar("我")
        }
    }
}

---

感谢支持

更多内容，请移步《超级个体》。