这个是以前我自己做的一个网站,网络广告推广策划书,传媒网站模板,企业网站管理系统 php之——基础组件
目录
之——基础组件
杂谈
正文
1.Image
1.0 数据源 1.1 缩放
1.2 大小 1.3 网络图片
2.Text
2.0 数据源
2.1 大小
2.2 粗细
2.3 颜色
2.5 样式字体
2.6 基础示例 2.7 对齐
2.8 省略
2.9 划线
3.TextInput
3.1 输入类型
3.2 提示文…之——基础组件
目录
之——基础组件
杂谈
正文
1.Image
1.0 数据源 1.1 缩放
1.2 大小 1.3 网络图片
2.Text
2.0 数据源
2.1 大小
2.2 粗细
2.3 颜色
2.5 样式字体
2.6 基础示例 2.7 对齐
2.8 省略
2.9 划线
3.TextInput
3.1 输入类型
3.2 提示文本属性
3.3 光标
4.Button
4.1 样式
4.2 子组件
5.LoadingProgress 杂谈 基础组件的使用。 组件Component是界面搭建与显示的最小单位HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元包括Text、Image、TextInput、Button、LoadingProgress等。 例如下面这个常用的登录界面就是由这些基础组件组合而成 正文
1.Image 渲染和展示图片支持加载本地和网络图片。 Image组件用来渲染展示图片它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高图片就能加载出来。 Image($r(app.media.icon)).width(100).height(100)
1.0 数据源 其中图片数据源 1.1 缩放 为了使图片在页面中有更好的显示效果有时候需要对图片进行缩放处理。可以使用objectFit属性设置图片的缩放类型objectFit的参数类型为ImageFit。 //将图片加载到Image组件设置宽高各100设置objectFit为Cover默认值设置图片背景色为灰色0xCCCCCC
Image($r(app.media.image2)).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100) ImageFit包含以下几种类型 Contain保持宽高比进行缩小或者放大使得图片完全显示在显示边界内。 Cover默认值保持宽高比进行缩小或者放大使得图片两边都大于或等于显示边界。 Auto自适应显示。 Fill不保持宽高比进行放大缩小使得图片充满显示边界。 ScaleDown保持宽高比显示图片缩小或者保持不变。 None保持原有尺寸显示。 1.2 大小 大小调整float.json 1.3 网络图片 浏览新闻的时候图片一般从网络加载而来Image组件支持加载网络图片将图片地址换成网络图片地址进行加载。
Image(https://www.example.com/xxx.png) 为了成功加载网络图片需要在module.json5文件中申明网络访问权限。
{module : {requestPermissions:[{name: ohos.permission.INTERNET}]}
} 2.Text 展示文本信息。 2.0 数据源 其中文本来源string..json 2.1 大小 文本大小fontSizefloat.json 2.2 粗细 文本粗细fontWeight 设置文本的字体粗细number类型取值[100, 900]取值间隔为100默认为400取值越大字体越粗。string类型仅支持number类型取值的字符串形式例如“400”以及“bold”、“bolder”、“lighter”、“regular”、“medium”分别对应FontWeight中相应的枚举值。默认值FontWeight.Normal 2.3 颜色 文本颜色fontColor 2.5 样式字体 还有fontStyle设置样式FontStyle.Italic是斜体fontFamily设置文本的字体列表。使用多个字体使用“”进行分割优先级按顺序生效。例如“Arialsans-serif”。 2.6 基础示例
Entry
Component
struct TextDemo {build() {Row() {Column() {Text(HarmonyOS)Text(HarmonyOS).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
} 2.7 对齐 文本对齐方式textAlign Text(HarmonyOS).width(200).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD) TextAlign.Start/Center/End 2.8 省略 文本超长显示textOverflow需配合maxLines使用单独设置不生效 Text(This is the text content of Text Component This is the text content of Text Component).fontSize(16).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD) 2.9 划线 文本装饰线decoration Text(HarmonyOS).fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }).backgroundColor(0xE6F2FD) TextDecorationTyp包含None、Overline、LineThrough、Underline。 3.TextInput 输入单行文本响应输入事件获取用户输入的文本信息。
TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial) 3.1 输入类型 输入类型枚举 3.2 提示文本属性 提示文本样式placeholderFont TextInput({ placeholder: 请输入帐号 }).placeholderColor(0x999999).placeholderFont({ size: 20, weight: FontWeight.Medium, family: cursive, style: FontStyle.Italic }) 3.3 光标 光标位置TextInputController的caretPosition动态设置光标位置 Entry
Component
struct TextInputDemo {controller: TextInputController new TextInputController()build() {Column() {TextInput({ controller: this.controller })Button(设置光标位置).onClick(() {this.controller.caretPosition(2)})}.height(100%).backgroundColor(0xE6F2FD)}
} 4.Button 响应点击操作。
Button(登录, { type: ButtonType.Capsule, stateEffect: true }).width(90%).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF) type用于定义按钮样式示例代码中ButtonType.Capsule表示胶囊形按钮stateEffect用于设置按钮按下时是否开启切换效果当状态置为false时点击效果关闭默认值为true。 4.1 样式 Button样式枚举 4.2 子组件 Button组件可以包含子组件以开发出更丰富多样的Button下面的示例代码中Button组件包含了一个Image组件 Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r(app.media.icon_delete)).width(30).height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff) 5.LoadingProgress LoadingProgress组件用于显示加载进展比如应用的登录界面当我们点击登录的时候显示的“正在登录”的进度条状态。LoadingProgress的使用非常简单只需要设置颜色和宽高就可以了。
LoadingProgress().color(Color.Blue).height(60).width(60)
