Navigation

Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。同时，Navigation提供了属性来设置页面的标题栏、工具栏、导航栏等。

设置页面显示模式

自适应模式

Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。

Navigation() {
  ...
}
.mode(NavigationMode.Auto)

单页面模式

分栏模式

@Entry
@Component
struct NavPage {
  @State message: string = 'Hello World'
  private arr: number[] = [1, 2, 3];

  build() {
    Row() {
      Column() {
        Navigation() {
          // TextTimer()
          Text('ss')
          List({ space: 12 }) {
            ForEach(this.arr, (item) => {
              ListItem() {
                NavRouter() {
                  Text("NavRouter" + item)
                    .width("100%")
                    .height(72)
                    .backgroundColor('#FFFFFF')
                    .borderRadius(24)
                    .fontSize(16)
                    .fontWeight(500)
                    .textAlign(TextAlign.Center)
                  NavDestination() {
                    Text("NavDestinationContent" + item)
                  }
                  // .title("NavDestinationTitle" + item)
                }
              }

            }, item => item)

          }

        }
        .mode(NavigationMode.Split)
        .width('100%')
      }
      .height('100%')
    }
  }
}

设置工具栏

Navigation() {
  ...
}
.toolBar({items:[
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})

Tabs

基本布局

Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')

  TabContent() {
    Text('发现的内容').fontSize(30)
  }
  .tabBar('发现')
  
  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。

TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar，可以设置其对应页签中的内容，tabBar作为内容的页签。

 TabContent() {
   Text('首页的内容').fontSize(30)
 }
.tabBar('首页')

底部导航

导航栏位置使用Tabs的参数barPosition进行设置，默认情况下，导航栏位于顶部，参数默认值为Start。设置为底部导航需要在Tabs传递参数，设置barPosition为End。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容：首页、发现、推荐、我的
  ...
}

Row() {
          Column() {
            Tabs({ barPosition: BarPosition.End }) {

              TabContent() {
                Text('首页的').fontSize(10)
              }.tabBar('首页')

              TabContent() {
                Text('首页的内容').fontSize(10)
              }.tabBar('首页')
            }
            .barMode(BarMode.Fixed)
          }
        }

绘制几何图形

创建绘制组件

绘制组件使用Shape作为父组件，实现类似SVG的效果。接口调用为以下形式：

Shape(value?: PixelMap)

//
//该接口用于创建带有父组件的绘制组件，其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若//未////设置，则在当前绘制目标中进行绘制

Shape() {
  Rect().width(300).height(50)
}

//完整
        Shape() {
          Rect().width('100%').height('100%').fill('#0097D4')
          Circle({ width: 75, height: 75 }).fill('#E87361')
        }

使用画布绘制自定义图

使用画布组件绘制自定义图形

可以由以下三种形式在画布绘制自定义图形：

@Entry
@Component

  //create user：16054；
  //vriten ：2
  // testinfo：自定义图型
struct CustomizeGraph {
  @State message: string = 'Hello World'
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Row() {
      Column() {
        Text(this.message)
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#F5DC62')
          .onReady(() => {
            //可以在这里绘制内容。
            this.context.strokeRect(50, 50, 200, 150);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在Canvas上加载Lottie动画时，需要先按照如下方式下载Lottie。

import lottie from '@ohos/lottie'

arkui