鸿蒙期末-黑马健康3

饮食记录-顶部搜索栏

---

思维导图:

---

该页面整体为三部分，第一部分为头部搜索框由Search和Image构成，第二部分为日期选择器和滑动建议窗由Text和Swiper组成其中Text需加DatePicker来实现日期选择器功能，第三部分为列表栏由List组成。

 

---

代码实现：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct Sheader{
    build(){
      Row({space:CommonConstants.SPACE_6}){
        Search({placeholder:'搜索饮食或运动信息'})
          .textFont({size:18})
          .layoutWeight(1)
        Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
        }
      }
      .width(CommonConstants.THOUSANDTH_940)
    }
}

---

运行截图：

 

---

总结

        上述代码主要存在Sheader页面，用于显示搜索栏。在Row下用一个Search文本框和Image图片来构成此搜索框。