创建文件
1点击这个文件
2.右键这个文件
3.把鼠标放到这个文件上面
4.把鼠标放到这个文件上面
5.点击这个文件就创文件了,文件名不能是中文的
1.布局
build() {
//行布局
Row(){
Text("行布局").backgroundColor("red")
Text("行布局").backgroundColor("blue")
Text("行布局").backgroundColor("#f30")
Text("行布局").backgroundColor("#666")
Text("行布局").backgroundColor("green")
Text("行布局").backgroundColor("red")
Text("行布局").backgroundColor("blue")
Text("行布局").backgroundColor("#f30")
}
}
2.间隔
Column({space:15})
3.字体大小
.fontSize(30)
4.字体颜色
.fontColor(Color.Brown)
5.水平对齐方式
.textAlign(TextAlign.Start)
6.多个属性
.decoration(
{//写多个属性
//类型:下划线,删除线,上划线
type:TextDecorationType.Underline,
color:'blue',//颜色
style:TextDecorationStyle.SOLID//现的样式
}
)
7.文本输入框
TextInput({placeholder:"请输入账号",text:"admin"})//默认,有圆角的输入框
TextInput({placeholder:"请输入密码"})
8.输入框类型:密码
.type(InputType.Password)
9.圆角
.borderRadius(0)
10.按钮组件
Button("按钮").width(90)
//type:ButtonType.Circle按钮的形状
//stateEffect:false:按钮下压的状态
Button("圆形按钮",{type:ButtonType.Circle,stateEffect:false})
.height(120)
Button("胶囊按钮",{type:ButtonType.Capsule,stateEffect:false})
Button("普通按钮",{type:ButtonType.Normal,stateEffect:false})
}
11.插入图片
Column(){
// $r('app.media.startIcon') resources>base>media 不用写后缀
Image($r('app.media.startIcon'))
.width(40)
//resources>rawfile 需要写完整的图片名称
Image($rawfile("微信图片_20240312150551.jpg"))
.width(200)
//渲染颜色(黑白)
.renderMode(ImageRenderMode.Template)
// 加载网络图片需要申请网络权限
Image("https://ts1.cn.mm.bing.net/th/id/R-C.08c4be9a6f712d0e022163456aa55717?rik=i3aloZKtgXLQVA&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f201403%2f7-14030Q43K9.jpg&ehk=xmS%2fk78ynzfhHlPywTKvOFMTabcOZmUTdUC98iCoAiI%3d&risl=&pid=ImgRaw&r=0")
.width(300)
Image($r('app.media.user'))
.width(120)
// 图片插值 抗锯齿
.interpolation(ImageInterpolation.High)
}