鸿蒙开发入门使用-布局

置顶 已于 2024-08-08 23:04:00 修改
阅读量206 收藏
点赞数 3
文章标签： 鸿蒙系统
于 2024-07-29 23:12:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/menghao07/article/details/140783457
版权

Row/Column 线性布局

总结：
row 主轴水平对齐方式：justifyContent,交叉轴垂直对齐方式：alignItems
column 主轴垂直对齐方式：justifyContent，交叉轴垂直对齐方式：alignItems
简单说：主轴对齐用justifyContent，交叉轴对齐用alignItems

@Entry
@Component
struct columnRow{
  build() {
    Column({space:10}){
      Row({space:2}){
        Column({space:5}){
          Column().width("80%").height("20%").backgroundColor("#ff17163b")
          Column().width("80%").height("20%").backgroundColor("#ff41a979")
          Column().width("80%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .width("50%").height("15%").backgroundColor("#ffef1717")
        .alignItems(HorizontalAlign.Start) //交叉轴水平左对齐
        Column({space:5}){
          Column().width("80%").height("20%").backgroundColor("#ff17163b")
          Column().width("80%").height("20%").backgroundColor("#ff41a979")
          Column().width("80%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .alignItems(HorizontalAlign.End) //交叉轴水平右对齐
        .width("50%").height("15%").backgroundColor("#ff774444")
      }
      Row({space:2}){
        Column({space:5}){
          Column().width("80%").height("20%").backgroundColor("#ff17163b")
          Column().width("80%").height("20%").backgroundColor("#ff41a979")
          Column().width("80%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .width("50%").height("15%").backgroundColor("#ffef1717")
        .justifyContent(FlexAlign.SpaceBetween) //主轴垂直SpaceBetween
        Column({space:5}){
          Column().width("80%").height("20%").backgroundColor("#ff17163b")
          Column().width("80%").height("20%").backgroundColor("#ff41a979")
          Column().width("80%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .justifyContent(FlexAlign.SpaceAround) //主轴垂直SpaceAround
        .width("50%").height("15%").backgroundColor("#ff774444")
      }
      Row({space:2}){
        Row({space:5}){
          Column().width("20%").height("20%").backgroundColor("#ff17163b")
          Column().width("20%").height("20%").backgroundColor("#ff41a979")
          Column().width("20%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .width("50%").height("15%").backgroundColor("#ffef1717")
        .justifyContent(FlexAlign.SpaceAround)//主轴水平方向SpaceAround
        Row({space:5}){
          Column().width("20%").height("20%").backgroundColor("#ff17163b")
          Column().width("20%").height("20%").backgroundColor("#ff41a979")
          Column().width("20%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .justifyContent(FlexAlign.End) //主轴水平方向右对齐
        .width("50%").height("15%").backgroundColor("#ff774444")
      }

      Row({space:2}){
        Row({space:5}){
          Column().width("20%").height("20%").backgroundColor("#ff17163b")
          Column().width("20%").height("20%").backgroundColor("#ff41a979")
          Column().width("20%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .width("50%").height("15%").backgroundColor("#ffef1717")
        .alignItems(VerticalAlign.Top)//交叉轴垂直方向首行对齐
        Row({space:5}){
          Column().width("20%").height("20%").backgroundColor("#ff17163b")
          Column().width("20%").height("20%").backgroundColor("#ff41a979")
          Column().width("20%").height("20%").backgroundColor("#ff8e2fa4")
        }
        .alignItems(VerticalAlign.Bottom) //交叉轴垂直方向末尾对齐
        .width("50%").height("15%").backgroundColor("#ff774444")
      }
    }
    .width("100%").height("100%")
    .backgroundColor("#ffa26739")

  }
}

Stack 层叠布局

总结： 
Stack中的第一层元素可以进行层叠，通过alignContent设置对齐方式，zIndex设置层级优先级，zIndex值越大，显示层级越高
/**
 * 层叠布局
 * 总结
 * Stack中的第一层元素可以进行层叠，通过alignContent设置对齐方式，zIndex设置层级优先级，zIndex值越大，显示层级越高
 */
let Mtop:Record<string,number> ={"top":50}
@Component
@Entry
struct stackLayout{
  build() {
    Column({space:5}){
      Row(){
        Column(){
          Stack({alignContent:Alignment.TopEnd}){ //方式1 alignContent
            Column().width("90%").height("100%").backgroundColor("#df88a6e7")
            Column().width("60%").height("60%").backgroundColor("#fff")
            Button("1").width("30%").height("30%").backgroundColor("#ff585252")
          }.width("90%").width("90%")
        }.width("45%").height("90%").backgroundColor("#ff8f7676")
        Column(){
          Stack(){
            Column().width("90%").height("100%").backgroundColor("#df88a6e7")
            Column().width("60%").height("60%").backgroundColor("#fff")
            Button("2").width("30%").height("30%").backgroundColor("#ff585252")
          }.width("90%").width("90%").alignContent(Alignment.BottomStart) //方式2 alignContent九种对齐方式
        }.width("45%").height("90%").backgroundColor("#ff8f7676")
      }.width("100%").height("25%").backgroundColor("#fff5cdcd").justifyContent(FlexAlign.SpaceAround)
      Row(){
        Column(){
          Stack(){
            Column().width("90%").height("100%").backgroundColor("#e688aee7").zIndex(3)//zIndex值越大，显示层级越高
            Column().width("60%").height("60%").backgroundColor("#fff").zIndex(2)
            Button("1").width("30%").height("30%").backgroundColor("#ff585252").zIndex(0)
          }.width("90%").width("90%")
        }.width("45%").height("90%").backgroundColor("#ff8f7676")
      }.width("100%").height("25%").backgroundColor("#fff5cdcd")
      Row(){
        Stack({alignContent:Alignment.Bottom}){
          Column({space:20}){
            Row(){
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
            }.justifyContent(FlexAlign.SpaceAround).width("100%")
            Row(){
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
              Column().width("20%").height("20%").backgroundColor("#ff6b6a6a")
            }.justifyContent(FlexAlign.SpaceAround).width("100%")

          }.width("90%").height("100%").backgroundColor("#ffb1b1b1")
          Row(){
            Text("短信")
            Text("联系人")
            Text("设置")
          }.width("80%").backgroundColor("#ff646464").justifyContent(FlexAlign.SpaceBetween)

        }.width("90%").height("100%").backgroundColor("#ffe7e1e1")
      }.width("100%").height("50%").backgroundColor("#fff5cdcd").justifyContent(FlexAlign.Center)
    }
  }
}

Flex 弹性布局

总结：
flex接口以FlexOptions为入参，有以下属性
  direction: 子组件在Flex容器上排列的方向，即主轴的方向
  wrap: Flex容器是单行/列还是多行/列排列。
  justifyContent: 所有子组件在Flex容器主轴上的对齐格式
  alignItems: 所有子组件在Flex容器交叉轴上的对齐格式, wrap为设置为Wrap不生效
  alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效
感觉弹性布局跟ROW和Colum很相似,不同点主要在于warp可以自动换行
* 通用参数：alignSelf，子组件在父容器交叉轴的对齐格式，会覆盖Flex、Column、Row、GridRow布局容器中的alignItems设置
/**
 * 总结：
 * flex接口以FlexOptions为入参，有以下属性
 * direction: 子组件在Flex容器上排列的方向，即主轴的方向
 * wrap: Flex容器是单行/列还是多行/列排列。
 * justifyContent: 所有子组件在Flex容器主轴上的对齐格式
 * alignItems: 所有子组件在Flex容器交叉轴上的对齐格式, wrap为设置为Wrap不生效，使用alignContent
 * alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效
 * 通用参数：alignSelf
 * 子组件在父容器交叉轴的对齐格式，会覆盖Flex、Column、Row、GridRow布局容器中的alignItems设置
 */
@Component
@Entry
struct flex{
  build() {
    Column({space:10}){
      //direction设置主轴方向 默认row
      Flex(){
        Text("1").width("30%").height(50).backgroundColor(0xF5DEB3)
        Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
      }
      //row反转
      Flex({direction:FlexDirection.RowReverse}){
        Text("1").width("30%").height(50).backgroundColor(0xF5DEB3)
        Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
      }
      //设置主轴方向Column
      Flex({direction:FlexDirection.Column}){
        Text("1").width("30%").height(50).backgroundColor(0xF5DEB3)
        Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
      }.height(160)
      //设置主轴方向Column反转
      Flex({direction:FlexDirection.ColumnReverse}){
        Text("1").width("30%").height(50).backgroundColor(0xF5DEB3)
        Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
      }.height(150)
      //换行wrap
      Flex({wrap:FlexWrap.Wrap}){
        Text("1").width("50%").height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
      }
      //justifyContent主轴对齐方式,alignItems交叉轴对齐方式
      Flex({justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.End}){
        Text("1").width("30%").height(30).backgroundColor(0xF5DEB3)
        Text('2').width('30%').height(40).backgroundColor(0xD2B48C)
        Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
      }
      //子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式
      Flex(){
        Text('alignSelf Start').alignSelf(ItemAlign.Center).width("20%").height(50).backgroundColor(0xF5DEB3)
        Text('alignSelf Baseline').alignSelf(ItemAlign.End).width('20%').height(50).backgroundColor(0xD2B48C)
        Text('alignSelf Baseline').alignSelf(ItemAlign.Baseline).width('20%').height(80).backgroundColor(0xF5DEB3)
        Text('no alignSelf').alignSelf(ItemAlign.Center).width('25%').height(100)
          .backgroundColor(0xD2B48C)
        Text('no alignSelf').alignSelf(ItemAlign.Baseline).width('25%').height(60)
          .backgroundColor(0xF5DEB3)
      }.width("100%").height(120).backgroundColor(0xAFEEEE)
      //FlexOptions: direction wrap justifyContent alignItems alignContent
      Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceAround,alignContent:FlexAlign.End}){
        Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
        Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
        Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
        Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
        Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
      }.width('90%')
      .height(100)
      .backgroundColor(0xAFEEEE)
    }.height("100%")


  }
}

RelativeContainer 相对布局

/**
 * 总结：
 * 以父容器为锚点
 * align表示父容器的对齐位置在哪里,VerticalAlign(垂直方向对齐)，HorizontalAlign(水平方向对齐)
 * anchor表示锚点为哪个，__container__默认为父容器的id
 * 最前面那个bottom、right表示当前容器对齐的位置那哪儿
 */

/**
 * 总结：
 * 以父容器为锚点
 * align表示父容器的对齐位置在哪里,VerticalAlign(垂直方向对齐)，HorizontalAlign(水平方向对齐)
 * anchor表示锚点为哪个，__container__默认为父容器的id
 * 最前面那个bottom、right表示当前容器对齐的位置那哪儿
 */
let AlignRus:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>>={
  "bottom":{"anchor":"__container__", 'align': VerticalAlign.Top },
  'right': { 'anchor': '__container__','align': HorizontalAlign.End}
}
@Component
@Entry
struct relativeContainer{

  build() {
    Column({space:10}){
      Column(){
        RelativeContainer(){
          Row().width(100).height(100)
            .backgroundColor("#FF3333")
            .id("row1")
            .alignRules(
              AlignRus
            )
          Row().width(100).height(100)
            .backgroundColor("#FFCC00")
            .id("row2")
            .alignRules({top:{anchor:"row1",align:VerticalAlign.Bottom}})
            .offset({y:10})
        }.width("50%").height("24%").backgroundColor("#ffbebebe").margin(100)
      }
      // Column().width("100%").height("24%").backgroundColor("#ffbebebe")
      // Column().width("100%").height("24%").backgroundColor("#ffbebebe")
      // Column().width("100%").height("24%").backgroundColor("#ffbebebe")
    }.width("100%").height("100%")
  }
}

习题小试-登录页

let fontSize = 14;
@Component
@Entry
struct jd_login {

  build() {
    Column({ space: 20 }) {
      //LOGO
      Column().width(150).height(150).margin({ top: 60 }).backgroundImage($r('app.media.startIcon')).backgroundImageSize(ImageSize.Cover)
      //地区
      Row() {
        Text("国家/地区").fontSize(fontSize)
        Blank()
        Text("中国（+86）").fontSize(fontSize)
        Text() {
          SymbolSpan($r('sys.symbol.chevron_right'))
            .fontWeight(FontWeight.Bold)
            .fontSize(12)
        }
      }
      .width("90%")
      .height("5%")
      .borderRadius(15)
      .backgroundColor("#DCDCDC")
      .padding({ left: 16, right: 10 })
      //账号
      TextInput({placeholder:"请输入手机号"})
        .width("90%")
        .height("5%")
        .borderRadius(15)
        .placeholderFont({size:fontSize})
      //隐私协议
      Row({space:4}){
        Toggle({ type: ToggleType.Checkbox, isOn: false }).width("4%")
        Text(){
          Span("我已阅读同意")
          Span("《隐私政策》《用户协议》").fontColor(Color.Blue)
          Span(",未注册的手机号将自动创建账号")
        }.width("90%").fontSize(12).lineHeight(18).fontColor(Color.Gray)
      }.width("90%").alignItems(VerticalAlign.Top)
      //获取验证码按钮
      Button("获取验证码").width("90%").backgroundColor(Color.Orange).margin({top:24})
      //注册 无法登录
      Row(){
        Text("新用户注册").fontColor(Color.Gray)
        Text("忘记密码").fontColor(Color.Gray)
      }.justifyContent(FlexAlign.SpaceAround).width("90%")
      //其他登录方式
      Text("其他登录方式").fontSize(12).fontColor(Color.Gray).margin({top:100})
      Row(){
        Row({space:4}){
          SymbolGlyph($r('sys.symbol.message_on_message'))
            .fontWeight(FontWeight.Bold)
            .fontSize(12).fontColor([Color.Green])
          Text(){
            Span("微信登录").fontSize(12).border({width:1}).fontColor(Color.Green)
          }
        }.width(80).height(30).justifyContent(FlexAlign.Center).borderRadius(15).backgroundColor("#ffcef8cb")
        Column(){
          SymbolGlyph($r('sys.symbol.envelope'))
            .fontWeight(FontWeight.Bold)
            .fontSize(12).fontColor([Color.Green])
        }.borderWidth(1).width(30).height(30).justifyContent(FlexAlign.Center).borderRadius(30)
        Column(){
          SymbolGlyph($r('sys.symbol.satellite'))
            .fontWeight(FontWeight.Bold)
            .fontSize(12).fontColor([Color.Green])
        }.borderWidth(1).width(30).height(30).justifyContent(FlexAlign.Center).borderRadius(30)
      }.width("60%").height(30).justifyContent(FlexAlign.SpaceAround)
    }
    .width("100%").height("100%").backgroundColor("#fff")
  }
}

GridRow/GridCol 栅格布局

/**
 * 栅格布局：
 * GridRow({ columns: {xs:8,md:4,lg:2}}) 当小屏时展示8列，中屏展示4列，大屏展示2列
 * GridCol({ span: {xs:1,md:2} }) 当小屏时该列占1/8,中屏时该列占2/4
 *
 * breakpoints属性作用是，如：指定xs、md、lg的分辨率范围
 */
/**
 * 栅格布局：
 * GridRow({ columns: {xs:8,md:4,lg:2}}) 当小屏时展示8列，中屏展示4列，大屏展示2列
 * GridCol({ span: {xs:1,md:2} }) 当小屏时该列占1/8,中屏时该列占2/4
 *
 * breakpoints属性作用是，如：指定xs、md、lg的分辨率范围
 */
@Component
@Entry
struct gridRowGridCol {
  @State bgColors: Color[] =
    [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

  build() {
    GridRow({ columns: {xs:8,md:4,lg:2}}) {
      GridCol({ span: 1 }) {
        Row() {
          Text("1")
        }.width('100%').height('50vp')
      }
      .backgroundColor(Color.Red)
      GridCol({ span: 2 }) {
        Row() {
          Text("2")
        }.width('100%').height('50vp')
      }
      .backgroundColor(Color.Orange)
      GridCol({ span: 1 }) {
        Row() {
          Text("2")
        }.width('100%').height('50vp')
      }
      .backgroundColor(Color.Pink)
      GridCol({ span: 2 }) {
        Row() {
          Text("2")
        }.width('100%').height('50vp')
      }
      .backgroundColor(Color.Yellow)
      GridCol({ span: 2 }) {
        Row() {
          Text("2")
        }.width('100%').height('50vp')
      }
      .backgroundColor(Color.Blue)
    }

  }
}

嵌套使用

@Component
@Entry
struct gridRowGridCol2{
  build() {
    GridRow() {
      GridCol({ span: { sm: 12 } }) {
        GridRow() {
          GridCol({ span: { sm: 2 } }) {
            Row() {
              Text('left').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff41dbaa')

          GridCol({ span: { sm: 10 } }) {
            Row() {
              Text('right').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff4168db')
        }
        .backgroundColor('#19000000')
        .height('100%')
      }

      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('footer').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('10%').backgroundColor(Color.Pink)
      }
    }.width('100%').height(300)
  }
}

menghao07
关注
鸿蒙HarmonyOS APP 开发入门2--事件
itcyy的博客
04-06 3535
简述HarmonyOS APP开发的基础知识——事件
鸿蒙HarmonyOS APP 开发入门2--事件_鸿蒙os 按钮事件(1)
xcbyaya的博客
05-03 1142
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
鸿蒙系统中的DependentLayout布局
u010574271的博客
02-26 1561
文章目录概念使用新建AbilitySliceMainAbility设置相对于同级组件相对于父组件 概念 DependentLayout中每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。 使用 我们使用代码来解释DependentLayout布局的使用 新建AbilitySlice 首先，我们再项目中新建一个DependentLayoutDemo如下： public class DependentLayoutDemo extends AbilitySlice { private
harmonyOS鸿蒙官网教程-容器组件使用
移动端开发与最新技术
10-07 799
容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。
鸿蒙ArkUI开发：常用布局【交叉轴】
最新发布
m0_62167422的博客
05-13 1378
鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）
m0_64420071的博客
03-01 4342
ArkTS声明式开发（通用属性：位置设置）
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明
菜鸟博客
09-20 1642
HarmonyOS Flex组件使用说明
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码
2401_84181125的博客
04-21 1161
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
book_鸿蒙入门HarmonyOS应用开发_书中源码.zip
02-07
【标题】"book_鸿蒙入门HarmonyOS应用开发_书中源码.zip" 提供了对鸿蒙操作系统（HarmonyOS）应用开发的基础教程资源，其中包含了一个名为 "book_HarmonyOS_demo-main" 的子文件。这个压缩包很可能是为初学者准备的...
HarmonyOS实战开发-如何打造购物商城APP。
2401_82546228的博客
04-26 4412
今天给大家分享一个非常好的实战项目，购物商城，购物商城是一个集购物、娱乐、服务于一体的综合性平台，致力于为消费者提供一站式的购物体验。各种功能都有涉及，最适合实现学习。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）容器组件之Flex 组件具体用法
二当家的
03-27 1165
Flex 组件可让您使用 flexbox 布局来排列子组件。您可以使用 flexDirection、justifyContent、alignItems 和 flex 属性来控制 flexbox 布局。第一个文本组件将占据 flexbox 布局的 1/6，第二个文本组件将占据 flexbox 布局的。您可以使用 flexDirection 属性来控制 flexbox 布局的主轴方向。您可以使用 alignItems 属性来控制子组件在非主轴方向的对齐方式。您可以使用 flex 属性来控制子组件的 flex。
鸿蒙-ArkUI 常用布局容器对齐方式
鸿蒙的技术博客
12-22 2214
本篇主要介绍Flex、Column、Row和Stack这四种布局容器内子组件对齐方式的设置方法。如何灵活的使用alignItems、justifyContent、alignContent、alignSelf和align这5种设置对齐方式。
＜HarmonyOS第一课＞从简单的页面开始
qq_41881317的博客
12-21 383
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。
【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总（更新中）
温的打怪之旅
03-25 907
此文总结开发中用到的一些常用组件，便于查阅，此文持续更新，闲的没事就更。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）容器组件之Column 组件的具体用法
二当家的
03-27 1155
您可以使用 crossAxisAlignment 属性来控制子组件在非主轴方向的对齐方式。您可以使用 mainAxisAlignment 属性来控制子组件在主轴方向的对齐方式。您可以使用 mainAxisSize 属性来控制主轴方向的尺寸。Column 组件可让您将子组件垂直排列。您可以使用 alignment 属性来控制子组件在容器中的对齐方式。您可以使用 alignment 属性来控制子组件在容器中的对齐方式。此代码将创建一个垂直堆栈，其中包含三个文本组件。三个文本组件将在堆栈的中心对齐。
鸿蒙HarmonyOS应用开发-Column&Row容器的属性
weixin_44455650的博客
04-23 1032
Column和Row组件是鸿蒙HarmonyOS应用开发中常用的两个线性布局容器Column和Row容器的两个属性justifyContent和alignItems可以设置其子组件的布局justifyContent设置在垂直方向（主轴）的对齐alignItems设置在水平方向（交叉轴）上的对齐justifyContent和alignItems的常用属性有。
HarmonyOS 组件通用属性之位置设置
weixin_45966674的博客
01-05 3640
这个markAnchor 它是相对于自己去移动的 说个词 相对定位 当然 它不会留自己原来的位置 但是 它是相对自己原来的位置 移动的 而且 它的 x y是反的 x 正值向左 负值向右 y正值向上 负值向下。我们还是 在元素下面 加上 .direction(Direction.) 就会弹出它的属性提示了。鸿蒙的 position也是定位语法 他是 x y两个轴方向控制 针对自己的父元素。就会弹出对齐方式的提示。然后 从第三个可以看出 我们这个是可以用百分比的。
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
12-29 2967
一、创建 XML 布局文件、 二、XML 布局文件中添加子组件、 三、创建 Ability、 四、配置 Ability、 五、Ability 加载布局文件、 六、完整代码及效果展示、 四、GitHub 地址、
鸿蒙开发入门：DevEcoStudio安装与环境配置
注册完成后，你需要下载DevEcoStudio，它是华为专门为HarmonyOS开发设计的集成开发环境，类似Android开发中的Android Studio。 DevEcoStudio的下载页面提供了适用于不同操作系统的版本。安装过程与Android Studio...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值