目录

案例一：登录界面

案例二：正圆头像，胶囊按钮

案例三：主页顶部

案例四：列表项

---

案例一：登录界面

代码：

 build() {Column({space:10}){Image($r("app.media.naxida")).width(100)Text("原神？启动!").fontSize(18).fontWeight(700).margin({bottom:40})Button("QQ登录").width("100%")Button("微信登录").width("100%").backgroundColor("#ddd").fontColor("#000")}.width("100%").padding(20)}

案例二：正圆头像，胶囊按钮

代码：
 

build() {Column(){Image($r("app.media.cat")).width(100).height(100).borderRadius(50)Text("每天注意多喝水").height(50).width(150).backgroundColor(Color.Pink).borderRadius(25).margin({top:20})}.padding(20)}

这两个思路都差不多，只需要将搞两个半圆就行，只是正圆用的正方形。

案例三：主页顶部

代码：

build() {Column(){Row(){Image($r("app.media.ic_arrow_left")).width(40)Text("个人中心")Image($r("app.media.ic_more")).width(40)}.width("100%").justifyContent(FlexAlign.SpaceBetween).backgroundColor(Color.Grey)}.width("100%").height("100%").backgroundColor(Color.White)}

这里就是简单用了一下对齐方式justifycontent

案例四：列表项

代码：

 build() {Row(){Column(){Text("玩一玩").fontWeight(700).fontSize(20).margin({bottom:10})Row(){Text("开放世界").fontSize(13).padding({right:5}).border({width:{right:1},color:"#a1a1a1"}).fontColor("#a1a1a1")Text("冒险之旅 超好玩").fontSize(13).margin({left:5}).fontColor("#a1a1a1")}}.alignItems(HorizontalAlign.Start)Row(){Image($r("app.media.mihoyo")).width(50).borderRadius(5).padding(2)Image($r("app.media.ic_arrow_right")).width(50).fillColor(Color.Grey)}.justifyContent(FlexAlign.End).width("60%")}.width("100%").padding(20)}

这个稍微复杂一些但是看应该是看得懂。