鸿蒙Next - ArkUI 样式组件常见属性用法整理阶段总结一下,嘤嘤嘤常用组件概览布局组件: Column 纵

阶段总结一下,嘤嘤嘤

常用组件概览

布局组件:

Column 纵向排列 Row 横向排列

组件内元素呈线性排列,添加主轴交叉轴属性控制元素分布

主轴: 属性: justifyContent()

Column()
  .justifyContent(FlexAlign.SpaceAround)

FlexAlign.SpaceAround 枚举属性

实现Start Center End SpaceAround SpaceBetween SpaceEvenly 六种排列方式

交叉轴: 属性: alignItems()

Column交叉轴:

Column()
  .alignItems(HorizontalAlign.Start)

HorizontalAlign.Start 三种分布

Row交叉轴

Row()
  .alignItems(VerticalAlign.Center)

VerticalAlign.Center 三种分布

Stack 层叠布局

通过Alignment.枚举控制3*3相关位置

Stack({ alignContent: Alignment.TopStart }) {
     //其他样式组件
}

Flex 弹性布局

组件内元素超出行宽后自动换行 关键属性:wrap:FlexWrap.Wrap

Flex({
  wrap:FlexWrap.Wrap, //关键属性,添加后实现自动换行 

  justifyContent:FlexAlign.SpaceAround,  //主轴排列

  alignContent:FlexAlign.SpaceAround  //交叉轴排列  (主轴交叉轴枚举均为FlexAlign)

}) {其他样式组件}

Grid网格布局

仅支持GridItem子组件 GridItem子组件内支持唯一根组件

Grid(this.scroller) {   // 绑定滚动控制器
  GridItem() {
    Column()   //唯一根组件
  }
.rowStart(1)   //网格横向从1延伸3
.rowEnd(3)
GridItem() {
  Row()
}
.columnStart(2)   //网格纵向从2延伸4   设置延伸实现不规则网格(计算器样式)
.columnEnd(4)
  ...
}
.columnsTemplate('1fr 1fr 1fr 1fr')  // 列数为4
.rowsTemplate('1fr 1fr 1fr')   //行数为3
.columnsGap(12)   //列间距12
.rowsGap(6)
.scrollBar(BarState.Auto) // 滚动条自动显隐

Scroll 滚动布局

ScrollDirection.Horizontal 添加枚举属性实现水平滚动

Scroll(this.scroller){
  Column(){  // 唯一根组件
    // 其他样式组件
  }
}
.scrollable(ScrollDirection.Horizontal)  //水平方向滚动
.onScroll(() => {
  this.num = this.scroller.currentOffset().yOffset   //滚动触发事件,将纵向滚动值绑定给变量,实现随着滚动距离变化的其他动效
})

List 列表布局

与Scroll功能相似,使用场景不同

Scroll通常用于整页不同类型内容滚动,如首页内有轮播图,导航卡片,推荐内容

而List多用于有列表语义的环境下,如通讯录,评论区等需要ForEach循环渲染的场景

List({scroller:this.scroller}) {  //对象内属性绑定控制器
  ListItem(){   //子组件
    Column()  // 唯一根组件
  }
  ...
  ListItemGroup({header:this.MyBuilder}) {  // 子组件组
    ListItem()
    ListItem()
  }
  .divider()  //分隔线
}
.sticky(StickyStyle.Header)   //头部粘性标题 (Group内为header属性添加自定义构建样式)
.divider({strokeWidth:1,color:'#000',startMargin:15})  //子元素分隔线
.onScrollIndex((start,end,center) => {})   // 随着滚动触发,传入当前屏幕内开始,结束的子组件的序号
.edgeEffect(EdgeEffect.Spring)   //滚动到边缘动效
.onReachEnd(() => {})   //触底事件  (实现触底加载更多)

Swiper 轮播图

Swiper() {
  Image($r('app.media.kunkun'))
  Image($r('app.media.kunkun'))
  Image($r('app.media.kunkun'))
}
.autoPlay(true)  //自动滚动
.interval(2500)  //自动滚动时间
.loop(true)  //首尾相接
.indicator(
  Indicator.dot()
    .itemWidth(8)   //导航点宽度
    .itemHeight(8)
    .selectedItemWidth(10)   //选中的导航点宽度
    .selectedItemHeight(10)
    .color('#777')   //导航点颜色
    .selectedColor('#fff')  //选中的导航点颜色
    .bottom(20)   //底部边距
)

Tabs 标签页选项卡

controller: TabsController = new TabsController()
Tabs({index:$$this.Selectedindex,controller:this.controller}) {   //方式一:  直接双向绑定索引
  TabContent() {
    Text('我是首页')
  }.tabBar(this.tabs('首页', 0, $r('app.media.ic_home')))   //通过自定义构建样式实现自定义标签,传入参数控制高亮
  TabContent() {
    Text('我是2')
  }.tabBar(this.tabs('发现', 1, $r('app.media.ic_find')))
  ...
}
.barPosition(BarPosition.End)   //选项卡位置-底部
.vertical(false)  //是否纵向,默认为false  是即为纵向布局选项卡
.scrollable(true)   //是否滑动切换页面,默认为true
.animationDuration(0)   //页面切换时间,0即为无动画效果
.barHeight(60)   //选项卡高度,颜色等
.onChange((index: number) => {this.Selectedindex = index})   //方式二:  通过OnChange函数实现索引绑定

Badge气泡标记

Badge({
  count: 2,   //数字
  // value: '三',    //支持字符串,但value与count不能同时存在
  style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14},  //角标样式
  position:BadgePosition.RightTop  //角标位置,默认即为右上
}){
  Column(){    //将需要加角标的组件写在内部
    Image($r('app.media.kun'))
    Text('消息')
  }
}

Navigaiton 导航组件

可实现组件级路由,也可以作为仅需要顶部返回功能的页面模板使用

Navigation() {
}
.backgroundColor() // 背景色
.title() // 标题
.titleMode(NavigationTitleMode.Mini) // 标题+返回按钮的模式
.backButtonIcon()// 自定义返回按钮的图片（如果需要的话）

内容/交互组件

Text 文本添加属性调节样式

Span (Text内嵌套文本)

Text(){
  Span('我是')
  Span('蔡徐坤')
}

image 图片支持资源路径或者网络图片

Image($r('app.media.kun'))
Image('https://www.kun.com/image/kun.jpg')

Button 按钮

Button('按钮')
  .type(ButtonType.Normal)   //可通过指定成无形状之后再赋予圆角,实现圆角矩形
  .borderRadius(8)

TextInput 文本输入框

TextInput({placeholder:'提示词',text:$$this.text})
  .type(InputType.Password)   //输入框类型
  .showPasswordIcon(false)   //密码类型时 小眼睛是否显示
  .placeholderFont({size:16,style:FontStyle.Italic,weight:600})   //提示文本的样式
  .placeholderColor('#666')   //提示文本的颜色

TextArea 多行输入框

TextArea()
  .maxLength(80)   //最大字符数量80个
  .showCounter(true)  //显示当前数量  如:12/80

Radio 单选框

Radio({ value: 'Radio1', group: 'radioGroup' })   //值和组,单选框同一组只能选一个
    .onChange((isChecked: boolean) => {
      if(isChecked) {
        //需要执行的操作
      }
    })
  Radio({ value: 'Radio2', group: 'radioGroup' })
    .onChange((isChecked: boolean) => {
      if(isChecked) {
        //需要执行的操作
      }
    })

CheckBox 多选框

CheckboxGroup({ group: 'good' })   //子Box与Group的group设为同一值后可进行联动
  .onChange((res) => {
    console.log(res.name.toString())    //传出的res.name即为当前选中的复选框name数组
    // 其他逻辑处理
  })
Checkbox({group:'good',name:'1'})
Checkbox({group:'good',name:'2'})

这次就写到这了,:-3

鸿蒙Next - ArkUI 样式组件 常见属性用法整理