开启鸿蒙开发之旅：静态页面搭建

写在前面

了解了一些常用的系统组件及其属性之后，我准备开始搭建我第一个页面，本次鸿蒙Next初体验我准备模仿这款“提醒事项”APP，从页面搭建到基本功能实现。今天从入口页开始：

布局思路

整体结构

从该页面的整体布局结构来看，可以将它整体分为Stack层叠布局，因为底部的“+"添加功能其实是固定在底部位置不变的，而其他的内容是可扩充的，一旦超出页面是可以滚动的。

搜索区域

最上面的搜索区域可以用Row行布局，里面包含了两个图标Image和一个输入框TextInput,整个搜索区域有一个背景色，还有一个倒圆角。

卡片区域

搜索区下方是一个卡片区，里面有5个卡片且后期可以动态增加，卡片的结构一致，只是图标和文字不同。可以使用Flex弹性布局，将warp设置为FlexWarp.Warp换行。卡片有一个白色背景和倒圆角。

列表区域

列表区域可以用List列表容器，每个ListItem中使用Row容器将图标、文本、数字放在同一行中。

实现代码

@Entry
@Component
struct Index {@State message: string = '你好';build() {Stack(){Column() {Row() {Image($r('app.media.ic_search')).width(30).fillColor(Color.Gray)TextInput({ placeholder: '搜索' }).layoutWeight(1).backgroundColor(Color.Transparent)Image($r('app.media.ic_voice')).width(30).fillColor(Color.Gray)}.width('100%').height(50).backgroundColor('#e4e3e9').borderRadius(15).padding({left: 10,right: 10})Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {Row() {Column({ space: FlexAlign.SpaceBetween }) {Stack() {Row() {Image($r('app.media.ic_date')).width(30)}.width(40).height(40).borderRadius(40).backgroundColor('#007AFF').justifyContent(FlexAlign.Center)Text('12').fontColor(Color.White).fontSize(12).margin({right: 3,top: 5})}Text('今天').fontColor(Color.Gray).fontSize(18)}.height('100%')Blank()Text('4').fontSize(30).fontWeight(FontWeight.Bold)}.width('48%').height(90).backgroundColor('#e4e3e9').borderRadius(15).padding(10).alignItems(VerticalAlign.Top).margin({bottom: 10})Row() {Column({ space: FlexAlign.SpaceBetween }) {Stack() {Row() {Image($r('app.media.ic_date2')).width(30)}.width(40).height(40).borderRadius(40).backgroundColor('#ff3a2f').justifyContent(FlexAlign.Center)}Text('计划').fontColor(Color.Gray).fontSize(18)}.height('100%')Blank()Text('4').fontSize(30).fontWeight(FontWeight.Bold)}.width('48%').height(90).backgroundColor('#e4e3e9').borderRadius(15).padding(10).alignItems(VerticalAlign.Top).margin({bottom: 10})Row() {Column({ space: FlexAlign.SpaceBetween }) {Stack() {Row() {Image($r('app.media.ic_box')).width(20)}.width(40).height(40).borderRadius(40).backgroundColor(Color.Black).justifyContent(FlexAlign.Center)}Text('全部').fontColor(Color.Gray).fontSize(18)}.height('100%')Blank()Text('6').fontSize(30).fontWeight(FontWeight.Bold)}.width('48%').height(90).backgroundColor('#e4e3e9').borderRadius(15).padding(10).alignItems(VerticalAlign.Top).margin({bottom: 10})Row() {Column({ space: FlexAlign.SpaceBetween }) {Stack() {Row() {Image($r('app.media.ic_qizi')).width(30)}.width(40).height(40).borderRadius(40).backgroundColor('#ff9501').justifyContent(FlexAlign.Center)}Text('旗标').fontColor(Color.Gray).fontSize(18)}.height('100%')Blank()Text('0').fontSize(30).fontWeight(FontWeight.Bold)}.width('48%').height(90).backgroundColor('#e4e3e9').borderRadius(15).padding(10).alignItems(VerticalAlign.Top).margin({bottom: 10})Row() {Column({ space: FlexAlign.SpaceBetween }) {Stack() {Row() {Image($r('app.media.ic_ok')).width(30)}.width(40).height(40).borderRadius(40).backgroundColor('#596772').justifyContent(FlexAlign.Center)}Text('完成').fontColor(Color.Gray).fontSize(18)}.height('100%')Blank()Text('0').fontSize(30).fontWeight(FontWeight.Bold)}.width('48%').height(90).backgroundColor('#e4e3e9').borderRadius(15).padding(10).alignItems(VerticalAlign.Top).margin({bottom: 10})}.margin({top: 10})Text('我的列表').fontSize(20).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start).margin({left: 10,bottom: 10})List() {ListItem() {Row() {Row() {Image($r('app.media.ic_list')).width(20).fillColor(Color.White)}.width(30).height(30).borderRadius(30).backgroundColor('#007AFF').justifyContent(FlexAlign.Center).margin({right: 10})Text('提醒事项')Blank()Text('6')Image($r('app.media.ic_right')).width(20)Text('').width('90%').height(0.5).backgroundColor('#ccc').position({bottom:-10,right:-10})}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height(50).width('100%').padding({left: 10,right: 10})ListItem() {Row() {Row() {Image($r('app.media.ic_list')).width(20).fillColor(Color.White)}.width(30).height(30).borderRadius(30).backgroundColor('#ff9501').justifyContent(FlexAlign.Center).margin({right: 10})Text('提醒')Blank()Text('0')Image($r('app.media.ic_right')).width(20)}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height(50).width('100%').padding({left: 10,right: 10})}.backgroundColor(Color.White).borderRadius(10)}.width('100%').height('100%').padding(15).backgroundColor('#fff2f8')Row(){Image($r('app.media.ic_add')).width(20).fillColor('#007AFF').margin({right:10})Text('新提醒事项').fontColor('#007AFF')Blank()Text('添加列表').fontColor('#007AFF')}.width('100%').padding(15)}.alignContent(Alignment.Bottom)}
}