ArkUI-界面开发
位置：在build(){}中去编写代码
//以前学基础 ->写代码的位置（页面顶部）
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
//构建 -> 页面
build() {
//行
//列
RelativeContainer() {
//文本 函数名（参数） 对象.方法名（参数）枚举.常量名
Text(this.message)
.id('HelloWorld')
.fontSize(50)//设置文本的文字大小
.fontWeight(FontWeight.Bold)//设置文本的粗细
.fontColor(Color.Green)//颜色
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}1.界面开发布局思路
ArkUI（方舟开发框架）是一套构建鸿蒙应用界面的框架。
构建页面的最小单位就是“组件”（我们在界面中所看到的最小单位都是组件）
组件分类：
- 基础组件：界面呈现的基础元素。如：文字、图片、按钮等。
- 容器组件：控制布局排布。如：Row行、Column列等。
布局思路：先排版，再放内容。
例：完成
界面
组件语法：
1.容器组件：行Row、列Column
容器组件(){
//内容
}2.基础组件文字Text、图片
基础组件(参数)分析图片：
发现为纵向布局，所以列Column在外层。
结构的运行代码：
build(){
Column(){
Text('小说简介')
Row(){
Text('都市')
Text('生活')
Text('情感')
Text('女频')
}
}
}1.1.组件属性方法
需求：美化组件外观效果 → 组件的属性方法
结构格式：
组件(){}
.属性方法1(参数)
.属性方法2(参数)
.属性方法3(参数)
......| 常用的组件属性方法 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
例：从
到
//以前学基础 ->写代码的位置（页面顶部）
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
//构建 -> 页面
build() {
//布局思路：先排版，在内容。
//整体：竖排
Column(){
//内容
Text('小说简介')
// .width('100%')
.fontSize(20)//字体大小
.fontWeight(FontWeight.Bold)//字体粗细（可以写100~900的数字）默认400；加粗700
// .backgroundColor(Color.Green)//背景颜色
Row(){
Text('都市')
.width(50)
.height(30)
.backgroundColor(Color.Orange)
Text('生活')
.width(50)
.height(30)
.backgroundColor(Color.Pink)
Text('情感')
.width(50)
.height(30)
.backgroundColor(Color.Yellow)
Text('女频')
.width(50)
.height(30)
.backgroundColor(Color.Gray)
}
}.width('100%')
//.backgroundColor(Color.Orange)1.2.文本颜色
语法：.fontColor(颜色名)| 颜色值说明 | 具体演示 |
|---|---|
| 枚举颜色Color.颜色名 | Color.Red、Color.Pink |
| #开头的16进制 | '#df3c50' |
Text('小说简介')
.fontColor(Color.Orange)
.fintColor('#df3c50')注意：写16进制时加单引号。
提示：色值也能在其他写颜色的属性方法中使用，如：背景色。
示例
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
//1.演示文字颜色(枚举 + 16进制)
Column(){
Text('alika')
//.fontColor(Color.Green)
.fontColor('#df3c')
.fontSize(30)
}
}
}运行效果
示例
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
//2.综合练习：今日头条置顶新闻
//思路：排版 → 内容 → 美化
Column(){
Text('武汉，入选北斗规模应用试点城市')
.width('100%')
.height(40)
.fontSize(24)
Row(){
Text('置顶 ')
.fontColor(Color.Red)
.fontSize(19)
Text('长江云新闻 ')
.fontColor(Color.Gray)
.fontSize(19)
Text('4680评论 ')
.fontColor(Color.Gray)
.fontSize(19)
}
.width('100%')
}
.width('100%')
}
}运行效果
1.3.文本溢出
当文本溢出是会显示省略号，该如何设置？
如：
最后的省略号......
1.3.1.文字溢出省略
语法：.textOverflow({
overflow:TextOverflow.XXX
})注意：需要配合.maxLines（行数）使用
1.3.2.行高
语法：.lineHeight(数字)Text('初始...')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(2)例：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
//构建 → 界面
Column(){
Text('初识C语言')
.width('100%')
.lineHeight(50)
.fontSize(26)
.fontWeight(FontWeight.Bold)
Text('C语言是一门通用计算机编程语言，广泛应用于底层开发。C语言设计目标是提供一种能以简易的方式编译、处理低级储存器、产生少量的机器码以及不需要任何运作环境支持便能运行的编程语言。' +
'底层开发：比如说，现在有一部电脑，而这部电脑属于硬件，里面得配有操作系统，像：Windows、Linux等。那么操作系统又如何让电脑工作呢？介于硬件和操作系统的层次：驱动。操作系统之上有：应用层，包括应用软件/QQ/网盘等。而用户所了解的为应用层方面，所以底层开发即为应用层下面一部分。\n')
.width('100%')
.lineHeight(25)
//{}表示对象
.textOverflow({
overflow:TextOverflow.Ellipsis//必须配合maxLines才有效果
})
.maxLines(2)
}
.width('100%')
}
}运行效果
1.4.图片组件
作用：界面中显示图片
语法：Image（图片数据源） 支持网络图片资源和本地图片资源
网络图片：Image('路径')
本地图片（项目文件夹里的图片）：Image($r('app.media.文件名'))
存储位置为：
示例
//网络图片地址：
//https://www.itheima.com/images/logo.png
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
//1、网络图片加载 Image('')
Column(){
Image('https://www.itheima.com/images/logo.png')
.width(300)
//2、本地图片加载 Image($r('app.media.文件名'))
Row(){
Image($r('app.media.background'))
.width(500)
}
}
}
}1.5.输入框和组件
需求：实现登录或注册的排版 → 输入框和按钮组件
TextInpu(参数对象)
.属性方法()1.参数对象：placeholder提示文本
2.属性方法：.type(inputType.xxx)设置输入框type类型
| type值 | 解释说明 |
|---|---|
| ①Normal | 基本输入模式，无特殊限制 |
| ②password | 密码输入模式 |
TextInput({
placeholder:'占位符文本'
}).type(InputType.Password)
//按钮
Button('按钮文本')简单登录页面
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column( { space:10 } ){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码框'
}).type(InputType.Password)
Button('登录')
.width(200)
}控制column和row内元素的间隙，可以用space
Column({ space: 10 } )
{
...
}1.6.实例
综合实战--华为登录
构建界面思路：
- 排版（分析布局）
- 内容（基础组件）
- 美化（属性方法）
组件(){
//内容
}
.padding(20)@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column({space:20}){
Image($r('app.media.Huawei'))
.width(200)
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
}).type(InputType.Password)
Button('登录')
.width('100%')
Row({space:60}){
Text('前往注册')
Text('忘记密码')
}
}
.width('100%')
.padding(20)//内边距
}
}运行效果
