无处安放的波澜

【HarmonyOS4.0】第九篇-ArkUI布局容器组件(一)

容器组件指的是它可以包含一个或多个子组件的组件，除了前边介绍过的公共属性外。

一、线性布局容器（Row、Column）

线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。

1.1.主轴和纵轴概念

什么是主轴和纵轴？

对于线性容器来说，有主轴和纵轴之分：

如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；
如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。

如下图所示：

容器属性说明：

属性方法名	说明	参数
justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign枚举
alignItems	设置子元素在交叉轴方向的对齐格式	Row容器使用VerticalAlign枚举Column容器使用`HorizontalAlign` 枚举

1.2.Column

Column 按照垂直方向布局子组件，主轴为垂直方向，纵轴为水平方向。

1.2.1.Column定义

沿垂直方向布局的容器。接口如下：

Column(value?: {space?: string | number})

value：可选参数， space 表示设置 Column 的子组件在垂直方向上的间距，参数：

参数名	参数类型	必填	参数描述
space	string \| number	否	纵向布局元素垂直方向间距。从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

1.2.2.Column属性介绍

alignItems：设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：

Start：设置子组件在水平方向上按照语言方向起始端对齐。
Center（默认值）：设置子组件在水平方向上居中对齐。
End：设置子组件在水平方向上按照语言方向末端对齐。

案例如下：

@Entry
@Component
struct ColumnExample {
  build() {
    //只能有一个根容器
    Column(){

      Column(){
        Text("Start")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.Start) //子容器：设置子组件在水平方向上按照语言方向起始端对齐。
      .size({width:"100%",height:60})    //容器的宽和高
      .borderWidth(2)                    //框线的宽度
      .borderColor("#000000")            //框线的颜色
      .margin({top:20, bottom:20})       //外上、下边距

      Column(){
        Text("Center")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.Center)//子容器：设置子组件在水平方向上居左对齐。
      .size({width:"100%",height:60})    //容器的宽和高
      .borderWidth(2)                    //框线的宽度
      .borderColor("#0000CD")            //框线的颜色
      .margin({top:20, bottom:20})       //外上、下边距

      Column(){
        Text("End")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.End)  //子容器：设置子组件在水平方向上按照语言方向末端对齐。
      .size({width:"100%",height:60})   //容器的宽和高
      .borderWidth(2)                   //框线的宽度
      .borderColor("#FF1493")           //框线的颜色
      .margin({top:20, bottom:20})      //外上、下边距
    }
  }
}

预览效果如下：

justifyContent：设置子组件在垂直方向上的对齐方式， FlexAlign枚举 定义了一下几种类型：

Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
SpaceEvenly：主轴方向元素等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

如下图所示：

案例代码如下：

@Entry
@Component
struct ColumnExample {
  build() {

    Column({space:5}){  // 设置子元素垂直方向间距为5

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
        .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
        .justifyContent(FlexAlign.Start) //元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐
        .size({width:"100%", height:120}) //容器大小
        .borderWidth(2)
        .borderColor("#D2B48C")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.Center) //元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#8A2BE2")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.End) //元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#FF69B4")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceBetween) //元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。Q
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#DDA0DD")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceAround) //元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#E6E6FA")


      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceEvenly) //元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#FFB6C1")

    }
    .width("100%")
    .margin({top:20})
    
  }
}

预览效果如下：

1.3.Row

Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。

1.3.1.Row定义介绍

沿水平方向布局容器。接口如下：

Row(value?:{space?: number | string })

value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距，案例如下：

@Entry
@Component
struct RowExample01 {
  build() {
    Column({space:20}){
      Row(){
        Text().width(90).height("100%").backgroundColor("#FFB6C1")

        Text().width(20).height("100%") //模拟元素直接间隔

        /**
         * 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
         默认值：0
         说明：
         仅在Row/Column/Flex布局中生效。
         可选值为大于等于0的数字，或者可以转换为数字的字符串。
         */
        Text().width(20).height("100%").layoutWeight(1).backgroundColor(Color.Blue)
      }
      .width("100%")
      .height(60)

      Row({space:20}){ //Row容器的间隔
        Text().width(90).height("100%").backgroundColor("#FFB6C1")

        /**
         * 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
         默认值：0
         说明：
         仅在Row/Column/Flex布局中生效。
         可选值为大于等于0的数字，或者可以转换为数字的字符串。
         */
        Text().width(20).height("100%").layoutWeight(1).backgroundColor(Color.Blue)
      }
      .width("100%")
      .height(60)
    }
    .width("100%")
    .padding(10)
  }
}

注意：

layoutWeight：父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。默认值：0说明：

仅在Row/Column/Flex布局中生效。
可选值为大于等于0的数字，或者可以转换为数字的字符串。

预览效果如下：

1.3.2.Row属性介绍

alignItems：参数类型为 VerticalAlign ，表示子组件在垂直方向上的布局方式， VerticalAlign 定义了以下三种对其方式：

Top：设置子组件在竖直方向上居顶部对齐。
Center（默认值）：设置子组件在竖直方向上居中对其。
Bottom：设置子组件在竖直方向上居底部对齐。

案例代码如下：

@Entry
@Component
struct RowExample01 {
  build() {
    Column({space:20}){
      Row(){
        //这里为了看到消息，不要设置子元素的宽和高
        Text("Top").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Top)  //设置子组件在垂直方法顶部对象
      .borderWidth(2)                 //设置框线宽度
      .borderColor(Color.Orange)      //框线颜色


      Row({space:20}){ //Row容器的间隔
        Text("Center").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Center)  //设置子组件在垂直方法居中对齐
      .borderWidth(2)                 //设置框线宽度
      .borderColor(Color.Green)       //框线颜色

      Row({space:20}){ //Row容器的间隔
        Text("Bottom").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Bottom)  //设置子组件在垂直方法居中对齐
      .borderWidth(2)                    //设置框线宽度
      .borderColor(Color.Red)            //框线颜色

    }
    .width("100%")
    .padding(10)
  }
}

预览效果如下：

justifyContent：设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：

Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
SpaceEvenly：主轴方向元素等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

示意图如下：

案例代码如下：

@Entry
@Component
struct RowExample03 {
  build() {
    Column({space:10}){
      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.Start) //元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.Center) //元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.End) //元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceBetween) //主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceAround) //主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceEvenly) //主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

    }
    .width("100%")
    .padding({top:20})

  }
}

如果 Row 设置了 space 参数，则 justifyContent 参数不起作用。预览效果如下：

1.4.Blank

Blank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。

1.4.1.Blank定义

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。接口如下：

Blank(min?: number | string)

参数：

参数名	参数类型	必填	参数描述
min	number \| string	否	空白填充组件在容器主轴上的最小大小。默认值：0说明：不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。

1.4.2.Blank属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
color	ResourceColor	设置空白填充的填充颜色。默认值：Color.Transparent从API version 9开始，该接口支持在ArkTS卡片中使用。

1.4.3.案例

案例代码如下：

@Entry
@Component
struct BlackExample {
  build() {
    Column({space:20}){
      // blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
      Row(){
        Text("Bluetooth")
          .fontSize(20) //文本
        Blank().color(Color.Green) //不设置空白颜色
        Toggle({type:ToggleType.Switch}) //按钮开关
      }
      .backgroundColor(Color.Pink)
      .borderRadius(8)
      .size({height:80})
      .justifyContent(FlexAlign.SpaceBetween) //设置
      .padding(10)


      Row(){
        Text("Bluetooth")
          .fontSize(20) //靠左显示
        // 设置最小宽度为160
        Blank(160).color(Color.Orange) //设置空白颜色
        Toggle({type:ToggleType.Switch}) //按钮开关
      }
      .backgroundColor(Color.Pink)
      .borderRadius(8)
      .size({width:"100%", height:80})
      .justifyContent(FlexAlign.SpaceBetween) //设置
      .padding(10)

    }
    .padding(20)
    .size({width: "100%", height: "100%"})
  }
}

预览效果如下：

Blank 的特点：

Black只在 Row 和 Column 容器中生效。
除了 color 外不支持通用属性。
只在 Row 和 Column 有剩余空间才生效。
适合用在多设备适配场景中。

1.5.完整案例演示

学习上面的内容需要知道：纵向布局使用Column容器，横向布局采用Row容器，通过justifyContent和alignItems分别用来设置主轴和交叉轴的对齐方式：

属性方法名	说明	参数
justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign枚举
alignItems	设置子元素在交叉轴方向的对齐格式	Row容器使用VerticalAlign枚举Column容器使用`HorizontalAlign` 枚举

1.5.1.需求如下

实现商品列表的展示，如下：

分析页面元素构成：

1.5.2.实现思路

这里的商品列表是，不能通过一个一个的Row容器实现，需要通过ForEach实现,很多时间是不确定有多少个商品的，如下：

代码如下：

@Entry
@Component
struct ListExample {
  private items = [
    {name:"HUAWEI Mate 60", image: $r("app.media.mate60"), price: 5999.00},
    {name:"HUAWEI MatePad Pro", image: $r("app.media.MatePadPro"), price: 4299.00},
    {name:"HUAWEI WATCH GT 4", image: $r("app.media.WATCHGT4"), price: 1538.00},
    {name:"HUAWEI FreeBuds Pro 3", image: $r("app.media.FreeBudsPro3"), price: 1499.00},
    {name:"HUAWEI MateBook 14s", image: $r("app.media.MateBook14s"), price: 5299.00}
  ]
  build() {
    Column(){
      ForEach(this.items, //遍历的数组
        (item: any, index?:number)=> //页面组件生成函数
        {
        Row(){
          Image(item.image)
          Column(){
            Text(item.name)
            Text(item.price)
          }
        }
      })
    }
  }
}

1.5.3.实现单个商品展示

不要一蹴而就，先编写单个商品的展示，调整好样式，在考虑后续的，代码如下：

@Entry
@Component
struct ListExample {
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)

      Row({space:10}){
        Image($r('app.media.mate60')).width(100)
        Column({space:4}){
          Text("华为mata60").fontSize(20).fontWeight(FontWeight.Bold)
          Text("原价：￥4565").fontColor("#F36").fontSize(18)
        }
        .height("100%")
        .alignItems(HorizontalAlign.Start) //设置子组件在水平方向上按照语言方向起始端对齐。
      }
      .width("90%")  //设置宽度
      .height(120)    //设置高度
      .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
      .backgroundColor("#FFFFFF") //设置背景为白色
      .borderRadius(10) //这是圆角班级
      .padding(20) //内边距

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")

  }
}

预览效果如下：

1.5.4.实现商品列表，展示商品

由于后期商品很多数量不确定，不可能写多个Row标签，所以这里使用ForEach循环渲染出来商品列表信息：

class Item{
  //定位属性
  name: string
  image: any
  price: number

  constructor(name: string, image: any, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

@Entry
@Component
struct ListExample {
  private items:Array<Item> = [
    new Item("HUAWEI Mate 60 Pro",$r("app.media.mate60"),  5999.00),
    new Item("HUAWEI MatePad Pro",$r("app.media.MatePadPro"),4299.00),
    new Item("HUAWEI WATCH GT 4", $r("app.media.WATCHGT4"), 1538.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)
      
      
      ForEach(this.items,(item: Item, index?:number)=>{
        Row({space:10}){
          Image(item.image).width(100)
          Column({space:4}){
            Text(item.name).fontSize(15).fontWeight(FontWeight.Bold)
            Text(`原价：￥ ${item.price}`).fontColor("#F36").fontSize(18)
          }
          .height("100%")
          .alignItems(HorizontalAlign.Start)
        }
        .width("90%")  //设置宽度
        .height(120)    //设置高度
        .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
        .backgroundColor("#FFFFFF") //设置背景为白色
        .borderRadius(10) //这是圆角班级
        .padding(20) //内边距
      })
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")

  }
}

预览效果如下：

上面的内容虽然可以展示商品，但是商品的数量过多，无法展示出来，这时候就要采用List容器来采用滚动的方式实现。

二、弹性布局容器（Flex）

ArkUI 开发框架为了方便开发者实现灵活的页面布局方式，提供了弹性布局 Flex ，它用来为盒装模型提供最大的灵活性。 Flex 和 Row 、 Column 组件一样，也有主轴和纵轴之分。

说明：

Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

2.1.Flex接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

2.2.参数

value是一个对象。

2.2.1.direction

direction：设置子组件的的排列方向即主轴方向，类型FlexDirection 定义了以下4种排列方式：

名称	描述
Row	主轴与行方向一致作为布局模式。
RowReverse	与Row方向相反方向进行布局。
Column	主轴与列方向一致作为布局模式。
ColumnReverse	与Column相反方向进行布局。

示例图如下：

说明：

1）Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列：

2）Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

3）Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

4）ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。

案例代码如下：

@Entry
@Component
struct FlexExample {
  build() {
    Column({space:10}){
      //Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。
      Flex({direction: FlexDirection.Row}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(60)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})

      //RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。
      Flex({direction: FlexDirection.RowReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(60)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})
      
      //Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。
      Flex({direction: FlexDirection.Column}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(150)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})

      //ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。
      Flex({direction: FlexDirection.ColumnReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(150)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

2.2.2.wrap

wrap：设置子组件是单行/列还是多行/列排序， FlexWrap枚举提供了以下3种类型：

名称	描述
NoWrap	Flex容器的元素单行/列布局，子项不允许超出容器。
Wrap	Flex容器的元素多行/列排布，子项允许超出容器。
WrapReverse	Flex容器的元素反向多行/列排布，子项允许超出容器。

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //1.NoWrap（默认值）：子组件单行/列排序，子组件不允许超出容器。会挤在一起
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.NoWrap}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

      //2.Wrap：子组件多行/列排序，子组件允许超出容器。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)
      
      //3.WrapReverse：子组件反向多行/列排序，子组件允许超出容器。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.WrapReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.3.justifyContent

justifyContent：设置子组件在主轴上的对齐方式， FlexAlign 提供了以下 6 种对齐方式：

名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

如下图所示：

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //Start（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent:FlexAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)

      }
      .borderWidth(2)

      //Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

      //End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)

      //SpaceBetween：Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)


      //SpaceAround： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceAround}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)


      //SpaceEvenly： Flex 主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceEvenly}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)
      
    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.4.alignItems

所有子组件在Flex容器交叉轴上的对齐格式。默认值是ItemAlign.Start，ItemAlign枚举有6种对齐方式：

名称	描述
Auto	使用Flex容器中默认配置。
Start	元素在Flex容器中，交叉轴方向首部对齐。
Center	元素在Flex容器中，交叉轴方向居中对齐。
End	元素在Flex容器中，交叉轴方向底部对齐。
Stretch	元素在Flex容器中，交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时，拉伸到容器尺寸。
Baseline	元素在Flex容器中，交叉轴方向文本基线对齐。

代码如下：为了看到效果，不要设置wrap（设置子组件是单行/列还是多行/列排序）

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //ItemAlign.Auto使用Flex容器中默认配置。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Auto}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)

      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.Start 元素在Flex容器中，交叉轴方向首部对齐。。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.Center 元素在Flex容器中，交叉轴方向居中对齐
      Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)

      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.End：元素在Flex容器中，交叉轴方向底部对齐。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)


      //ItemAlign.Stretch：元素在Flex容器中，交叉轴方向拉伸填充。
      //容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，
      //元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时，拉伸到容器尺寸。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Stretch}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(130)


      //ItemAlign.Baseline：元素在Flex容器中，交叉轴方向文本基线对齐。。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Baseline}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(120)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.5.alignContent

alignContent：当交叉轴有额外的空间时，多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap 或者 WrapReverse 时才生效， FlexAlign 定义了以下 6 种对齐方式：

名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //Start（默认值）：设置子组件在交叉轴（纵轴）方向首部对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent:FlexAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //Center：设置子组件在交叉轴（纵轴）方向居中对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //End：设置子组件在交叉轴（纵轴）方向尾部对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //SpaceBetween：设置子组件在交叉轴（纵轴）方向等间距布局。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceBetween}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)


      //SpaceAround：设置子组件在交叉轴（纵轴）方向间距布局，并且首尾子组件到 Flex 的间距是子组件间距的一半。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceAround}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(130)


      //SpaceEvenly：设置子组件在交叉轴（纵轴）方向等间距布局，并且首尾子组件到 Flex 的间距子组件之间的间距都相等。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceEvenly}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(120)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览结果如下：

你可能感兴趣的:(HarmoneyOS,harmonyos,typescript,前端,网络,鸿蒙,鸿蒙系统,华为)

android系统selinux中添加新属性property 辉色投像
1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
从鸡肉高汤到记忆的魔法再到有效提示的艺术步子哥人工智能
还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
PHP环境搭建详细教程好看资源平台前端 php
PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
基于社交网络算法优化的二维最大熵图像分割智能算法研学社（Jack旭）智能优化算法应用图像分割算法 php 开发语言
智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
2023-04-17|篮球女孩长一木
1小学抑或初中阶段，在课外书了解到她的故事。“篮球女孩”。当时佩服她的顽强，也对生命多了一丝敬畏。今天刚好在公众号看到，长大后的“篮球女孩”。佩服之余又满是心疼。网络侵删祝那素未蒙面的女孩，未来一切顺遂。
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
在一台Ubuntu计算机上构建Hyperledger Fabric网络落叶无声9 区块链超级账本 Hyperledger fabric 区块链 ubuntu 构建 hyperledger fabric
在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
人生的每一步路都算数 sheli
如果你想打工，一直靠打工赚钱，那你就会不断的希望自己变得更专业，不断的希望能够获得更好的工作机会，升职加薪。如果你的目标志不在此，而是拥有自己的企业，那你的选择就会出现差别。在认真打工的人眼里，会“不务正业”，会总是选择不同岗位，甚至放弃高薪机会。但是这背后都是有更加长远的规划。成功富人所必需的管理技能包括：1．对现金流的管理。2．对系统的管理。3．对人员的管理。所以，在没有获得这些能力之前，只要
MongoDB Oplog 窗口喝醉酒的小白 MongoDB 运维
在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
libyuv之linux编译 jaronho Linux linux 运维服务器
文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
CX8836：小体积大功率升降压方案推荐（附Demo设计指南）诚芯微科技社交电子
CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师华为od 面试 python
华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）算法大师华为od 面试 python 算法前端
华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
python os 环境变量 CV矿工 python 开发语言 numpy
环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类
第六集如何安装CentOS7.0，3分钟学会centos7安装教程 date分享
从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
01-Git初识 Meereen Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
Low Power概念介绍-Voltage Area 飞奔的大虎
随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
《在战“疫”中成长致敬生活》观后感梅子刘的刀
（作者：周晨）今天上午，我看了“我是接班人”网络大课堂《在战役中成长致敬生活》。有很多人拿出自己攒下的钱，默默地捐给了武汉，有几千块钱的、有几万块钱的，也有十几万块钱的。连小朋友也把自己的压岁钱捐给了武汉。有名环卫工人把自己五年的积蓄全部捐给了武汉。有名外卖小哥为医护人员买鞋子送吃的。还有已经治愈出院的新型肺炎病人捐了400毫升的血浆。还有位叫大树的叔叔，虽然他没有钱，但是他地里有蔬菜，捐了几大卡
戴尔笔记本win8系统改装win7系统 sophia天雪 win7 戴尔改装系统 win8
戴尔win8 系统改装win7 系统详述第一步：使用U盘制作虚拟光驱： 1）下载安装UltraISO：注册码可以在网上搜索。 2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
BeanUtils.copyProperties使用笔记 bylijinnan java
BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
MyEclipse中文乱码问题 0624chenhong MyEclipse
一、设置新建常见文件的默认编码格式，也就是文件保存的格式。在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
发送邮件不懂事的小屁孩 send email
import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
动画合集换个号韩国红果果 html css
动画指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition 制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
网络最常见的攻击方式竟然是SQL注入蓝儿唯美 sql注入
NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
java笔记2 a-john java
类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性： 4.1设置
[Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。我就看了一下，和她要了psd的文件，还好我有一点
自己写的一个繁体到简体的转换程序 asialee java 转换繁体 filter 简体
今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。实现的思路是重载request的调取参数的几个方法，然后做下转换。
android意图和意图监听器技术百合不是茶 android 显示意图隐式意图意图监听器
Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。隐式意图;不指明调用的名称,根据设
spring3中新增的@value注解 bijian1013 java spring @Value
在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入： <beans xmlns="http://www.springframework.
Jboss启用CXF日志 sunjing log jboss CXF
1. 在standalone.xml配置文件中添加system-properties： <system-properties> <property name="org.apache.cxf.logging.enabled" value=&
【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包 Firebugs3.0.0 http://sourceforge.jp/projects/sfnet_findbug
struts2验证框架的使用和扩展白糖_ 框架 xml bean struts 正则表达式
struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。本文介绍一下struts2通过xml文件进行校验的方法并说
记录-感悟 braveCS 感悟
再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。 2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
编程之美-数组中最长递增子序列 bylijinnan 编程之美
import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
读书笔记5 chengxuyuancsdn 重复提交 struts2的token验证
1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
[时空与探索]全球联合进行第二次费城实验的可能性 comsci
二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验至今给我们大家留下很多迷团..... 关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了在这里,我的意思是,现在
easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracle ORA-12154
用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
简单排序:归并排序 dieslrae 归并排序
public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
C语言中字符串的\0和空格 dcj3sjt126com c
\0 为字符串结束符，比如说： abcd (空格)cdefg；存入数组时，空格作为一个字符占有一个字节的空间，我们
解决Composer国内速度慢的办法 dcj3sjt126com Composer
用法：有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
/** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); } /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
三点定位的算法 haoningabc c 算法
三点定位，已知a,b,c三个顶点的x,y坐标和三个点都z坐标的距离，la，lb,lc 求z点的坐标原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求但是，由于三个点的距离可能不准，不一定会有结果，所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
epoll使用详解 jimmee c linux 服务端编程 epoll
epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
Hibernate对Enum的映射的基本使用方法 linzx0212 enum Hibernate
枚举 /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
第10章高级事件（下） onestopweb 事件
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
孙子兵法 roadrunners 孙子兵法
始计第一孙子曰：兵者，国之大事，死生之地，存亡之道，不可不察也。故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校之以计，而索其情，曰
MySQL双向复制 tomcat_oracle mysql
本文包括: 主机配置从机配置建立主-从复制建立双向复制背景按照以下简单的步骤: 参考一下：在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点步骤1：机器A设置主机在主机中打开配置文件 ,
zoj 3822 Domination(dp) 阿尔萨斯 Mina
题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理