使用鸿蒙ArkTS，实现*登录和显示页面。 新建login_interface的工程 新建一个列（column） 1、添加图片，并居中 在src>main>resources>base>media中，拷贝一个图片。 新建image，使用$r，引用图片。 Image($r('app.media.xyy')) 设置图片宽度、高度 .width(70) 图片居中 设置column的宽度为100% }.width('100%') 2、添加两个输入框 新建textinput， textinput() textinput() 在输入框中，增加提示词(placeholder) textinput({placeholder: '请输入用户名'}) textinput({placeholder: '请输入密码'}) 设置密码为可看或隐藏。 在密码输入框后增加type属性 textinput() .type(InputType.Password) 设置列宽度为20 }.padding(20) 设置列间距为10 column({ space: 10}) 3、添加一个登录按钮 新建button，宽度为100% Button('登录') .width(‘100%’) 4、添加“前往注册”和“忘记密码”链接。 新增一个行，在里面新增两个text。 Row(){ Text('前往注册') Text('忘记密码') } 在行中增加空格 row({space: 20}) end 开发*界面 1、新建一个*界面的源码ets文件。 在src>main>pages> Wechat.ets 复制空页面代码 @Entry @Component struct Index { build() { RelativeContainer() { Column(){ Text('weiixin') } } } } 2、设置登录界面的跳转路由， 使点击登录后，可以跳转到*界面 在登录界面的button中，增加onclick方法，配置路由。 button() .onClick(() => { router.pushUrl({ url: 'pages/Wechat' }) }) *pushUrl也可用replaceUrl，区别是，replace返回不了前一页面。push可以返回。 在src>main>resources>base>profile的main_pages.json文件中 新增*界面的路由信息 "pages/Wechat" 3、实现*界面 在WeChat源文件中，新增一个tabs容器 放入两个导航内容（TabContent） Tabs(){ TabContent(){ Text('内容1') .fontSize(40) } .tabBar('导航1') TabContent(){ Text('内容2') .fontSize(40) } .tabBar('导航2') .... } 设置tabs的位置 在tabls的属性中，增加barPosition，设置成底部显示。 tabs{} .barPosition(BarPosition.End) 自定义导航 在build()上面，新增如下代码： @Builder tabBuilder(){ Text('自定义导航') } 修改导航栏中的文字，改为tabBuilder() .tabBar(this.tabBuilder()) 在tabBuilder中，传入4个参数 @Builder tabBuilder( index: number, //索引 title: string, //字符串标题 normalImg: Resource, //点击前图片 selectImg: Resource //点击后图片 ) 设置四个参数 .tabBar(this.tabBuilder(0,'*',$r('app.media.1_0'),$r('app.media.1_1'))) .tabBar(this.tabBuilder(1,'通讯录',$r('app.media.2_0'),$r('app.media.2_1'))) .tabBar(this.tabBuilder(2,'发现',$r('app.media.3_0'),$r('app.media.3_1'))) .tabBar(this.tabBuilder(3,'我',$r('app.media.4_0'),$r('app.media.4_1'))) } 在ets>resource>media，导入点击前后的8个按钮图片。 在tabBuilder中，新建一个列，在列里面放一个图标和文字。 @Builder tabBuilder(){ colume(){ Image() Text() } } 声明一个激活时的状态currentIndex，用于设置点击底部按钮的前后变化（图标和字体颜色）。 @State currentIndex: number=0 在tabs中，设置触发改变属性（监听） tabs(){} .onChange((index:number)=>{ this.currentIndex = index }) 设置点击底部按钮的图标的前后变化。 Image(this.currentIndex === index ? selectImg : normalImg) 设置点击底部按钮的图标的颜色前后变化。 Image(....) .fillColor(this.currentIndex === index ? '#04ba02': '#333') 设置点击底部按钮的文字的颜色前后变化。 Text(...) .fontColor(this.currentIndex === index ? '#04ba02' : '#333') 设置列的属性 colume({space: 5}){...} .border({width: { top: 1 }, color: '#ccc'}) .width('100%') .height(56) .justifyContent(FlexAlign.Center) 将第一个TabContent()，中的内容，改为一个新的页面，叫Home() 在wechat.est，顶部，导入home页面 import { Home } from './tab/Home' 4、新建Home页面 在ets，下，新建pages>tab两个目录，在tab下新建Home.ets 新增必要代码： @Component export struct Home { build() {} } 在build中，增加导航组件 build() { Navigation() { } } 设置导航组件的属性 Navigation() {} .title('*') .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) 在导航组件中，新增一个行，嵌入搜索框，新增一个列表 Navigation() { Row() { Search({ placeholder: '搜索' }) .borderRadius(6) .margin(0) } .padding(15) .border({ width : {bottom: 1 }, color: '#eee'}) List(){} } 在列表中新增一个行，行里放一个图片和一个列，列里放一个行和文本，行里再放一个文本。 List(){ ListItem(){ Row(){ Image('/common/images/hy.jpg') .width(60) .borderRadius(6) Column(){ Row() { Text('我是韩祎') Text('12:00') } Text('我是美女') } } } } 设置list属性 List(){ } .width('100%') .height('100%') .padding({bottom: 65}) 新建一个图片， 在ets下，新建common和images目录，并存放一个图片。 设置列的属性 Column(){ Row() { Text('我是韩祎') Text('12:00') } Text('我是美女') } .layoutWeight(1) .alignItems(HorizontalAlign.Start) .margin({ left : 15 }) 设置行的属性 Row() { Text('我是韩祎') Text('12:00') } .width('100%') .justifyContent(FlexAlign.SpaceBetween) 设置字体属性 Text('我是韩祎我是韩祎我是韩祎我是韩祎') .fontSize(18).fontWeight(500).fontColor('#333') .maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis})//省略多余的文本 .layoutWeight(1) Text('12:00') .fontSize(14).fontColor('#ccc') Text('我是美女我是美女我是美女我是美女') .margin({top:5}) .maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}) 复制列表项（ListItem） List(){ ListItem(){...} ListItem(){...} 新建models目录存放数据 在src>main>ets下，新建models目录，再在下面新建user.ets 制作假数据 在Home页，增加数据 在build上面新增如下代码： @State list:User[] = userList 用循环渲染 List(){ ForEach(this.list, (item: User) => { ListItem(){ Row(){ Image(item.avater) Column(){ Row() { Text(item.name) } Text(item.msg) } } } }) 增加列表侧滑 ListItem(){...} .swipeAction({ end: this.itemEndBuilder(index) }) 申明itemEndBuilder @Builder itemEndBuilder(index: number){ Row(){ Button('删除') } 设置按钮样式和点击事件 Button('删除') .backgroundColor('#ff5e5c') .height('100%') .aspectRatio(1) .type(ButtonType.Normal) .onClick(() => { this.list.splice(index, 1) })