鸿蒙应用程序开发项目 美食杰app （提供源代码以及图片资源）

于 2024-07-18 17:27:46 发布
阅读量424 收藏 9
点赞数 10
文章标签： harmonyos 美食 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73641260/article/details/140524039
版权

本项目基于鸿蒙开发工具DevEco Studio 实现，利用ArkTS开发语言完成设计。

导言

鸿蒙应用开发是基于华为的鸿蒙操作系统（HarmonyOS）进行的应用程序开发。鸿蒙系统旨在提供跨设备的统一体验，支持智能手机、平板、电视、物联网设备等多种终端。

一、开发工具下载链接

DevEco Studio下载链接

点击下载，一直默认操作就行

二、项目展示

项目效果演示

三、源代码

欢迎页

代码
import { router } from '@kit.ArkUI'

@Entry
@Component
struct welcome{

  build(){
    Row() {
      Image($r('app.media.welcome')).width('100%').height('100%')
    }
  }
  onPageShow(): void {
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/register'
      })
    },2000) //实现定时跳转，当进入app首先加载welcome pages,2秒后进入注册页
  }
}
demo

注册页

代码
import { font, Prompt, router } from '@kit.ArkUI';
import { text } from '@kit.ArkGraphics2D';

export class user_account{
  username:string
  password:string
  constructor(pname:string,pwd:string) {
    this.username = pname
    this.password = pwd
  }
}

@Entry
@Component
struct register{

  @State username:string = "";
  @State password:string = "";
  @State conf_psd:string = "";

  build() {
    Column({space:15}){
      //顶部应用图标
      Text().width(150).height(150).borderRadius(90).margin({top:80})
        .backgroundImage($r('app.media.icon')).backgroundImageSize(ImageSize.FILL)
      //三个输入框及注册按钮
      Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
        TextInput({ placeholder: '输入用户名' }).width(300).type(InputType.USER_NAME).onChange(() => {
        }).onChange((value: string) => {
          this.username = value
        }).maxLength(15)
        TextInput({ placeholder: '输入密码' }).width(300).type(InputType.Password).onChange((value: string) => {
          this.password = value
        }).maxLength(15)
        TextInput({ placeholder: '确认密码' }).width(300).type(InputType.Password).onChange((value: string) => {
          this.conf_psd = value
        }).maxLength(15)
        Button('注册', { type: ButtonType.Normal, stateEffect: true }).width(150)
          .onClick(() => {
            if (this.username === "") {
              //用户名为空，弹窗提示
              Prompt.showToast({
                message: "用户名不能为空",
                duration: 1000
              })
            } else {
              //密码为空，弹窗提示
              if (this.password === "")
                Prompt.showToast({
                  message: "密码不能为空",
                  duration: 1000
                })
              else {
                //确认密码为空，弹窗提示
                if (this.conf_psd === "")
                  Prompt.showToast({
                    message: "未确认密码",
                    duration: 1000
                  })
                else if (this.conf_psd != this.password) {
                  //密码不一致，弹窗提示
                  Prompt.showToast({
                    message: "密码不一致",
                    duration: 1000
                  })
                } else {
                  //成功注册，弹窗显示用户名及密码
                  Prompt.showToast({
                    message: "注册成功\n" + "用户名: " + this.username + '\n' + "密码: " + this.password,
                    duration: 1000
                  })
                  let user: user_account = new user_account("", "")
                  user.username = this.username
                  user.password = this.password
                  router.pushUrl({
                    url: 'pages/login',
                    params: user,
                  })
                }
              }
            }
          })
      }.height('40%').width('95%').backgroundColor(Color.White)
      .borderRadius(20)
      .margin({top:40})
    }.height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundImage($r('app.media.welcome_back')) //插入背景图片
    .backgroundImageSize(ImageSize.FILL)
  }
}
demo

登入页面

代码
import { font, Prompt, router } from '@kit.ArkUI';
import { text } from '@kit.ArkGraphics2D';
import { user_account } from './register';

@Entry
@Component
struct login{

  private  user:user_account=  router.getParams() as user_account;
  @State username:string = ""
  @State password:string = "";

  build() {
    Column({space:15}){
      Text().width(150).height(150).borderRadius(90).margin({top:80})
        .backgroundImage($r('app.media.icon')).backgroundImageSize(ImageSize.FILL)
      Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
        TextInput({ placeholder: '输入用户名' }).width(300).type(InputType.Normal).onChange(() => {
        }).onChange((value: string) => {
          this.username = value
        }).maxLength(15)

        TextInput({ placeholder: '输入密码' }).width(300).type(InputType.Password).onChange((value: string) => {
          this.password = value
        })
          .maxLength(15)
        Button('登入', { type: ButtonType.Normal, stateEffect: true }).width(150)
          .onClick(() => {
            if (this.username === "") {
              Prompt.showToast({
                message: "用户名为空",
                duration: 1000
              })
            }
            else {
              if (this.password === "")
                Prompt.showToast({
                  message: "密码为空",
                  duration: 1000
                })
              else {
                if (this.username === this.user.username) {
                  if (this.password === this.user.password)
                    router.pushUrl({
                      url: 'pages/Index'
                    })
                  else {
                    Prompt.showToast({
                      message: "密码错误",
                      duration: 1000
                    })
                  }

                } else {
                  Prompt.showToast({
                    message: "账号不存在",
                    duration: 1000
                  })
                }

              }
            }
          })
      }.height('30%').width('95%').backgroundColor(Color.White).margin({top:50}).borderRadius(20)

    }.height('100%')
    .width('100%')
    .backgroundImage($r('app.media.signin_back'))
    .backgroundImageSize(ImageSize.FILL)
    .alignItems(HorizontalAlign.Center)
   // .justifyContent(FlexAlign.Center)
  }
}
demo

应用页面

代码

由于采用Tabs()组件，故所有页面代码写都在一个文件里

import { LengthMetrics, router } from '@kit.ArkUI';
import sendableColorSpaceManager from '@ohos.graphics.sendableColorSpaceManager';


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  myscr: Scroller = new Scroller();
  myscrhor:Scroller = new Scroller();
  @State currentIndex:number = 0;
  @State cur:number = 0;
  @State expwidth:string = "60%"
  @State dewidth:string = "30%"
  @State button1width:string = this.expwidth
  @State button2width:string = this.dewidth
  myindic:DotIndicator = new DotIndicator();
  myswiscr:SwiperController = new SwiperController()
  @Styles myfun(){
    .width('95%').height('22%')
     .borderRadius(10).backgroundImageSize(ImageSize.FILL)
  }
  @Styles mystl(){
    .width('100%').height('20%')
  }
  @Styles stlfull(){
    .width('100%').height('50%')
  }
  @Styles dished(){
    .height('100%').width('40%').borderRadius(10)
    .margin({left:10}).backgroundImageSize(ImageSize.FILL)
  }
  @Builder mytabbar(title:string,Index:number,selectedimg:Resource,defimg:Resource){
       Column(){
         Text().height(45).width(45)
           .backgroundImage(Index===this.currentIndex?selectedimg:defimg).backgroundImageSize(ImageSize.FILL)
         Text(title).fontSize(14).textAlign(TextAlign.Center).fontColor(Index===this.currentIndex?Color.Red:Color.Black)
           .height(20).width(60)
       }
  }

  build() {
    Tabs(){

      //推荐页面
      TabContent(){
        Column() {
          //顶部搜索框
          Row({ space: 10 }) {
            Text().width(30).height('50%').backgroundImage($r('app.media.ic_public_add_norm'))
              .backgroundImageSize(ImageSize.Contain).margin({right:10})
            Search({ placeholder: '搜索菜谱、食材' }).backgroundColor('#efefef').width(240).height('60%')
            Text().width(30).height('50%').backgroundImage($r('app.media.ic_public_view_grid'))
              .backgroundImageSize(ImageSize.Contain).margin({left:10})//.backgroundColor(Color.Red)
          }
          .height('8%')
          .width('100%')
          .margin({ top: 5 })
          .justifyContent(FlexAlign.Center)

          //滚动页面
          Column() {
            Scroll(this.myscr) {
              Column() {
                Stack({alignContent: Alignment.Top}) {
                  Swiper(this.myswiscr) {
                    Column() {
                      Text('今日早餐 ')
                        .fontWeight(FontWeight.Bold)
                        .width('100%')
                        .height('9%')
                        .padding({ left: 10 })
                        .fontSize(25)
                      Text().height('53%').width('95%')
                        .backgroundImage($r('app.media.img_4')).backgroundImageSize(ImageSize.Contain)
                    }

                    Column() {
                      Text('今日午餐 ')
                        .fontWeight(FontWeight.Bold)
                        .width('100%')
                        .height('9%')
                        .padding({ left: 10 })
                        .fontSize(25)
                      Text().height('53%').width('95%')
                        .backgroundImage($r('app.media.img1')).backgroundImageSize(ImageSize.Contain)
                    }

                    Column() {
                      Text('今日下午茶')
                        .fontWeight(FontWeight.Bold)
                        .width('100%')
                        .height('9%')
                        .padding({ left: 10 })
                        .fontSize(25)
                      Text().height('53%').width('95%')
                        .backgroundImage($r('app.media.img_1')).backgroundImageSize(ImageSize.Contain)
                    }

                    Column() {
                      Text('今日晚餐 ')
                        .fontWeight(FontWeight.Bold)
                        .width('100%')
                        .height('9%')
                        .padding({ left: 10 })
                        .fontSize(25)
                      Text().height('53%').width('95%')
                        .backgroundImage($r('app.media.img_3')).backgroundImageSize(ImageSize.Contain)
                    }

                    Column() {
                      Text('今日夜宵 ')
                        .fontWeight(FontWeight.Bold)
                        .width('100%')
                        .height('9%')
                        .padding({ left: 10 })
                        .fontSize(25)
                      Text().height('53%').width('95%')
                        .backgroundImage($r('app.media.img_2')).backgroundImageSize(ImageSize.Contain)
                    }
                  }.autoPlay(true).indicator(this.myindic.selectedColor(Color.Red))
                  .indicator(this.myindic.selectedItemWidth(10))
                  .indicator(this.myindic.selectedItemWidth(10))
                  .indicator(this.myindic.itemWidth(10))
                  .indicator(this.myindic.itemHeight(10))

                  Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.End,alignItems:ItemAlign.Center}) {
                    Text('更多三餐推荐 >')
                      .fontWeight(FontWeight.Bold)
                      .width('40%')
                      .height('75%')
                      .backgroundColor('#ffe854')
                      .textAlign(TextAlign.Center)
                      .margin({right:15})
                      .fontSize(16)
                      .borderRadius(40)
                  }.width('100%').height('8%')

                }
                Column() {
                  Text('二十四节气养生食谱')
                    .backgroundColor(Color.Green)
                    .fontSize(15)
                    .fontColor(Color.White)
                    .height('10%')
                    .width(150)
                    .textAlign(TextAlign.Center)
                    .alignSelf(ItemAlign.Start)
                    .borderRadius({ topLeft: 15, bottomRight: 15 })
                  Text('夏至').fontWeight(FontWeight.Bold).fontSize(30).height('15%')
                  Text('6月21日-7月6日').height('8%').fontSize(12).fontColor('#b0b0b0')
                  Row({ space: 10 }) {
                    Text("面条")
                      .width('12%')
                      .height(25)
                      .textAlign(TextAlign.Center)
                      .borderRadius(20)
                      .fontColor('#6a9c5e')
                      .backgroundColor('#eff3ee')
                    Text("鸡蛋")
                      .width('12%')
                      .height(25)
                      .textAlign(TextAlign.Center)
                      .borderRadius(20)
                      .fontColor('#6a9c5e')
                      .backgroundColor('#eff3ee')
                    Text("苦瓜")
                      .width('12%')
                      .height(25)
                      .textAlign(TextAlign.Center)
                      .borderRadius(20)
                      .fontColor('#6a9c5e')
                      .backgroundColor('#eff3ee')
                    Text("苦菊")
                      .width('12%')
                      .height(25)
                      .textAlign(TextAlign.Center)
                      .borderRadius(20)
                      .fontColor('#6a9c5e')
                      .backgroundColor('#eff3ee')
                    Text("丝瓜")
                      .width('12%')
                      .height(25)
                      .textAlign(TextAlign.Center)
                      .borderRadius(20)
                      .fontColor('#6a9c5e')
                      .backgroundColor('#eff3ee')
                  }.height('10%').margin({ top: '2%' })

                  Row({ space: 10 }) {
                    Row() {
                      Text('健脾养胃，来碗夏至面。')
                        .width('90%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                      Text('>')
                        .width('10%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')

                    }
                    .width('48%')
                    .height('97%')
                    .borderRadius(10)
                    .backgroundColor('#ffedeb')

                    Row() {
                      Text('养心安神，吃棵夏至蛋。')
                        .width('90%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                      Text('>')
                        .width('10%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                    }
                    .width('48%')
                    .height('97%')
                    .borderRadius(10)
                    .backgroundColor('#fef4ea')

                  }.height('25%').width('100%')//.backgroundColor(Color.Orange)
                  .justifyContent(FlexAlign.Center)
                  .margin({top:5})


                  Row({ space: 10 }) {
                    Row() {
                      Text('清热解暑，多吃“苦”味食物。')
                        .width('90%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                      Text('>')
                        .width('10%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')

                    }
                    .width('48%')
                    .height('97%')
                    .borderRadius(10)
                    .backgroundColor('#f6f3fe')

                    Row() {
                      Text('补充水分，多喝汤粥多喝水。')
                        .width('90%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                      Text('>')
                        .width('10%')
                        .height('100%')
                        .fontSize(18)
                        .fontColor('#6f6564')
                    }
                    .width('48%')
                    .height('97%')
                    .borderRadius(10)
                    .backgroundColor('#edf3ff')

                  }.height('25%').width('100%')//.backgroundColor(Color.Orange)
                  .justifyContent(FlexAlign.Center).margin({top:5})

                }.backgroundColor('#fdfdfd').height('41%').width('95%').borderRadius(15).margin({top:10})

                Column() {
                  Button({type:ButtonType.Normal}).height('23%').width('95%').margin({top:5})
                    .backgroundImage($r('app.media.img2')).backgroundImageSize(ImageSize.FILL).onClick(()=>{
                      router.pushUrl({
                        url:'pages/why_to_eat_noodles'
                      })
                  })
                  Row({space:10}){
                    Text().width('48%').height('80%').borderRadius(10)
                      .backgroundImage($r('app.media.img3')).backgroundImageSize(ImageSize.Contain)
                    Text().width('48%').height('80%').borderRadius(10)
                      .backgroundImage($r('app.media.img4')).backgroundImageSize(ImageSize.Contain)
                  }.height('16%').width('95%').justifyContent(FlexAlign.Center)
                  Text('每日热门菜谱').height('7%').width('50%').fontSize(20).fontWeight(FontWeight.Bold)
                    .backgroundColor(Color.White).alignSelf(ItemAlign.Start).padding({left:10})
                  Scroll(this.myscrhor) {
                    Row({space:10}) {
                      Text().height('100%').width('40%')
                        .margin({left:10}).backgroundImage($r('app.media.img5')).backgroundImageSize(ImageSize.Contain)
                      Text().height('100%').width('40%')
                        .backgroundImage($r('app.media.img6')).backgroundImageSize(ImageSize.Contain)
                      Text().height('100%').width('40%')
                        .backgroundImage($r('app.media.img7')).backgroundImageSize(ImageSize.Contain)
                      Text().height('100%').width('40%')
                        .margin({right:10})
                        .backgroundImage($r('app.media.img8')).backgroundImageSize(ImageSize.Contain)
                    }.height("33%")//.backgroundColor(Color.Red)
                    .justifyContent(FlexAlign.Center)

                  }.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)

                  Row() {
                    Text().height('100%').width('40%')
                      .margin({left:10}).backgroundImage($r('app.media.img9')).backgroundImageSize(ImageSize.Contain)
                    Column() {
                      Text('饺子皮版水煎包').height('20%').width('100%').fontSize(20)

                      Row({space:10}){
                        Text('饺子皮').height('100%').width('30%').fontSize(13)
                          .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                          .borderRadius(10)
                        Text('粉丝').height('100%').width('18%').fontSize(13)
                          .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                          .borderRadius(10)
                        Text('胡萝卜').height('100%').width('25%').fontSize(13)
                          .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                          .borderRadius(10)

                      }.height('15%').width('100%')

                    }.height('100%').width('50%')//.backgroundColor(Color.Green)
                    .margin({ left: 10})
                  }.height('24%').width('100%').margin({ top: 10})


                  Row() {
                    Text().height('100%').width('40%')
                      .margin({left:10}).backgroundImage($r('app.media.img10')).backgroundImageSize(ImageSize.Contain)
                    Column() {
                      Text('椒盐蘑菇').height('20%').width('100%').fontSize(20)
                      Row({space:10}){
                        Text('平菇').height('100%').width('25%').fontSize(13)
                          .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                          .borderRadius(10)
                      }.height('15%').width('100%').backgroundColor(Color.White)

                    }.height('100%').width('50%')
                    .margin({ left: 10 })
                  }.height('24%').width('100%').margin({ top: 7})

                }.width('100%')

              }.width('100%')
            }.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)

          }.height('92%').width('100%')//.backgroundColor(Color.Orange)


        }
        .width('100%')
      }.tabBar(this.mytabbar('推荐',0,$r('app.media.home_filled'),$r('app.media.home')))



      // 排行榜
      TabContent(){
        Scroll(){
          Column(){
            Text().width('100%').height('25%').backgroundImage($r('app.media.img2_1')).backgroundImageSize(ImageSize.FILL)
            Row() {
              Text().backgroundImage($r('app.media.img2_2')).dished()
              Column() {
                Text('土豆炖牛肉').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Row({space:10}){
                  Text('土豆').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                  Text('牛肉').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)

                }.height('15%').width('100%')

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl()
            Row() {
              Text().backgroundImage($r('app.media.img2_3')).dished()
              Column() {
                Text('红烧排骨').height('20%').width('100%').fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('蛋白质会促进男士精子质量，生个宝宝健康又漂亮').fontSize(14).width('100%')

                Row({space:10}){
                  Text('猪小排').height('100%').width('30%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                }.height('15%').width('100%').margin({top:8})

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})
            Row() {
              Text().backgroundImage($r('app.media.img2_4')).dished()
              Column() {
                Text('素烧茄子').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Row(){
                  Text('茄子(紫皮，长)').height('100%').width('60%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                }.height('15%').width('100%')

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})
            Row() {
              Text().backgroundImage($r('app.media.img2_5')).dished()
              Column() {
                Text('鲜虾丸子').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Row({space:10}){
                  Text('虾肉').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)

                }.height('15%').width('100%')

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})
            Row() {
              Text().backgroundImage($r('app.media.img2_6')).dished()
              Column() {
                Text('麻婆豆腐').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Text('维E对改善血夜循环，加速烧伤冻伤的愈合有作用').fontSize(14).width('100%')
                Row({space:10}){
                  Text('豆腐').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                  Text('肉末').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                  Text('小葱').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                  Text('大蒜').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                }.height('15%').width('100%').margin({top:8})

                Row({space:10}){
                  Text('郫县豆瓣酱').height('100%').width('45%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)
                }.height('15%').width('100%').margin({top:8})



              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})
            Row() {
              Text().backgroundImage($r('app.media.img2_7')).dished()
              Column() {
                Text('疙瘩汤').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Row({space:10}){
                  Text('面粉').height('100%').width('18%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)

                }.height('15%').width('100%')

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})
            Row() {
              Text().backgroundImage($r('app.media.img2_8')).dished()
              Column() {
                Text('辣子鸡').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)

                Row({space:10}){
                  Text('黑脚土鸡').height('100%').width('35%').fontSize(13)
                    .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
                    .borderRadius(10)

                }.height('15%').width('100%')

              }.height('100%').width('50%')//.backgroundColor(Color.Green)
              .margin({ left: 10})
            }.mystl().margin({ top: 20})

          }.width('100%')

        }
      }.tabBar(this.mytabbar('排行榜',1,$r('app.media.rank_filled'),$r('app.media.rank')))
      //吃什么
      TabContent(){
        Scroll() {
          Column() {
            Text().width('100%').height('22%').backgroundImage($r('app.media.img3_0')).backgroundImageSize(ImageSize.FILL)
            Column({space:18}) {
              Text().myfun().backgroundImage($r('app.media.img3_1'))
              Text().myfun().backgroundImage($r('app.media.img3_2'))
              Text().myfun().backgroundImage($r('app.media.img3_3'))
              Text().myfun().height('45%').backgroundImage($r('app.media.img3_4'))
              Row({space:10}){
                 Column(){
                    Text('减肥吃什么？').height('42%').fontSize(22).fontColor('#a38ba5')
                      .margin({top:5})
                    Text('精选食谱1238篇').height('40%').fontSize(18).borderRadius(20)
                      .fontColor(Color.White).backgroundColor('#a889a8').width('95%').textAlign(TextAlign.Center)
                 }.myfun().height('100%').width('48%').backgroundColor('#f5f0f4')
                  Column(){
                  Text('贫血吃什么？').height('42%').fontSize(22).fontColor('#f5b475')
                    .margin({top:5})
                  Text('精选食谱2732篇').height('40%').fontSize(18).borderRadius(20)
                    .fontColor(Color.White).backgroundColor('#f7b470').width('95%').textAlign(TextAlign.Center)
                }.myfun().height('100%').width('48%').backgroundColor('#fff5ec')
              }.width('95%').height('15%')
            }

          }.width('100%')
        }
      }.tabBar(this.mytabbar('吃什么',2,$r('app.media.whattoeat_filled'),$r('app.media.what_to_eat')))
      //我的
      TabContent(){
       Column(){
         Column(){
           Row({space:10}){
              Text().height(35).width(35).backgroundImage($r('app.media.ic_public_email')).backgroundImageSize(ImageSize.FILL)
              Text().height(35).width(35).margin({right:10}).backgroundImage($r('app.media.ic_public_settings')).backgroundImageSize(ImageSize.FILL)
            }.height('12%').width('100%').justifyContent(FlexAlign.End)
           Row(){
              Text("Hi，\n冲228").fontSize(30).fontWeight(FontWeight.Bold).margin({left:10})
              Button().height(80).width(80).borderRadius(90).backgroundColor(Color.Green).margin({left:'49%'})
                .backgroundImage($r('app.media.headimg')).backgroundImageSize(ImageSize.FILL)
                .onClick(()=>{
                  router.pushUrl({
                    url: 'pages/edit_info'
                  })
                })
           }.height('20%').width('100%').margin({top:10})
           Row(){
             Column() {
               Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
                 .height('50%')
               Text("访客").fontSize(15).width('23%').textAlign(TextAlign.Center)
                 .height('30%')
             }.height('100%')
             Column() {
               Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
                 .height('50%')
               Text("粉丝").fontSize(15).width('23%').textAlign(TextAlign.Center)
                 .height('30%')
             }.height('100%')
             Column() {
               Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
                 .height('50%')
               Text("关注").fontSize(15).width('23%').textAlign(TextAlign.Center)
                 .height('30%')
             }.height('100%')
             Column() {
               Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
                 .height('50%')
               Text("发布").fontSize(15).width('23%').textAlign(TextAlign.Center)
                 .height('30%')
             }.height('100%')

           }.height('18%').width('100%').justifyContent(FlexAlign.Center)
           .margin({top:'45%'})

         }.backgroundColor(Color.Orange).stlfull().backgroundImage($r('app.media.img4_1')).backgroundImageSize(ImageSize.FILL)

         Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
           Button({type:ButtonType.Normal}){
             Text('我的收藏').fontWeight(this.cur===0?FontWeight.Bold:FontWeight.Normal).fontSize(20)
           }.onClick(()=>{
             this.cur=0;
             this.button1width = this.expwidth;
             this.button2width = this.dewidth;
           }).width(this.button1width).height('95%').margin({left:10})
           .backgroundColor(this.cur===0? '#ffe854':'#eef2f1').borderRadius(10)
           .animation({
             duration: 100,
             curve:Curve.Linear,
             iterations: 1,
           })
           Button({type:ButtonType.Normal}){
             Text('浏览历史').fontWeight(this.cur===1?FontWeight.Bold:FontWeight.Normal).fontSize(20)
           }.onClick(()=>{
             this.cur=1;
             this.button1width = this.dewidth;
             this.button2width = this.expwidth;
           }).width(this.button2width).height('95%').margin({right:10})
           .backgroundColor(this.cur===1? '#ffe854':'#eef2f1').borderRadius(10)
           .animation({
             duration: 100,
             curve:Curve.Linear,
             iterations: 1,
           })
         }
         .margin({top:10}).height('7%')

         Tabs({index:this.cur}){
           TabContent(){
             Column() {
               Text().width(170).height(170).backgroundImage($r('app.media.ic_public_favor')).backgroundImageSize(ImageSize.FILL)
               Text('暂无收藏').margin({top:10}).fontColor('#9a9a9a')
             }
           }
           TabContent(){}
         }.height('40%').barHeight(0).animationDuration(1)
         .margin({top:10}).scrollable(false)


        }
      }.tabBar(this.mytabbar('我的',3,$r('app.media.mine_filled'),$r('app.media.mine')))

    }.onChange((index:number)=>{
        this.currentIndex = index
    }).barPosition(BarPosition.End).barHeight('8%').scrollable(false).animationDuration(1)



  }
}
demo
推荐页

排行榜

吃什么​​​​​​​

我的

其他跳转页面

你知道夏至为什么要吃面吗
代码
import { LengthMetrics, router } from '@kit.ArkUI'

@Styles function myfun(){
  .height('95%').width('48%')
}
@Entry
@Component
struct noodles{
  myscr:Scroller = new Scroller()
  build() {
    Column() {
      Row() {
        Button({type:ButtonType.Circle}).backgroundImage($r('app.media.ic_public_arrow_left')).size({width:20})
          .backgroundColor(Color.White).backgroundImageSize(ImageSize.FILL).onClick(() => {
          router.back()
        })
        Text("夏至除了吃面，你知道还要吃什么吗?").fontSize(18)
      }.height('5%').width('100%').margin({ top: 2 })
      Scroll(this.myscr) {
        Column() {
          Text()
            .width('100%')
            .height('50%')
            .backgroundColor(Color.Green)
            .backgroundImage($r('app.media.img5_1'))
            .backgroundImageSize(ImageSize.FILL)
          Text("夏至除了吃面，你知道还要吃什么吗?")
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('95%')
            .padding({ left: 5 })
            .margin({ top: 4 })
            .height('5%')
            .textAlign(TextAlign.Start)
          Text("古语有云：“至者，极也”。夏至，是北半球一年中白昼最长的一天。过了夏至，气温将会日渐升高，" +
            "一年中最热的时候随即到来，适时养生是非常重要的。下面大家一起了解下夏至吃什么养生，" +
            "夏至的饮食习俗有哪些吧！").maxLines(5).lineSpacing(LengthMetrics.vp(10)).width('95%')

          Column() {
            Text('一、夏至有哪些饮食习俗？').height('5%')
              .fontColor(Color.Red).fontSize(20)
            Text('/夏至面/').fontWeight(FontWeight.Bold).fontSize(18)
            Text('俗话说，“吃过夏至面，一天短一线”。按照习惯夏至这一天要吃面，夏至吃面不仅有以面食敬神、' +
              '庆祝丰收的喜悦，而且也是尝新之意。夏至前新麦收获，新麦面粉也随之上市，新麦面粉不论是口感' +
              '还是营养都是最佳的，人们便纷纷使用新麦面粉做成面条汲取营养，以达到尝新目的。夏至面多以凉面' +
              '为主，此时高温酷暑、天气炎热，吃一些冷的面条可以开胃降火，而又不会因为寒凉损害身体健康。')
              .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
            Row({ space: 10 }) {
              Text().myfun().backgroundImage($r('app.media.img5_2'))
                .backgroundImageSize(ImageSize.FILL)
              Text().myfun().backgroundImage($r('app.media.img5_3')).backgroundImageSize(ImageSize.FILL)
            }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })

            Row({ space: 10 }) {
              Text().myfun().backgroundImage($r('app.media.img5_4')).backgroundImageSize(ImageSize.FILL)
              Text().myfun().backgroundImage($r('app.media.img5_5')).backgroundImageSize(ImageSize.FILL)
            }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
          }.width('95%')

          Column() {
            Text('二、夏至养生有哪些要点?').height('5%')
              .fontColor(Color.Red).fontSize(20)
            Column() {
              Text('1、清淡饮食，多吃“苦”').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
                .textAlign(TextAlign.Start)

              Text('夏至饮食宜清淡，可以多吃些苦菜类蔬菜，如苦瓜、苦菊、苦菜等。' +
                '因苦味食物具有除燥祛湿、清凉解暑的作用，夏天吃能帮助体内毒素排除，缓解夏季炎热天气带来的不适。')
                .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_6'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_7'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_8'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_9'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
            }

            Column() {
              Text('2、晚餐忌食生冷食物。').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
                .textAlign(TextAlign.Start)

              Text('夏季夜短，晚餐最好不要吃生冷、粘腻之物，否则容易引起腹胀、吐泻等肠胃不适症状。将食物做成全熟' +
                '，可以杀死潜藏的细菌和病毒，吃起来也更加安全、放心')
                .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_10'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_11'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_12'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_13'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
            }

            Column() {
              Text('3、多喝汤、多饮水').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
                .textAlign(TextAlign.Start)

              Text('夏至时节气温高，人体每天的排汗量会明显增加，如果不能及时补充，很容易造成身体缺水状态。多喝汤' +
                '、多饮水，能够缓解疲劳，促进新陈代谢，使人身体强健')
                .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_14'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_15'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })

              Row({ space: 10 }) {
                Text()
                  .myfun()
                  .backgroundColor(Color.Gray)
                  .backgroundImage($r('app.media.img5_16'))
                  .backgroundImageSize(ImageSize.FILL)
                Text()
                  .myfun()
                  .backgroundColor(Color.Green)
                  .backgroundImage($r('app.media.img5_17'))
                  .backgroundImageSize(ImageSize.FILL)
              }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
            }

            Column() {
              Text('4、适量锻炼。').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
                .textAlign(TextAlign.Start)

              Text("到了夏至，天气炎热，想要身体更加强健，可以适当进行锻炼。锻炼的时间，最好选择在清晨" +
                "或傍晚天气较为凉爽的时进行，场地可选择在河湖水边、" +
                "公园庭院等空气清新的地方，锻炼的项目以散步、打太极拳、做广播体操为好，不宜做剧烈运动。")
                .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
              Text("好啦，今天的美食分享就到这里啦，你夏至的时候打算吃什么呢？欢迎大家留言分享哦～")
                .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 }).margin({ bottom: 8 })

            }.height('38%')

          }.width('95%')

        }.width('100%')
      }.scrollable(ScrollDirection.Vertical)
    }
  }

}
demo

个人信息编辑页
代码
import { Prompt, router } from '@kit.ArkUI'

@Entry
@Component
struct edit{
  build() {
   Column(){
     Row() {
       Button().height(30).width(30).margin({left:10}).backgroundImage($r('app.media.ic_public_arrow_left'))
         .backgroundColor(Color.White).backgroundImageSize(ImageSize.FILL)
         .onClick(()=>{
           router.back()
         })

       Text('编辑个人信息').fontSize(18).margin({left:80})
     }.height(40).width('100%').margin({top:5})
     Button().width(150).height(150).borderRadius(90).backgroundColor(Color.Gray).margin({top:20})
       .onClick(()=>{
         AlertDialog.show({
           title: '未授权',
           message: '需允许摄像头权限和访问相册权限才能发布图片，请开启后重试',
           autoCancel: false,
           alignment: DialogAlignment.Center,
           offset: { dx: 0, dy: 0 },
           gridCount: 5,
           primaryButton: {
             value: '去开启',
             fontColor: Color.Blue,
             action: () => {
               console.info('Button-clicking callback')
             },
           },
           secondaryButton: {
             value: '取消',
             fontColor: Color.Blue,
             action: () => {
               console.info('Button-cancel callback')
             },
           },

         })


       }).backgroundImage($r('app.media.headimg')).backgroundImageSize(ImageSize.FILL)

     Text('冲228').fontWeight(FontWeight.Bold).height(50).fontSize(25)
     TextInput({placeholder:'点击添加签名'}).backgroundColor(Color.White).textAlign(TextAlign.Center)
       .width('40%')
     Text('如果修改头像时遇到点对勾没有反应的情况\n可以尝试退出本页重试').margin({top:140})
       .textAlign(TextAlign.Center)



   }.height('100%').width('100%')
  }
}
demo

四、总结

在项目编写中，我感受到了鸿蒙开发工具的强大，目前鸿蒙系统还处于测试阶段，其开发前景广泛。

附

项目中用到的    图片资源​​​​​​​

m0_73641260
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值