鸿蒙小记

自定义Component不能作为根容器

自定义Component不能直接作为@Entry注解的组件的根组件，如果想用，需要套一层系统的容器组件

Scroll无法滚动

Scroll的~~直接子组件~~,滚动方向上的尺寸，一定不能设置为100%，设置后无法滚动。

Scroll() {
  Row()
    .height('100%')
}
.scrollable(ScrollDirection.Vertical)

Scroll的直接子组件和父组件链上的尺寸需要设置合理的值（基本上就是错估的"100%"的含义）

      Column() {
        this.actionBar()

        Navigation(this.subStack) {
          this.accountContentView()
        }
        .width("100%")
      }
      .width("100%")
      .height("100%")
      

      @Builder
      accountContentView() {
        Scroll() {
          Column() {...}
          .width("100%")
        }
        .width("100%")
        .scrollable(ScrollDirection.Vertical)
      }

假设accountContentView()中Scroll的内容足够滚动，且actionBar()高度是一个固定小的数值。现在这样没办法滚动，因为Navigation高度是auto，实际大小会保持Scroll内Column的大小，无法滚动；
如果将Navigation高度设置为100%，那么也有可能无法滚动，*100%*是将Navigation高度设置为根Column的高度，如果Scroll的内容高度小于根Column的高度也无法滚动。
能够滚动是：Scroll的直接子组件在滚动方向上的尺寸大于scroll。

RelativeContainer chainWeight存在顺序问题

ItemPlaneView()
  .id("item1")
  .alignRules({
    left: { anchor: "__container__", align: HorizontalAlign.Start },
    right: { anchor: "item2", align: HorizontalAlign.Start },
    top: { anchor: "title", align: VerticalAlign.Bottom }
  })
  .chainWeight({ horizontal: 1 })

如果chainWeight放在alignRules之前，运行会报错:
Reason:Signal:SIGSEGV(SEGV_MAPERR)@0x0000000000000110 probably caused by NULL pointer dereference

RelativeContainer guideLine

guideLine的direction表示的是实际这条线显示的方式，Axis.Vertical说明是垂直的一条线。
容器在某个方向的尺寸被声明为"auto"，则该方向上的guideLine位置只能使用start属性声明

RelativeContainer barrier

direction指的是屏障线在的位置，BarrierDirection.RIGHT，指的是这条线在所有referencedId的视图的右边

Column

Column子view margin不生效

        //margin无效
        Column() {
          Button()
          .width("100%")
          .margin({ left: 12, right: 12 })
        }
        .alignItems(HorizontalAlign.Center)
        .width("100%")
        .height("100%")
        
        //方案1，使用constraintSize({ maxWidth: "100%" })
        Column() {
          Button()
            .width("100%")
            .constraintSize({ maxWidth: "100%" })
            .margin({ left: 12, right: 12 })
        }
        .alignItems(HorizontalAlign.Center)
        .width("100%")
        .height("100%")
        
        //方案2，使用calc设置宽度
        Column() {
          Button()
            .width('calc(100% - 12vp - 12vp)')//calc内部符号必须与数值保持间隙，'calc(100% - 12vp -12vp)' 无效
        }
        .alignItems(HorizontalAlign.Center)
        .width("100%")
        .height("100%")
        
        //方案3，外部嵌套一个ViewGroup并设置padding

SVG着色后没有图形，颜色全是设置的颜色

鸿蒙对svg的着色只对path的fill属性有效，对stroke无效

显示沙箱内文件图片

构造 file://${BUNDLE_NAME}${pathDir}/${imgName} 的格式，Image直接使用就行

private getAvatarRes(): ResourceStr {
    const bundleName = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT).name;
    const avatarFullPath = context.filesDir + "/avatar.jpg";
    const result = `file://${bundleName}${avatarFullPath}`;
    console.log("path:" + result) //输出:path:file://com.test.example/data/storage/el2/base/haps/entry/files/avatar.jpg
    return result;
  }
  
Image(this.getAvatarRes())

CustomDialogController

CustomDialogControllerOptions如果没有设置customStyle或设置为false，dialog会有背景色，将builder布局背景色设置为透明色或将CustomDialogControllerOptions的backgroundColor设置为透明色也无法去除，去除就要设置customStyle:true。
customStyle:true也会使dialog可以使用状态栏和导航栏等区域。

List

让内容可以滚动到Padding区域

        android:clipToPadding="false"
        android:paddingTop="12dp"
        
        //在鸿蒙的等效代码
        
        List(){
        }
        .padding({top:12})
        .clipContent(ContentClipMode.BOUNDARY)

Json

如果返回的json属性有非法字符-，如：

`{
  "order-list": [
    { "id": 1, "item": "Apple", "quantity": 10 },
    { "id": 2, "item": "Banana", "quantity": 5 }
  ],
  "status": "success"
}`

//定义interface
interface Order {
  id: number;
  item: string;
  quantity: number;
}

interface Response {
  "order-list": Order[];
  status: string;
}

定义时，键可以直接使用引号包裹当作字符串如"order-list"。