首页页面布局（1）

 

 

 

import { TaskItem } from '../view/TaskItem'
import { TaskStatisties } from '../view/TaskStatisties'
@Entry
@Component
struct TaskList {
  @State message: string = 'Hello World'

  build() {

    Stack({alignContent:Alignment.BottomEnd}){
      Column() {

        // 第1个模块
        Text('你好 Eric').fontSize(30).fontWeight(FontWeight.Bold)
        Text('让每天工作效率更高').fontSize(14).fontColor(Color.Grey).margin({top:14})

        Scroll(){
          Column(){

            // 第2个模块
            Text('我的计划').fontSize(26).fontWeight(FontWeight.Bold).margin({top:20,bottom:10})
            // 显示模块列表
            TaskStatisties()

            // 第3个模块
            Column({space:10}){
              Row(){
                Text('今日任务').fontSize(26).fontWeight(FontWeight.Bold)
                Text('查看更多').fontSize(20).fontColor(Color.Grey)
              }.margin({top:30}).justifyContent(FlexAlign.SpaceBetween).width('100%')

              // 任务列表渲染
              TaskItem()
            }

          }.alignItems(HorizontalAlign.Start)
        }.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off).padding({bottom:120})


      }.alignItems(HorizontalAlign.Start)
      .width('100%')
      .height('100%')
      .padding(20)

      Stack(){
        Image($r('app.media.icon')).width(50)
      }.margin({bottom:100,right:30})
    }
  }
}