鸿蒙初体验

 线性布局
            线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。根据不同的排列方向,开发者可选择使用Row或Column容器创建线性布局。    

基本概念

        布局容器:、

                具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。


布局子元素:

        布局容器内部的元素。
主轴:

        线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。
交叉轴:

        垂直于主轴方向的轴线。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。
间距:

        布局子元素的间距。
1.垂直布局
        元素垂直向下排列


2.水平布局
        元素水平方向排列


3.常用组件
        3.1 Text文本
                Text是文本组件,通常用于展示用户视图,如显示文章的文字。


        3.2 按钮
                Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。

                Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

        Button有三种可选类型:

                分别为胶囊类型(Capsule)、圆形按钮(Circle)和普通按钮(Normal),通过type进行设置。

                胶囊按钮(默认类型):此类型按钮的圆角自动设置为高度的一半,不支持通过borderRadius属性重新设置圆角。


                圆形按钮:此类型按钮为圆形,不支持通过borderRadius属性重新设置圆角。

                 普通按钮:此类型的按钮默认圆角为0,支持通过borderRadius属性重新设置圆角。



自定义样式
        设置边框弧度:使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。


        设置文本样式:通过添加文本样式设置按钮文本的展示样式。


        设置背景颜色:添加backgroundColor属性设置按钮的背景颜色。


        3.3 文本输入
                TextInput、TextArea是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。


        设置输入框类型
                TextInput有9种可选类型:

                        分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置:

        基本输入模式(默认类型)


        密码输入模式


自定义样式
        设置无输入时的提示文本。


        设置输入框当前的文本内容。


        添加backgroundColor改变输入框的背景颜色。


显示图片 (Image)
        开发者经常需要在应用中显示一些图片,例如:按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg和gif

  • 24
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值