番禺区建设网站,崇文网站开发,口碑营销的前提及好处有哪些,百度生成手机网站1、组件介绍
组件#xff08;Component#xff09;,是界面搭建及显示的最小单元。
组件根据功能可以分为五大类#xff1a;基础组件、容器组件、媒体组件、绘制组件、画布组件
2、基础组件
基础组件是视图层的基本组成单元#xff0c;它包含#xff1a;Text、Image、T…1、组件介绍
组件Component,是界面搭建及显示的最小单元。
组件根据功能可以分为五大类基础组件、容器组件、媒体组件、绘制组件、画布组件
2、基础组件
基础组件是视图层的基本组成单元它包含Text、Image、TextInput、Button、LoadingProgress……
2.1、Text
Text组件可以在界面上展示一段文本信息它可以包含子组件Span。
对于包含文本文本元素的组件如Text,Span,Button,TextInput……可以使用fontSize()fontColor()fontWeight()fontFamily()fontStyle()这些文本样式设置文本的大小、颜色、粗细、字体等信息。
名称参数类型描述fontColorResourceColor设置文本颜色fontSizeLength | Resource设置文本尺寸Length为number类型时使用fp单位fontStyleFontStyle设置文本的字体样式、默认值FontStyle.NormalfontWeightnumber | FontWeight| string 设置文本字体的粗细 number取值是[400,900],间隔是100值越大越粗 string类型仅支持number类型取值的字符串形式例如“400”以及“bold”、“bolder”、“lighter”、“regular”、“medium”分别对应FontWeight中相应的枚举值。 默认值FontWeight.Normal fontFamilystring | Resource 设置文本的字体列表。使用多个字体使用“”进行分割优先级按顺序生效。例如“Arialsans-serif 2.1.1、通用属性与文本样式设置
Entry
Component
struct Index {build() {Row() {Column() {Text(Harmony OS).margin({bottom:15})Text(鸿蒙系统).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
}
2.1.2、文本对齐方式设置
Entry
Component
struct Index {build() {Row() {Column() {Text(Harmony OS).margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start) // 对齐方式.backgroundColor(0xE6F2FD)Text(鸿蒙系统).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
}
textAlign参数类型为TextAlign,定义了几种类型
Start默认值水平对齐首部Center水平居中对齐End水平对齐尾部
2.1.3、设置文本超长显示
当文本的内容过多超出了Text组件范围时可以使用textOverflow设置文本截取方式配合maxLines使用单独设置不生效
maxLines用来设置文本显示的最大行数
如果把textOverflow设置为Ellipsis那么它会把显示不下的文本使用“...”表示
Entry
Component
struct Index {build() {Row() {Column() {Text(Harmony OS).margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)Text(鸿蒙系统).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom:15})Text(滨海昌正企业管理有限公司成立于2011年主要从事母婴行业品牌开发与销售是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人其中管理人员100人。).fontSize(18)// 文本超长显示设置使用textOverflow配合maxLines一起使用.maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
}
2.1.4、设置文本装饰线
使用decoration设置文本的装饰线样式及其颜色
它包含两个参数type用来指定装饰线的样式其参数类型是TextDecorationTypecolor用来指定装饰线的颜色其参数类型是Color它是一个可选参数。
Entry
Component
struct Index {build() {Row() {Column() {Text(Harmony OS).margin({bottom:15}).width(200).height(50).textAlign(TextAlign.Start) // 设置文本对齐方式.backgroundColor(0xE6F2FD).fontSize(20).decoration({type: TextDecorationType.Underline, color: Color.Black}) // 设置文本装饰线Text(鸿蒙系统).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom:15})Text(滨海昌正企业管理有限公司成立于2011年主要从事母婴行业品牌开发与销售是集产品研发、品牌运营、销售服务及物流供应链为一体的公司。现有团队人数800人其中管理人员100人。).fontSize(18)// 超长文本使用textOverflow与maxLines配合设置.maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
}
TexDecorationType包含以下几种类型
None表示不使用装饰线Overline表示使用上划线装饰LineThrough表示使用删除线来装饰Underline表示使用下划线装饰
2.2、Image
Image组件用来渲染展示图片只需要给定图片地址、宽和高图片就可以加载出来
Entry
Component
struct Test {build() {Row() {Column() {Image($r(app.media.icon)).width(100).height(100)}.width(100%)}.height(100%)}
}
2.2.1、设置图片的缩放类型
图片资源放在项目的src/main/resources/base/media 目录
为了使用图片在页面中有更好的显示效果有时候需要对图片进行缩放处理。
可以使用objectFit属性来设置图片的缩放类型其参数的类型是ImageFit。
Entry
Component
struct Test {build() {Row() {Column() {Image($r(app.media.image)).objectFit(ImageFit.Cover) // 默认的缩放方式.width(200).height(300).backgroundColor(0xCCCCCC)}.width(100%)}.height(100%)}
}
ImageFit包含如下几种类型
Contain保持宽高比进行缩小或放大使用得图片完全显示在显示边界中Cover默认值保持宽高比进行缩小或放大使得图边两边都大于或等于显示边界Auto自适应显示Fill不保持宽高比进行放大或缩小使用图片充满显示边界ScaleDown保持宽高比显示图片缩小或者保持不变None保持原极尺寸显示
2.2.2、加载网络图片
如果需要加载网络图片需要在module.json5中申请网络访问权限
{module : {requestPermissions:[{name: ohos.permission.INTERNET}]}
}
Entry
Component
struct Test {build() {Row() {Column() {Image($r(app.media.image)).objectFit(ImageFit.Contain) // 默认的缩放方式.width(200).height(300).backgroundColor(0xCCCCCC).margin({bottom:15})// 加载网图图片Image(https://p1.itc.cn/q_70/images03/20210217/d74ec9f0a1dc431a87c5cb4742ee17b1.jpeg).width(200).height(200)}.width(100%)}.height(100%)}
}
2.3、TextInput
TextInput组件用来输入单行文本响应输入事件。
Entry
Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)}.width(100%)}.height(100%)}
}
与Text组件一样也支持文本样式的设置。
2.3.1、设置输入提示语
要在输入框中添加提示语可以使用placeholder属性来实现同时还可以使用placeholderColor和placeholderFont来分别设置提示文本的颜色和样式。
Entry
Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom: 15})TextInput({placeholder: 请输入账号}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: cursive, style: FontStyle.Italic})}.width(100%)}.height(100%)}
}
2.3.2、设置输入类型
可以使用type属性来设置输入框类型。其类型是InputType
Entry
Component
struct TextInputTest {build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom: 15})TextInput({placeholder: 请输入账号}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: cursive, style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: 请输入密码}).type(InputType.Password) // 指定输入的类型}.width(100%)}.height(100%)}
}
InputType包含以下几种输入类型
Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符Password密码输入模式Emaile-mail地址输入模式Number纯数字输入模式
2.3.3、设置光标的位置
Entry
Component
struct TextInputTest {controller: TextInputController new TextInputController();build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom: 15})TextInput({placeholder: 请输入账号}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: cursive, style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: 请输入密码}).type(InputType.Password) // 指定输入的类型.margin({bottom: 15})TextInput({controller: this.controller}).margin({bottom: 15})Button(设置光标的位置).onClick(() {this.controller.caretPosition(2) // 设置光标的位置在第二个字符之后})}.width(100%)}.height(100%)}
}
上面使用了TextInputColler的caretPosition方法来设置光标所在的位置。
2.3.4、获取输入文本
可以给TextInput设置onChange事件输入文本发生变化时触发回调从而拿到输入框中的文本信息。
Entry
Component
struct TextInputTest {controller: TextInputController new TextInputController();State username: string ; // 保存用户输入的账号build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin({bottom: 15})TextInput({placeholder: 请输入账号}).placeholderColor(0x999999).placeholderFont({size: 20, weight: FontWeight.Medium, family: cursive, style: FontStyle.Italic}).margin({bottom: 15})TextInput({placeholder: 请输入密码}).type(InputType.Password) // 指定输入的类型.margin({bottom: 15})TextInput({controller: this.controller}).margin({bottom: 15})Button(设置光标的位置).onClick(() {this.controller.caretPosition(2) // 设置光标的位置在第二个字符之后}).margin({bottom: 15})TextInput({placeholder: username}).caretColor(Color.Blue) // 光标的颜色.onChange((value: string) {this.username value;}).margin({bottom: 15})Text(this.username)}.width(100%)}.height(100%)}
}
2.4、Button
Button组件主要用来响应点击操作可以包含子组件。
Entry
Component
struct ButtonTest {build() {Row() {Column() {Button(登录,{type: ButtonType.Capsule, stateEffect: true}).width(90%).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF)}.width(100%)}.height(100%)}
}
2.4.1、按钮样式
type用来定义按钮的样式其类型是ButtonType
stateEffect用于设置按钮按下时是否开启切换效果当状态为false时点击效果关闭默认值为true
type的样式可以有如下
Capsule胶囊型按钮圆角默认是高度的一半Circle圆形按钮Normal普通按钮默认不带圆角
2.4.2、按钮点击事件
可以给Button绑定onClick事件当用户点击Button的时候则会执行onClick方法调用其中的逻辑代码。
Entry
Component
struct ButtonTest {State text: string ;State isShow: boolean false;build() {Row() {Column() {TextInput({placeholder:请输入内容}).margin({bottom: 15}).onChange((value: string) {this.isShow false;this.text value;})Button(登录,{type: ButtonType.Capsule, stateEffect: true}).width(90%).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF).margin({bottom: 15}).onClick(() { // 绑定按钮点击事件this.isShow !this.isShow;})if(this.isShow) {Text(this.text);}}.width(100%)}.height(100%)}
}
2.4.3、包含子组件按钮
Entry
Component
struct ButtonTest {State text: string ;State isShow: boolean false;build() {Row() {Column() {TextInput({placeholder:请输入内容}).margin({bottom: 15}).onChange((value: string) {this.isShow false;this.text value;})Button(登录,{type: ButtonType.Capsule, stateEffect: true}).width(90%).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF).margin({bottom: 15}).onClick(() { // 绑定按钮点击事件this.isShow !this.isShow;})if(this.isShow) {Text(this.text).margin({bottom: 15})}Button({type: ButtonType.Circle, stateEffect: true}) {// 子组件在其中放置一个图片Image($r(app.media.delete)).width(32).height(32)}.width(64).height(64).backgroundColor(0x317aff)}.width(100%)}.height(100%)}
}
2.5、LoadingProgress
这个组件用来显示加载进度。
Entry
Component
struct LoadingTest {build() {Row() {Column() {LoadingProgress().color(Color.Blue).height(64).width(64)}.width(100%)}.height(100%)}
}
3、资源引用
Resource是资源引用类型用于设置组件属性的值。
资源文件字符串、图片、音频……统一存放在resources目录下。
开发者可以根据屏幕尺寸呈现不同的局效果根据语言不同使用不同的字符串。
Entry
Component
struct ResourceTest {build() {Row() {Column() {Button(登录, {type: ButtonType.Capsule, stateEffect: true}).width(300).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF)}.width(100%)}.height(100%)}
}
上面的按钮则是写死的我们可以把相应的资源存放在对应的资源文件中
资源文件的目录entry/src/main/resources string.json用来存放字符串资源
{string: [{name: login_text,value: 登录}]
}
同时对于字符串资源需要在en_US,zh_CN目录下对应加上这个login_text键对应的值
en_US目录下的string.json
{string: [{name: login_text,value: login}]
}
zh_CN目录下的string.json
{string: [{name: login_text,value: 登录}]
}
在float.json中新增如下键值对
{float: [{name: button_width,value: 300vp},{name: button_height,value: 40vp},{name: login_fontSize,value: 18fp}]
}
在color.json中新增一个键button_color
{color: [{name: start_window_background,value: #FFFFFF},{name: button_color,value: #1890ff}]
}
配置了上面这些资源后在使用时就中以以$r(app.type.name)的形式引用应用资源。
type代表资源的类型或者是资源的存放位置可以取值是color,float,string,plural,media
name代表资源的命名
通过引用资源代码可以修改为如下
Entry
Component
struct ResourceTest {build() {Row() {Column() {Button($r(app.string.login_text), {type: ButtonType.Capsule, stateEffect: true}).width($r(app.float.button_width)).height($r(app.float.button_height)).fontSize($r(app.float.login_fontSize)).fontWeight(FontWeight.Medium).backgroundColor($r(app.color.button_color))}.width(100%)}.height(100%)}
}
