1.使用路由

我们将页面的信息都写到src>main>resources>base>profile>main_pages.json中

添加路由跳转代码

Index跳转第二个页面

RelativeContainer() { Row(){ Button("跳转到第二个页面") .width('33%') .height('15%') .margin({top:500}) .fontSize(60) .onClick(()=>{ router.pushUrl({url:"pages/SecondPage"})

    })

2.使用布局

1.线性布局（Row、Column） 如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。 2.层叠布局（Stack） 组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理，则优先考虑在外层使用堆叠布局。 3.弹性布局（Flex） 弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充效果。 4.相对布局（RelativeContainer） 相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。通过在子组件上设置锚点规则（AlignRules）使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。 5.栅格布局（GridRow、GridCol） 栅格是多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐内容相同但布局不同时使用。 6.媒体查询（@ohos.mediaquery） 媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。 7.列表（List） 使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。 8.网格（Grid） 网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用，例如计算器、相册、日历等。 9.轮播（Swiper） 轮播组件通常用于实现广告轮播、图片预览等。 10.选项卡（Tabs） 选项卡可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

（1）线性布局

1.线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。 2.布局子元素在主轴上的排列方式：Column Column @Entry @Component struct TestPage {

build() { Column(){ Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red) Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray) Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow) Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue) Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White) }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center) } } 3.布局子元素在主轴上的排列方式：Row ROW @Entry @Component struct TestPage {

build() { Row(){ Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red) Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray) Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow) Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue) Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White) }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center) } }