鸿蒙应用开发(二)

鸿蒙页面布局

开发手册

组件地址：developer.huawei.com/consumer/cn…

图标地址： developer.huawei.com/consumer/cn…

在哪写页面

常见组件

组件写法

Row(){}   // 如果需要嵌套子元素 那就带大括号
Text("hello world")  // 如果不需要嵌套子元素 那就不带大括号

样式写法

Text('123123').alignRules({
    center: { anchor: '__container__', align: VerticalAlign.Center },
    middle: { anchor: '__container__', align: HorizontalAlign.Center }
})

常见组件

Row  水平方向容器组件
Column 垂直方向的容器组件
Text  文本组件
Image 图片组件（网络图片 | 本地图片）
TextInput  输入框组件
Button  按钮组件

示例1：

@Entry  // 页面程序的入口
@Component  // 定义组件的修饰器
struct About {
  build() {
    // 组件 （可视化部分）
    // Column    （垂直方向） 容器组件
    // Row       （水平方向） 容器组件
    // Text       文本组件
    // Image      图片组件
    // TextInput   输入框组件
    // ...
    // 1： 设置一个宽度100% 高度100vp的红色盒子
    Column(){
        Row(){
            Text("新闻"){}.fontSize(30).fontColor(Color.White)
            Text("体育"){}.fontSize(30).fontColor(Color.White)
            Text("财经"){}.fontSize(30).fontColor(Color.White)
            Text("历史"){}.fontSize(30).fontColor(Color.White)
            Text("娱乐"){}.fontSize(30).fontColor(Color.White)
        }
        .width("100%")
        .height(100)
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
    }
    .width("100%")
    .backgroundColor(Color.Orange)
    .alignItems(HorizontalAlign.Start)
    .padding({
      left: 10,
      right: 10
    })
  }
}


// ArkTS修饰器‌是一种用于装饰类、结构体、方法以及变量的工具，赋予其特殊的含义。
// 例如，
// @Component表示这是一个自定义组件，
// @Entry表示这是一个入口组件，
// @State表示组件中的状态变量，状态变量的变化会引起UI的变更‌

示例2:

@Entry
@Component
struct  Login {
   // 定义状态变量 （属性）
   @State account: string = "";
   @State password: string = "";

   build() {
       Column(){
          Row(){
            Text("账号登录"){}.fontSize(20)
          }

          Row(){
              // 文本输入框
              TextInput({
                placeholder: "请输入账号",
                text: this.account
              })
              // 监听输入框的值变化
              .onChange((value: string)=>{
                // 给text变量赋值
                this.account = value;
              })
          }
          .margin({top: 15})

         Row(){
           // 文本输入框
           TextInput({
             placeholder: "请输入密码",
             text: this.password
           })
             .type(InputType.Password)
             // 监听输入框的值变化
             .onChange((value: string)=>{
               // 给text变量赋值
               this.password = value;
             })
         }
         .margin({top: 15})

         Row(){
            Button(){
               Text("点击登录"){}.fontSize(20)
            }
            .padding({top: 8, bottom:8 , left: 15 , right: 15}).fontColor(Color.White)
           .onClick(()=>{
                console.log("账号:",this.account)
                console.log("密码:",this.password)
           })
         }
         .margin({top: 15})
       }
       .padding({
         left: 15,
         right: 15
       })
   }
}

长度单位

事件交互

@Entry
@Component
struct  Detail {
  @State left: number = 0;
  @State top: number = 0;
  build() {
      Column(){
         Text(){}.width(100).height(100).backgroundColor(Color.Red)
         .position({
           x: this.left,
           y: this.top
         })

      }
      .height("100%")
      .width("100%")
      .backgroundColor(Color.Pink)
      .onClick((event:ClickEvent)=>{
        // 控制台输出的数据的类型是string字符串类型才可以输出
        // 不能直接打印输出对象，数字,布尔值等等
        console.log(`(${event.x},${event.y})`)
        this.left = event.x - 50
        this.top = event.y - 50
      })
  }
}

路由跳转以及传递参数

创建页面，配置页面URL

页面A: Index.ets

// console.log("hello world")
import router from '@ohos.router'

// 定义商品对象结构接口
interface Product {
  id: string
  name: string
  price:  string
}

// 定义一个路由参数类
class routerParam {
  rid: string;
  constructor(value:string) {
    this.rid = value;
  }
}


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State arr: Product[] = [
    {id:"1",name: "华为手机1",price:"1500块"},
    {id:"2",name: "小米手机2",price:"1200块"},
    {id:"3",name: "魅族手机3",price:"900块"},
    {id:"4",name: "华为手机4",price:"1500块"},
    {id:"5",name: "小米手机5",price:"1200块"},
    {id:"6",name: "魅族手机6",price:"900块"},
  ];
  build() {
    RelativeContainer() {
        // 列表组件
        List(){
          //循环
          ForEach(this.arr, (element: Product)=>{
              // 每一项数据
              ListItem(){
                 // Navigator({target:'pages/Detail'}){
                   // 水平容器
                   Row(){
                     // 垂直容器
                     Column(){
                       // 渲染文本 (商品名称)
                       Text(element.name)
                         .fontSize(20)
                       Text( "ID:"+element.id )
                     }

                     Text(element.price)
                       .fontSize(20)
                   }
                   .width("100%")
                   .backgroundColor(Color.Orange)
                   .height(60)
                   .justifyContent(FlexAlign.SpaceBetween)
                   .padding({left: 10, right: 10})
                   .onClick(()=>{
                       // 跳转详情页 携带一个id参数
                       router.pushUrl({
                          url: 'pages/Detail',
                          params: {
                              id: element.id
                          }
                       }
                       // HarmonyOS  next 版本 ，携带参数需要设置模式  router.RouterMode.Standard
                       ,router.RouterMode.Standard)

                   //   router.RouterMode.Single   单实例模式  跳转详情页（id 没有变化，始终是初始值）
                   //   router.RouterMode.Standard  标准模式   跳转详情页（id 有变化， 始终是任何时候携带的参数值）
                   })
                 // }.params({rid: element.id})
              }
              .alignSelf(ItemAlign.Start)
              .width("100%")
              // 边框
              .border({
                width:1,
                style: BorderStyle.Dashed,
                color: Color.White
              })
              .margin({top: 10})

              // 阴影
              .shadow({
                offsetX: 0,
                offsetY: 2,
                color: Color.Gray,
                // fill: true,
                radius: 5
              })
          })
        }
        .padding(15)
        // 设置滚动条颜色透明
        .scrollBarColor(Color.Transparent)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

页面B: Detail.ets

// 导入路由实例对象
import router from '@ohos.router'

@Entry
@Component
struct  Detail {
    // 定义状态变量
    // router.getParams() 获取主页通过路由跳转携带的参数
    @State paramsFrom: object = router.getParams()
    build() {
        // 可视化的内容
        RelativeContainer(){
          Row(){
            Button(){
              Text("返回").fontSize(20)
            }
            .onClick(()=>{
              // 编程式导航  ，跳转首页
              router.pushUrl({url: 'pages/Index'})
            })
          }
          Row(){
            Text("携带参数ID:"+this.paramsFrom?.['id'])
          }
          .margin({top: 40})
        }
    }
}