3️⃣通过编写计算器学习ArkUI组件 原创 精华

发布于 2022-3-13 15:58
浏览
2收藏

【本文正在参与优质创作者激励】

$\color{FF0000}{有兴趣的可以通过社区群加我一起探索ArkUI应用开发😁😁😁}$


$\color{#ff9a3c}{往期推荐}$

这道菜我称为“ArkUI荟萃”—序
了解一些ArkUI概念并熟悉应用的结构
1️⃣通过编写计算器学习ArkUI组件
2️⃣通过编写计算器学习ArkUI组件

3.5 Row容器组件

在3.4小节中,自定义左侧带图标的按钮时,我们使用了Row容器组件,Row容器组件是什么呢?
Row容器组件称为沿水平方向布局容器Column容器组件是沿垂直方向布局容器,我将两者都称之为线性布局容器。
Row容器组件的用法和Column容器组件的用法类似。

@Entry
@Component
struct RowExample {
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
      Text('横向子组件布局间距').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('居中对齐,默认对齐方式,可以不写').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row({space: 4}) {
        Text('A').width('50%').height('100%')
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height('100%')
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }
      .height(50)
      .width(300)

      Text('底部对齐').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Bottom).width('90%').height(100)

      Text('顶部对齐').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Top).width('90%').height(100)
    }
    .width('100%')
    .height('100%')
  }
}

3️⃣通过编写计算器学习ArkUI组件 -开源基础软件社区

3.6 实现页面跳转

通过对容器组件、组件、装饰器的了解,在3.4小节实现了标题栏区域的功能按钮布局,如何通过点击按钮进入到绑定的页面呢?本小节将继续带大家一起了解页面跳转(也称路由跳转)。
路由跳转有两种形式:通过 路由容器组件Navigator 或者 路由RouterAPI接口 来实现页面间的跳转。

3.6.1 Navigator路由容器组件

Navigator路由容器组件用于包装组件,使其具备路由跳转能力,比如包含Text文本组件并设置样式,使其能够提供与HTMLa标签相似的功能。通过targettype属性控制跳转目标页面及路由方式。

// navigationExample.ets
@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳转到RouterApiExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample页面替换当前页')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}

// routerExample.ets
@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}

3️⃣通过编写计算器学习ArkUI组件 -开源基础软件社区
说明:

  • 点击【跳转到RouterApiExample页面】按钮,跳转页面;
  • 点击【返回NavigationExample页面】按钮,返回页面;
  • 点击【使用RouterApiExample页面替换当前页】按钮,跳转页面,销毁当前页,无法返回。

3.6.2 RouterAPI路由接口

API接口也提供了页面路由功能,需要在相应的页面引入模块,并通过组件的onClick方法进行页面跳转,使用需要在页面顶部引入import router from '@system.router'

API 描述
router.push 跳转到应用内指定页面,相当于Navigation组件设置type值为NavigationType.Push
router.replace 用应用内的某个页面替换当前页面,并销毁被替换的页面,相当于Navigation组件设置type值为NavigationType.Replace
router.back 返回上一页面或指定的页面,相当于Navigation组件设置type值为NavigationType.Back
其他 用到再介绍
// navigationExample.ets
import router from '@system.router';

@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Navigator路由容器组件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳转到RouterApiExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample页面替换当前页')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('返回到RouterApiExample页面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .onClick(() => {
          router.back({
            uri: 'pages/simple/routerApiExample'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}
// routerApiExample.ets
import router from '@system.router';

@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('跳转到NavigationExample页面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.push({
            uri: 'pages/simple/navigationExample'
          })
        })
      Text('使用NavigationExample页面替换当前页')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.replace({
            uri: 'pages/simple/navigationExample'
          })
        })

      Text('Navigator路由容器组件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}

3️⃣通过编写计算器学习ArkUI组件 -开源基础软件社区

3.7 给标题栏区域按钮添加页面跳转

新建science.ets(科学计算器),housingLoan.ets(房贷计算器),programmer.ets(程序员计算器),history.ets(历史记录)四个页面。

  1. 引入routerAPI接口
import router from '@system.router'
  1. 为按钮添加点击事件
// 在bindMenu菜单元素的action中添加路由跳转
{
  value: "科学",
  action: () => {
    router.push({uri: 'pages/science'})
  }
},
// 给右侧历史记录按钮添加onClick事件
.onClick(() => {
  router.push({uri: 'pages/history'})
})

3️⃣通过编写计算器学习ArkUI组件 -开源基础软件社区

总结

本小节对Row容器组件和路由跳转做了简单的介绍,下节将继续完善我们的标准计算器。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-3-13 15:58:33修改
8
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐