鸿蒙应用步伐开辟项目 美食杰app （提供源代码以及图片资源） ...

海哥  金牌会员 | 2024-12-12 13:41:33 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 993|帖子 993|积分 2979

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

鸿蒙应用开辟是基于华为的鸿蒙操作体系（HarmonyOS）进行的应用步伐开辟。鸿蒙体系旨在提供跨装备的统一体验，支持智能手机、平板、电视、物联网装备等多种终端。
一、开辟工具下载链接

DevEco Studio下载链接
点击下载，一直默认操作就行
二、项目展示

项目效果演示
三、源代码

接待页

代码

  1. import { router } from '@kit.ArkUI'
  3. @Entry
  4. @Component
  5. struct welcome{
  7.   build(){
  8.     Row() {
  9.       Image($r('app.media.welcome')).width('100%').height('100%')
  10.     }
  11.   }
  12.   onPageShow(): void {
  13.     setTimeout(()=>{
  14.       router.replaceUrl({
  15.         url:'pages/register'
  16.       })
  17.     },2000) //实现定时跳转，当进入app首先加载welcome pages,2秒后进入注册页
  18.   }
  19. }
复制代码
demo


注册页

代码

  1. import { font, Prompt, router } from '@kit.ArkUI';
  2. import { text } from '@kit.ArkGraphics2D';
  4. export class user_account{
  5.   username:string
  6.   password:string
  7.   constructor(pname:string,pwd:string) {
  8.     this.username = pname
  9.     this.password = pwd
  10.   }
  11. }
  13. @Entry
  14. @Component
  15. struct register{
  17.   @State username:string = "";
  18.   @State password:string = "";
  19.   @State conf_psd:string = "";
  21.   build() {
  22.     Column({space:15}){
  23.       //顶部应用图标
  24.       Text().width(150).height(150).borderRadius(90).margin({top:80})
  25.         .backgroundImage($r('app.media.icon')).backgroundImageSize(ImageSize.FILL)
  26.       //三个输入框及注册按钮
  27.       Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
  28.         TextInput({ placeholder: '输入用户名' }).width(300).type(InputType.USER_NAME).onChange(() => {
  29.         }).onChange((value: string) => {
  30.           this.username = value
  31.         }).maxLength(15)
  32.         TextInput({ placeholder: '输入密码' }).width(300).type(InputType.Password).onChange((value: string) => {
  33.           this.password = value
  34.         }).maxLength(15)
  35.         TextInput({ placeholder: '确认密码' }).width(300).type(InputType.Password).onChange((value: string) => {
  36.           this.conf_psd = value
  37.         }).maxLength(15)
  38.         Button('注册', { type: ButtonType.Normal, stateEffect: true }).width(150)
  39.           .onClick(() => {
  40.             if (this.username === "") {
  41.               //用户名为空，弹窗提示
  42.               Prompt.showToast({
  43.                 message: "用户名不能为空",
  44.                 duration: 1000
  45.               })
  46.             } else {
  47.               //密码为空，弹窗提示
  48.               if (this.password === "")
  49.                 Prompt.showToast({
  50.                   message: "密码不能为空",
  51.                   duration: 1000
  52.                 })
  53.               else {
  54.                 //确认密码为空，弹窗提示
  55.                 if (this.conf_psd === "")
  56.                   Prompt.showToast({
  57.                     message: "未确认密码",
  58.                     duration: 1000
  59.                   })
  60.                 else if (this.conf_psd != this.password) {
  61.                   //密码不一致，弹窗提示
  62.                   Prompt.showToast({
  63.                     message: "密码不一致",
  64.                     duration: 1000
  65.                   })
  66.                 } else {
  67.                   //成功注册，弹窗显示用户名及密码
  68.                   Prompt.showToast({
  69.                     message: "注册成功\n" + "用户名: " + this.username + '\n' + "密码: " + this.password,
  70.                     duration: 1000
  71.                   })
  72.                   let user: user_account = new user_account("", "")
  73.                   user.username = this.username
  74.                   user.password = this.password
  75.                   router.pushUrl({
  76.                     url: 'pages/login',
  77.                     params: user,
  78.                   })
  79.                 }
  80.               }
  81.             }
  82.           })
  83.       }.height('40%').width('95%').backgroundColor(Color.White)
  84.       .borderRadius(20)
  85.       .margin({top:40})
  86.     }.height('100%')
  87.     .width('100%')
  88.     .alignItems(HorizontalAlign.Center)
  89.     .backgroundImage($r('app.media.welcome_back')) //插入背景图片
  90.     .backgroundImageSize(ImageSize.FILL)
  91.   }
  92. }
复制代码
demo



登入页面

代码

  1. import { font, Prompt, router } from '@kit.ArkUI';
  2. import { text } from '@kit.ArkGraphics2D';
  3. import { user_account } from './register';
  5. @Entry
  6. @Component
  7. struct login{
  9.   private  user:user_account=  router.getParams() as user_account;
  10.   @State username:string = ""
  11.   @State password:string = "";
  13.   build() {
  14.     Column({space:15}){
  15.       Text().width(150).height(150).borderRadius(90).margin({top:80})
  16.         .backgroundImage($r('app.media.icon')).backgroundImageSize(ImageSize.FILL)
  17.       Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
  18.         TextInput({ placeholder: '输入用户名' }).width(300).type(InputType.Normal).onChange(() => {
  19.         }).onChange((value: string) => {
  20.           this.username = value
  21.         }).maxLength(15)
  23.         TextInput({ placeholder: '输入密码' }).width(300).type(InputType.Password).onChange((value: string) => {
  24.           this.password = value
  25.         })
  26.           .maxLength(15)
  27.         Button('登入', { type: ButtonType.Normal, stateEffect: true }).width(150)
  28.           .onClick(() => {
  29.             if (this.username === "") {
  30.               Prompt.showToast({
  31.                 message: "用户名为空",
  32.                 duration: 1000
  33.               })
  34.             }
  35.             else {
  36.               if (this.password === "")
  37.                 Prompt.showToast({
  38.                   message: "密码为空",
  39.                   duration: 1000
  40.                 })
  41.               else {
  42.                 if (this.username === this.user.username) {
  43.                   if (this.password === this.user.password)
  44.                     router.pushUrl({
  45.                       url: 'pages/Index'
  46.                     })
  47.                   else {
  48.                     Prompt.showToast({
  49.                       message: "密码错误",
  50.                       duration: 1000
  51.                     })
  52.                   }
  54.                 } else {
  55.                   Prompt.showToast({
  56.                     message: "账号不存在",
  57.                     duration: 1000
  58.                   })
  59.                 }
  61.               }
  62.             }
  63.           })
  64.       }.height('30%').width('95%').backgroundColor(Color.White).margin({top:50}).borderRadius(20)
  66.     }.height('100%')
  67.     .width('100%')
  68.     .backgroundImage($r('app.media.signin_back'))
  69.     .backgroundImageSize(ImageSize.FILL)
  70.     .alignItems(HorizontalAlign.Center)
  71.    // .justifyContent(FlexAlign.Center)
  72.   }
  73. }
复制代码
demo



应用页面

代码

由于采用Tabs()组件，故所有页面代码写都在一个文件里
  1. import { LengthMetrics, router } from '@kit.ArkUI';
  2. import sendableColorSpaceManager from '@ohos.graphics.sendableColorSpaceManager';
  5. @Entry
  6. @Component
  7. struct Index {
  8.   @State message: string = 'Hello World';
  9.   myscr: Scroller = new Scroller();
  10.   myscrhor:Scroller = new Scroller();
  11.   @State currentIndex:number = 0;
  12.   @State cur:number = 0;
  13.   @State expwidth:string = "60%"
  14.   @State dewidth:string = "30%"
  15.   @State button1width:string = this.expwidth
  16.   @State button2width:string = this.dewidth
  17.   myindic:DotIndicator = new DotIndicator();
  18.   myswiscr:SwiperController = new SwiperController()
  19.   @Styles myfun(){
  20.     .width('95%').height('22%')
  21.      .borderRadius(10).backgroundImageSize(ImageSize.FILL)
  22.   }
  23.   @Styles mystl(){
  24.     .width('100%').height('20%')
  25.   }
  26.   @Styles stlfull(){
  27.     .width('100%').height('50%')
  28.   }
  29.   @Styles dished(){
  30.     .height('100%').width('40%').borderRadius(10)
  31.     .margin({left:10}).backgroundImageSize(ImageSize.FILL)
  32.   }
  33.   @Builder mytabbar(title:string,Index:number,selectedimg:Resource,defimg:Resource){
  34.        Column(){
  35.          Text().height(45).width(45)
  36.            .backgroundImage(Index===this.currentIndex?selectedimg:defimg).backgroundImageSize(ImageSize.FILL)
  37.          Text(title).fontSize(14).textAlign(TextAlign.Center).fontColor(Index===this.currentIndex?Color.Red:Color.Black)
  38.            .height(20).width(60)
  39.        }
  40.   }
  42.   build() {
  43.     Tabs(){
  45.       //推荐页面
  46.       TabContent(){
  47.         Column() {
  48.           //顶部搜索框
  49.           Row({ space: 10 }) {
  50.             Text().width(30).height('50%').backgroundImage($r('app.media.ic_public_add_norm'))
  51.               .backgroundImageSize(ImageSize.Contain).margin({right:10})
  52.             Search({ placeholder: '搜索菜谱、食材' }).backgroundColor('#efefef').width(240).height('60%')
  53.             Text().width(30).height('50%').backgroundImage($r('app.media.ic_public_view_grid'))
  54.               .backgroundImageSize(ImageSize.Contain).margin({left:10})//.backgroundColor(Color.Red)
  55.           }
  56.           .height('8%')
  57.           .width('100%')
  58.           .margin({ top: 5 })
  59.           .justifyContent(FlexAlign.Center)
  61.           //滚动页面
  62.           Column() {
  63.             Scroll(this.myscr) {
  64.               Column() {
  65.                 Stack({alignContent: Alignment.Top}) {
  66.                   Swiper(this.myswiscr) {
  67.                     Column() {
  68.                       Text('今日早餐 ')
  69.                         .fontWeight(FontWeight.Bold)
  70.                         .width('100%')
  71.                         .height('9%')
  72.                         .padding({ left: 10 })
  73.                         .fontSize(25)
  74.                       Text().height('53%').width('95%')
  75.                         .backgroundImage($r('app.media.img_4')).backgroundImageSize(ImageSize.Contain)
  76.                     }
  78.                     Column() {
  79.                       Text('今日午餐 ')
  80.                         .fontWeight(FontWeight.Bold)
  81.                         .width('100%')
  82.                         .height('9%')
  83.                         .padding({ left: 10 })
  84.                         .fontSize(25)
  85.                       Text().height('53%').width('95%')
  86.                         .backgroundImage($r('app.media.img1')).backgroundImageSize(ImageSize.Contain)
  87.                     }
  89.                     Column() {
  90.                       Text('今日下午茶')
  91.                         .fontWeight(FontWeight.Bold)
  92.                         .width('100%')
  93.                         .height('9%')
  94.                         .padding({ left: 10 })
  95.                         .fontSize(25)
  96.                       Text().height('53%').width('95%')
  97.                         .backgroundImage($r('app.media.img_1')).backgroundImageSize(ImageSize.Contain)
  98.                     }
  100.                     Column() {
  101.                       Text('今日晚餐 ')
  102.                         .fontWeight(FontWeight.Bold)
  103.                         .width('100%')
  104.                         .height('9%')
  105.                         .padding({ left: 10 })
  106.                         .fontSize(25)
  107.                       Text().height('53%').width('95%')
  108.                         .backgroundImage($r('app.media.img_3')).backgroundImageSize(ImageSize.Contain)
  109.                     }
  111.                     Column() {
  112.                       Text('今日夜宵 ')
  113.                         .fontWeight(FontWeight.Bold)
  114.                         .width('100%')
  115.                         .height('9%')
  116.                         .padding({ left: 10 })
  117.                         .fontSize(25)
  118.                       Text().height('53%').width('95%')
  119.                         .backgroundImage($r('app.media.img_2')).backgroundImageSize(ImageSize.Contain)
  120.                     }
  121.                   }.autoPlay(true).indicator(this.myindic.selectedColor(Color.Red))
  122.                   .indicator(this.myindic.selectedItemWidth(10))
  123.                   .indicator(this.myindic.selectedItemWidth(10))
  124.                   .indicator(this.myindic.itemWidth(10))
  125.                   .indicator(this.myindic.itemHeight(10))
  127.                   Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.End,alignItems:ItemAlign.Center}) {
  128.                     Text('更多三餐推荐 >')
  129.                       .fontWeight(FontWeight.Bold)
  130.                       .width('40%')
  131.                       .height('75%')
  132.                       .backgroundColor('#ffe854')
  133.                       .textAlign(TextAlign.Center)
  134.                       .margin({right:15})
  135.                       .fontSize(16)
  136.                       .borderRadius(40)
  137.                   }.width('100%').height('8%')
  139.                 }
  140.                 Column() {
  141.                   Text('二十四节气养生食谱')
  142.                     .backgroundColor(Color.Green)
  143.                     .fontSize(15)
  144.                     .fontColor(Color.White)
  145.                     .height('10%')
  146.                     .width(150)
  147.                     .textAlign(TextAlign.Center)
  148.                     .alignSelf(ItemAlign.Start)
  149.                     .borderRadius({ topLeft: 15, bottomRight: 15 })
  150.                   Text('夏至').fontWeight(FontWeight.Bold).fontSize(30).height('15%')
  151.                   Text('6月21日-7月6日').height('8%').fontSize(12).fontColor('#b0b0b0')
  152.                   Row({ space: 10 }) {
  153.                     Text("面条")
  154.                       .width('12%')
  155.                       .height(25)
  156.                       .textAlign(TextAlign.Center)
  157.                       .borderRadius(20)
  158.                       .fontColor('#6a9c5e')
  159.                       .backgroundColor('#eff3ee')
  160.                     Text("鸡蛋")
  161.                       .width('12%')
  162.                       .height(25)
  163.                       .textAlign(TextAlign.Center)
  164.                       .borderRadius(20)
  165.                       .fontColor('#6a9c5e')
  166.                       .backgroundColor('#eff3ee')
  167.                     Text("苦瓜")
  168.                       .width('12%')
  169.                       .height(25)
  170.                       .textAlign(TextAlign.Center)
  171.                       .borderRadius(20)
  172.                       .fontColor('#6a9c5e')
  173.                       .backgroundColor('#eff3ee')
  174.                     Text("苦菊")
  175.                       .width('12%')
  176.                       .height(25)
  177.                       .textAlign(TextAlign.Center)
  178.                       .borderRadius(20)
  179.                       .fontColor('#6a9c5e')
  180.                       .backgroundColor('#eff3ee')
  181.                     Text("丝瓜")
  182.                       .width('12%')
  183.                       .height(25)
  184.                       .textAlign(TextAlign.Center)
  185.                       .borderRadius(20)
  186.                       .fontColor('#6a9c5e')
  187.                       .backgroundColor('#eff3ee')
  188.                   }.height('10%').margin({ top: '2%' })
  190.                   Row({ space: 10 }) {
  191.                     Row() {
  192.                       Text('健脾养胃，来碗夏至面。')
  193.                         .width('90%')
  194.                         .height('100%')
  195.                         .fontSize(18)
  196.                         .fontColor('#6f6564')
  197.                       Text('>')
  198.                         .width('10%')
  199.                         .height('100%')
  200.                         .fontSize(18)
  201.                         .fontColor('#6f6564')
  203.                     }
  204.                     .width('48%')
  205.                     .height('97%')
  206.                     .borderRadius(10)
  207.                     .backgroundColor('#ffedeb')
  209.                     Row() {
  210.                       Text('养心安神，吃棵夏至蛋。')
  211.                         .width('90%')
  212.                         .height('100%')
  213.                         .fontSize(18)
  214.                         .fontColor('#6f6564')
  215.                       Text('>')
  216.                         .width('10%')
  217.                         .height('100%')
  218.                         .fontSize(18)
  219.                         .fontColor('#6f6564')
  220.                     }
  221.                     .width('48%')
  222.                     .height('97%')
  223.                     .borderRadius(10)
  224.                     .backgroundColor('#fef4ea')
  226.                   }.height('25%').width('100%')//.backgroundColor(Color.Orange)
  227.                   .justifyContent(FlexAlign.Center)
  228.                   .margin({top:5})
  231.                   Row({ space: 10 }) {
  232.                     Row() {
  233.                       Text('清热解暑，多吃“苦”味食物。')
  234.                         .width('90%')
  235.                         .height('100%')
  236.                         .fontSize(18)
  237.                         .fontColor('#6f6564')
  238.                       Text('>')
  239.                         .width('10%')
  240.                         .height('100%')
  241.                         .fontSize(18)
  242.                         .fontColor('#6f6564')
  244.                     }
  245.                     .width('48%')
  246.                     .height('97%')
  247.                     .borderRadius(10)
  248.                     .backgroundColor('#f6f3fe')
  250.                     Row() {
  251.                       Text('补充水分，多喝汤粥多喝水。')
  252.                         .width('90%')
  253.                         .height('100%')
  254.                         .fontSize(18)
  255.                         .fontColor('#6f6564')
  256.                       Text('>')
  257.                         .width('10%')
  258.                         .height('100%')
  259.                         .fontSize(18)
  260.                         .fontColor('#6f6564')
  261.                     }
  262.                     .width('48%')
  263.                     .height('97%')
  264.                     .borderRadius(10)
  265.                     .backgroundColor('#edf3ff')
  267.                   }.height('25%').width('100%')//.backgroundColor(Color.Orange)
  268.                   .justifyContent(FlexAlign.Center).margin({top:5})
  270.                 }.backgroundColor('#fdfdfd').height('41%').width('95%').borderRadius(15).margin({top:10})
  272.                 Column() {
  273.                   Button({type:ButtonType.Normal}).height('23%').width('95%').margin({top:5})
  274.                     .backgroundImage($r('app.media.img2')).backgroundImageSize(ImageSize.FILL).onClick(()=>{
  275.                       router.pushUrl({
  276.                         url:'pages/why_to_eat_noodles'
  277.                       })
  278.                   })
  279.                   Row({space:10}){
  280.                     Text().width('48%').height('80%').borderRadius(10)
  281.                       .backgroundImage($r('app.media.img3')).backgroundImageSize(ImageSize.Contain)
  282.                     Text().width('48%').height('80%').borderRadius(10)
  283.                       .backgroundImage($r('app.media.img4')).backgroundImageSize(ImageSize.Contain)
  284.                   }.height('16%').width('95%').justifyContent(FlexAlign.Center)
  285.                   Text('每日热门菜谱').height('7%').width('50%').fontSize(20).fontWeight(FontWeight.Bold)
  286.                     .backgroundColor(Color.White).alignSelf(ItemAlign.Start).padding({left:10})
  287.                   Scroll(this.myscrhor) {
  288.                     Row({space:10}) {
  289.                       Text().height('100%').width('40%')
  290.                         .margin({left:10}).backgroundImage($r('app.media.img5')).backgroundImageSize(ImageSize.Contain)
  291.                       Text().height('100%').width('40%')
  292.                         .backgroundImage($r('app.media.img6')).backgroundImageSize(ImageSize.Contain)
  293.                       Text().height('100%').width('40%')
  294.                         .backgroundImage($r('app.media.img7')).backgroundImageSize(ImageSize.Contain)
  295.                       Text().height('100%').width('40%')
  296.                         .margin({right:10})
  297.                         .backgroundImage($r('app.media.img8')).backgroundImageSize(ImageSize.Contain)
  298.                     }.height("33%")//.backgroundColor(Color.Red)
  299.                     .justifyContent(FlexAlign.Center)
  301.                   }.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
  303.                   Row() {
  304.                     Text().height('100%').width('40%')
  305.                       .margin({left:10}).backgroundImage($r('app.media.img9')).backgroundImageSize(ImageSize.Contain)
  306.                     Column() {
  307.                       Text('饺子皮版水煎包').height('20%').width('100%').fontSize(20)
  309.                       Row({space:10}){
  310.                         Text('饺子皮').height('100%').width('30%').fontSize(13)
  311.                           .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  312.                           .borderRadius(10)
  313.                         Text('粉丝').height('100%').width('18%').fontSize(13)
  314.                           .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  315.                           .borderRadius(10)
  316.                         Text('胡萝卜').height('100%').width('25%').fontSize(13)
  317.                           .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  318.                           .borderRadius(10)
  320.                       }.height('15%').width('100%')
  322.                     }.height('100%').width('50%')//.backgroundColor(Color.Green)
  323.                     .margin({ left: 10})
  324.                   }.height('24%').width('100%').margin({ top: 10})
  327.                   Row() {
  328.                     Text().height('100%').width('40%')
  329.                       .margin({left:10}).backgroundImage($r('app.media.img10')).backgroundImageSize(ImageSize.Contain)
  330.                     Column() {
  331.                       Text('椒盐蘑菇').height('20%').width('100%').fontSize(20)
  332.                       Row({space:10}){
  333.                         Text('平菇').height('100%').width('25%').fontSize(13)
  334.                           .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  335.                           .borderRadius(10)
  336.                       }.height('15%').width('100%').backgroundColor(Color.White)
  338.                     }.height('100%').width('50%')
  339.                     .margin({ left: 10 })
  340.                   }.height('24%').width('100%').margin({ top: 7})
  342.                 }.width('100%')
  344.               }.width('100%')
  345.             }.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
  347.           }.height('92%').width('100%')//.backgroundColor(Color.Orange)
  350.         }
  351.         .width('100%')
  352.       }.tabBar(this.mytabbar('推荐',0,$r('app.media.home_filled'),$r('app.media.home')))
  356.       // 排行榜
  357.       TabContent(){
  358.         Scroll(){
  359.           Column(){
  360.             Text().width('100%').height('25%').backgroundImage($r('app.media.img2_1')).backgroundImageSize(ImageSize.FILL)
  361.             Row() {
  362.               Text().backgroundImage($r('app.media.img2_2')).dished()
  363.               Column() {
  364.                 Text('土豆炖牛肉').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  366.                 Row({space:10}){
  367.                   Text('土豆').height('100%').width('18%').fontSize(13)
  368.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  369.                     .borderRadius(10)
  370.                   Text('牛肉').height('100%').width('18%').fontSize(13)
  371.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  372.                     .borderRadius(10)
  374.                 }.height('15%').width('100%')
  376.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  377.               .margin({ left: 10})
  378.             }.mystl()
  379.             Row() {
  380.               Text().backgroundImage($r('app.media.img2_3')).dished()
  381.               Column() {
  382.                 Text('红烧排骨').height('20%').width('100%').fontSize(20)
  383.                   .fontWeight(FontWeight.Bold)
  384.                 Text('蛋白质会促进男士精子质量，生个宝宝健康又漂亮').fontSize(14).width('100%')
  386.                 Row({space:10}){
  387.                   Text('猪小排').height('100%').width('30%').fontSize(13)
  388.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  389.                     .borderRadius(10)
  390.                 }.height('15%').width('100%').margin({top:8})
  392.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  393.               .margin({ left: 10})
  394.             }.mystl().margin({ top: 20})
  395.             Row() {
  396.               Text().backgroundImage($r('app.media.img2_4')).dished()
  397.               Column() {
  398.                 Text('素烧茄子').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  400.                 Row(){
  401.                   Text('茄子(紫皮，长)').height('100%').width('60%').fontSize(13)
  402.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  403.                     .borderRadius(10)
  404.                 }.height('15%').width('100%')
  406.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  407.               .margin({ left: 10})
  408.             }.mystl().margin({ top: 20})
  409.             Row() {
  410.               Text().backgroundImage($r('app.media.img2_5')).dished()
  411.               Column() {
  412.                 Text('鲜虾丸子').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  414.                 Row({space:10}){
  415.                   Text('虾肉').height('100%').width('18%').fontSize(13)
  416.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  417.                     .borderRadius(10)
  419.                 }.height('15%').width('100%')
  421.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  422.               .margin({ left: 10})
  423.             }.mystl().margin({ top: 20})
  424.             Row() {
  425.               Text().backgroundImage($r('app.media.img2_6')).dished()
  426.               Column() {
  427.                 Text('麻婆豆腐').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  429.                 Text('维E对改善血夜循环，加速烧伤冻伤的愈合有作用').fontSize(14).width('100%')
  430.                 Row({space:10}){
  431.                   Text('豆腐').height('100%').width('18%').fontSize(13)
  432.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  433.                     .borderRadius(10)
  434.                   Text('肉末').height('100%').width('18%').fontSize(13)
  435.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  436.                     .borderRadius(10)
  437.                   Text('小葱').height('100%').width('18%').fontSize(13)
  438.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  439.                     .borderRadius(10)
  440.                   Text('大蒜').height('100%').width('18%').fontSize(13)
  441.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  442.                     .borderRadius(10)
  443.                 }.height('15%').width('100%').margin({top:8})
  445.                 Row({space:10}){
  446.                   Text('郫县豆瓣酱').height('100%').width('45%').fontSize(13)
  447.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  448.                     .borderRadius(10)
  449.                 }.height('15%').width('100%').margin({top:8})
  453.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  454.               .margin({ left: 10})
  455.             }.mystl().margin({ top: 20})
  456.             Row() {
  457.               Text().backgroundImage($r('app.media.img2_7')).dished()
  458.               Column() {
  459.                 Text('疙瘩汤').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  461.                 Row({space:10}){
  462.                   Text('面粉').height('100%').width('18%').fontSize(13)
  463.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  464.                     .borderRadius(10)
  466.                 }.height('15%').width('100%')
  468.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  469.               .margin({ left: 10})
  470.             }.mystl().margin({ top: 20})
  471.             Row() {
  472.               Text().backgroundImage($r('app.media.img2_8')).dished()
  473.               Column() {
  474.                 Text('辣子鸡').height('20%').width('100%').fontSize(20).fontWeight(FontWeight.Bold)
  476.                 Row({space:10}){
  477.                   Text('黑脚土鸡').height('100%').width('35%').fontSize(13)
  478.                     .backgroundColor('#fdf1c7').textAlign(TextAlign.Center)
  479.                     .borderRadius(10)
  481.                 }.height('15%').width('100%')
  483.               }.height('100%').width('50%')//.backgroundColor(Color.Green)
  484.               .margin({ left: 10})
  485.             }.mystl().margin({ top: 20})
  487.           }.width('100%')
  489.         }
  490.       }.tabBar(this.mytabbar('排行榜',1,$r('app.media.rank_filled'),$r('app.media.rank')))
  491.       //吃什么
  492.       TabContent(){
  493.         Scroll() {
  494.           Column() {
  495.             Text().width('100%').height('22%').backgroundImage($r('app.media.img3_0')).backgroundImageSize(ImageSize.FILL)
  496.             Column({space:18}) {
  497.               Text().myfun().backgroundImage($r('app.media.img3_1'))
  498.               Text().myfun().backgroundImage($r('app.media.img3_2'))
  499.               Text().myfun().backgroundImage($r('app.media.img3_3'))
  500.               Text().myfun().height('45%').backgroundImage($r('app.media.img3_4'))
  501.               Row({space:10}){
  502.                  Column(){
  503.                     Text('减肥吃什么？').height('42%').fontSize(22).fontColor('#a38ba5')
  504.                       .margin({top:5})
  505.                     Text('精选食谱1238篇').height('40%').fontSize(18).borderRadius(20)
  506.                       .fontColor(Color.White).backgroundColor('#a889a8').width('95%').textAlign(TextAlign.Center)
  507.                  }.myfun().height('100%').width('48%').backgroundColor('#f5f0f4')
  508.                   Column(){
  509.                   Text('贫血吃什么？').height('42%').fontSize(22).fontColor('#f5b475')
  510.                     .margin({top:5})
  511.                   Text('精选食谱2732篇').height('40%').fontSize(18).borderRadius(20)
  512.                     .fontColor(Color.White).backgroundColor('#f7b470').width('95%').textAlign(TextAlign.Center)
  513.                 }.myfun().height('100%').width('48%').backgroundColor('#fff5ec')
  514.               }.width('95%').height('15%')
  515.             }
  517.           }.width('100%')
  518.         }
  519.       }.tabBar(this.mytabbar('吃什么',2,$r('app.media.whattoeat_filled'),$r('app.media.what_to_eat')))
  520.       //我的
  521.       TabContent(){
  522.        Column(){
  523.          Column(){
  524.            Row({space:10}){
  525.               Text().height(35).width(35).backgroundImage($r('app.media.ic_public_email')).backgroundImageSize(ImageSize.FILL)
  526.               Text().height(35).width(35).margin({right:10}).backgroundImage($r('app.media.ic_public_settings')).backgroundImageSize(ImageSize.FILL)
  527.             }.height('12%').width('100%').justifyContent(FlexAlign.End)
  528.            Row(){
  529.               Text("Hi，\n冲228").fontSize(30).fontWeight(FontWeight.Bold).margin({left:10})
  530.               Button().height(80).width(80).borderRadius(90).backgroundColor(Color.Green).margin({left:'49%'})
  531.                 .backgroundImage($r('app.media.headimg')).backgroundImageSize(ImageSize.FILL)
  532.                 .onClick(()=>{
  533.                   router.pushUrl({
  534.                     url: 'pages/edit_info'
  535.                   })
  536.                 })
  537.            }.height('20%').width('100%').margin({top:10})
  538.            Row(){
  539.              Column() {
  540.                Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
  541.                  .height('50%')
  542.                Text("访客").fontSize(15).width('23%').textAlign(TextAlign.Center)
  543.                  .height('30%')
  544.              }.height('100%')
  545.              Column() {
  546.                Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
  547.                  .height('50%')
  548.                Text("粉丝").fontSize(15).width('23%').textAlign(TextAlign.Center)
  549.                  .height('30%')
  550.              }.height('100%')
  551.              Column() {
  552.                Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
  553.                  .height('50%')
  554.                Text("关注").fontSize(15).width('23%').textAlign(TextAlign.Center)
  555.                  .height('30%')
  556.              }.height('100%')
  557.              Column() {
  558.                Text("0").fontWeight(FontWeight.Bold).fontSize(25).width('23%').textAlign(TextAlign.Center)
  559.                  .height('50%')
  560.                Text("发布").fontSize(15).width('23%').textAlign(TextAlign.Center)
  561.                  .height('30%')
  562.              }.height('100%')
  564.            }.height('18%').width('100%').justifyContent(FlexAlign.Center)
  565.            .margin({top:'45%'})
  567.          }.backgroundColor(Color.Orange).stlfull().backgroundImage($r('app.media.img4_1')).backgroundImageSize(ImageSize.FILL)
  569.          Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
  570.            Button({type:ButtonType.Normal}){
  571.              Text('我的收藏').fontWeight(this.cur===0?FontWeight.Bold:FontWeight.Normal).fontSize(20)
  572.            }.onClick(()=>{
  573.              this.cur=0;
  574.              this.button1width = this.expwidth;
  575.              this.button2width = this.dewidth;
  576.            }).width(this.button1width).height('95%').margin({left:10})
  577.            .backgroundColor(this.cur===0? '#ffe854':'#eef2f1').borderRadius(10)
  578.            .animation({
  579.              duration: 100,
  580.              curve:Curve.Linear,
  581.              iterations: 1,
  582.            })
  583.            Button({type:ButtonType.Normal}){
  584.              Text('浏览历史').fontWeight(this.cur===1?FontWeight.Bold:FontWeight.Normal).fontSize(20)
  585.            }.onClick(()=>{
  586.              this.cur=1;
  587.              this.button1width = this.dewidth;
  588.              this.button2width = this.expwidth;
  589.            }).width(this.button2width).height('95%').margin({right:10})
  590.            .backgroundColor(this.cur===1? '#ffe854':'#eef2f1').borderRadius(10)
  591.            .animation({
  592.              duration: 100,
  593.              curve:Curve.Linear,
  594.              iterations: 1,
  595.            })
  596.          }
  597.          .margin({top:10}).height('7%')
  599.          Tabs({index:this.cur}){
  600.            TabContent(){
  601.              Column() {
  602.                Text().width(170).height(170).backgroundImage($r('app.media.ic_public_favor')).backgroundImageSize(ImageSize.FILL)
  603.                Text('暂无收藏').margin({top:10}).fontColor('#9a9a9a')
  604.              }
  605.            }
  606.            TabContent(){}
  607.          }.height('40%').barHeight(0).animationDuration(1)
  608.          .margin({top:10}).scrollable(false)
  611.         }
  612.       }.tabBar(this.mytabbar('我的',3,$r('app.media.mine_filled'),$r('app.media.mine')))
  614.     }.onChange((index:number)=>{
  615.         this.currentIndex = index
  616.     }).barPosition(BarPosition.End).barHeight('8%').scrollable(false).animationDuration(1)
  620.   }
  621. }
复制代码
demo

保举页



排行榜


吃什么​​​​​​​


我的


其他跳转页面

你知道夏至为什么要吃面吗

代码

  1. import { LengthMetrics, router } from '@kit.ArkUI'
  3. @Styles function myfun(){
  4.   .height('95%').width('48%')
  5. }
  6. @Entry
  7. @Component
  8. struct noodles{
  9.   myscr:Scroller = new Scroller()
  10.   build() {
  11.     Column() {
  12.       Row() {
  13.         Button({type:ButtonType.Circle}).backgroundImage($r('app.media.ic_public_arrow_left')).size({width:20})
  14.           .backgroundColor(Color.White).backgroundImageSize(ImageSize.FILL).onClick(() => {
  15.           router.back()
  16.         })
  17.         Text("夏至除了吃面，你知道还要吃什么吗?").fontSize(18)
  18.       }.height('5%').width('100%').margin({ top: 2 })
  19.       Scroll(this.myscr) {
  20.         Column() {
  21.           Text()
  22.             .width('100%')
  23.             .height('50%')
  24.             .backgroundColor(Color.Green)
  25.             .backgroundImage($r('app.media.img5_1'))
  26.             .backgroundImageSize(ImageSize.FILL)
  27.           Text("夏至除了吃面，你知道还要吃什么吗?")
  28.             .fontSize(20)
  29.             .fontWeight(FontWeight.Bold)
  30.             .width('95%')
  31.             .padding({ left: 5 })
  32.             .margin({ top: 4 })
  33.             .height('5%')
  34.             .textAlign(TextAlign.Start)
  35.           Text("古语有云：“至者，极也”。夏至，是北半球一年中白昼最长的一天。过了夏至，气温将会日渐升高，" +
  36.             "一年中最热的时候随即到来，适时养生是非常重要的。下面大家一起了解下夏至吃什么养生，" +
  37.             "夏至的饮食习俗有哪些吧！").maxLines(5).lineSpacing(LengthMetrics.vp(10)).width('95%')
  39.           Column() {
  40.             Text('一、夏至有哪些饮食习俗？').height('5%')
  41.               .fontColor(Color.Red).fontSize(20)
  42.             Text('/夏至面/').fontWeight(FontWeight.Bold).fontSize(18)
  43.             Text('俗话说，“吃过夏至面，一天短一线”。按照习惯夏至这一天要吃面，夏至吃面不仅有以面食敬神、' +
  44.               '庆祝丰收的喜悦，而且也是尝新之意。夏至前新麦收获，新麦面粉也随之上市，新麦面粉不论是口感' +
  45.               '还是营养都是最佳的，人们便纷纷使用新麦面粉做成面条汲取营养，以达到尝新目的。夏至面多以凉面' +
  46.               '为主，此时高温酷暑、天气炎热，吃一些冷的面条可以开胃降火，而又不会因为寒凉损害身体健康。')
  47.               .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
  48.             Row({ space: 10 }) {
  49.               Text().myfun().backgroundImage($r('app.media.img5_2'))
  50.                 .backgroundImageSize(ImageSize.FILL)
  51.               Text().myfun().backgroundImage($r('app.media.img5_3')).backgroundImageSize(ImageSize.FILL)
  52.             }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })
  54.             Row({ space: 10 }) {
  55.               Text().myfun().backgroundImage($r('app.media.img5_4')).backgroundImageSize(ImageSize.FILL)
  56.               Text().myfun().backgroundImage($r('app.media.img5_5')).backgroundImageSize(ImageSize.FILL)
  57.             }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
  58.           }.width('95%')
  60.           Column() {
  61.             Text('二、夏至养生有哪些要点?').height('5%')
  62.               .fontColor(Color.Red).fontSize(20)
  63.             Column() {
  64.               Text('1、清淡饮食，多吃“苦”').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
  65.                 .textAlign(TextAlign.Start)
  67.               Text('夏至饮食宜清淡，可以多吃些苦菜类蔬菜，如苦瓜、苦菊、苦菜等。' +
  68.                 '因苦味食物具有除燥祛湿、清凉解暑的作用，夏天吃能帮助体内毒素排除，缓解夏季炎热天气带来的不适。')
  69.                 .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
  71.               Row({ space: 10 }) {
  72.                 Text()
  73.                   .myfun()
  74.                   .backgroundColor(Color.Gray)
  75.                   .backgroundImage($r('app.media.img5_6'))
  76.                   .backgroundImageSize(ImageSize.FILL)
  77.                 Text()
  78.                   .myfun()
  79.                   .backgroundColor(Color.Green)
  80.                   .backgroundImage($r('app.media.img5_7'))
  81.                   .backgroundImageSize(ImageSize.FILL)
  82.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })
  84.               Row({ space: 10 }) {
  85.                 Text()
  86.                   .myfun()
  87.                   .backgroundColor(Color.Gray)
  88.                   .backgroundImage($r('app.media.img5_8'))
  89.                   .backgroundImageSize(ImageSize.FILL)
  90.                 Text()
  91.                   .myfun()
  92.                   .backgroundColor(Color.Green)
  93.                   .backgroundImage($r('app.media.img5_9'))
  94.                   .backgroundImageSize(ImageSize.FILL)
  95.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
  96.             }
  98.             Column() {
  99.               Text('2、晚餐忌食生冷食物。').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
  100.                 .textAlign(TextAlign.Start)
  102.               Text('夏季夜短，晚餐最好不要吃生冷、粘腻之物，否则容易引起腹胀、吐泻等肠胃不适症状。将食物做成全熟' +
  103.                 '，可以杀死潜藏的细菌和病毒，吃起来也更加安全、放心')
  104.                 .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
  106.               Row({ space: 10 }) {
  107.                 Text()
  108.                   .myfun()
  109.                   .backgroundColor(Color.Gray)
  110.                   .backgroundImage($r('app.media.img5_10'))
  111.                   .backgroundImageSize(ImageSize.FILL)
  112.                 Text()
  113.                   .myfun()
  114.                   .backgroundColor(Color.Green)
  115.                   .backgroundImage($r('app.media.img5_11'))
  116.                   .backgroundImageSize(ImageSize.FILL)
  117.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })
  119.               Row({ space: 10 }) {
  120.                 Text()
  121.                   .myfun()
  122.                   .backgroundColor(Color.Gray)
  123.                   .backgroundImage($r('app.media.img5_12'))
  124.                   .backgroundImageSize(ImageSize.FILL)
  125.                 Text()
  126.                   .myfun()
  127.                   .backgroundColor(Color.Green)
  128.                   .backgroundImage($r('app.media.img5_13'))
  129.                   .backgroundImageSize(ImageSize.FILL)
  130.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
  131.             }
  133.             Column() {
  134.               Text('3、多喝汤、多饮水').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
  135.                 .textAlign(TextAlign.Start)
  137.               Text('夏至时节气温高，人体每天的排汗量会明显增加，如果不能及时补充，很容易造成身体缺水状态。多喝汤' +
  138.                 '、多饮水，能够缓解疲劳，促进新陈代谢，使人身体强健')
  139.                 .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
  141.               Row({ space: 10 }) {
  142.                 Text()
  143.                   .myfun()
  144.                   .backgroundColor(Color.Gray)
  145.                   .backgroundImage($r('app.media.img5_14'))
  146.                   .backgroundImageSize(ImageSize.FILL)
  147.                 Text()
  148.                   .myfun()
  149.                   .backgroundColor(Color.Green)
  150.                   .backgroundImage($r('app.media.img5_15'))
  151.                   .backgroundImageSize(ImageSize.FILL)
  152.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 8 })
  154.               Row({ space: 10 }) {
  155.                 Text()
  156.                   .myfun()
  157.                   .backgroundColor(Color.Gray)
  158.                   .backgroundImage($r('app.media.img5_16'))
  159.                   .backgroundImageSize(ImageSize.FILL)
  160.                 Text()
  161.                   .myfun()
  162.                   .backgroundColor(Color.Green)
  163.                   .backgroundImage($r('app.media.img5_17'))
  164.                   .backgroundImageSize(ImageSize.FILL)
  165.               }.height('30%').justifyContent(FlexAlign.Center).margin({ top: 5 })
  166.             }
  168.             Column() {
  169.               Text('4、适量锻炼。').fontWeight(FontWeight.Bold).fontSize(18).width('100%')
  170.                 .textAlign(TextAlign.Start)
  172.               Text("到了夏至，天气炎热，想要身体更加强健，可以适当进行锻炼。锻炼的时间，最好选择在清晨" +
  173.                 "或傍晚天气较为凉爽的时进行，场地可选择在河湖水边、" +
  174.                 "公园庭院等空气清新的地方，锻炼的项目以散步、打太极拳、做广播体操为好，不宜做剧烈运动。")
  175.                 .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 })
  176.               Text("好啦，今天的美食分享就到这里啦，你夏至的时候打算吃什么呢？欢迎大家留言分享哦～")
  177.                 .lineSpacing(LengthMetrics.vp(10)).margin({ top: 4 }).margin({ bottom: 8 })
  179.             }.height('38%')
  181.           }.width('95%')
  183.         }.width('100%')
  184.       }.scrollable(ScrollDirection.Vertical)
  185.     }
  186.   }
  188. }
复制代码
demo


个人信息编辑页

代码

  1. import { Prompt, router } from '@kit.ArkUI'
  3. @Entry
  4. @Component
  5. struct edit{
  6.   build() {
  7.    Column(){
  8.      Row() {
  9.        Button().height(30).width(30).margin({left:10}).backgroundImage($r('app.media.ic_public_arrow_left'))
  10.          .backgroundColor(Color.White).backgroundImageSize(ImageSize.FILL)
  11.          .onClick(()=>{
  12.            router.back()
  13.          })
  15.        Text('编辑个人信息').fontSize(18).margin({left:80})
  16.      }.height(40).width('100%').margin({top:5})
  17.      Button().width(150).height(150).borderRadius(90).backgroundColor(Color.Gray).margin({top:20})
  18.        .onClick(()=>{
  19.          AlertDialog.show({
  20.            title: '未授权',
  21.            message: '需允许摄像头权限和访问相册权限才能发布图片，请开启后重试',
  22.            autoCancel: false,
  23.            alignment: DialogAlignment.Center,
  24.            offset: { dx: 0, dy: 0 },
  25.            gridCount: 5,
  26.            primaryButton: {
  27.              value: '去开启',
  28.              fontColor: Color.Blue,
  29.              action: () => {
  30.                console.info('Button-clicking callback')
  31.              },
  32.            },
  33.            secondaryButton: {
  34.              value: '取消',
  35.              fontColor: Color.Blue,
  36.              action: () => {
  37.                console.info('Button-cancel callback')
  38.              },
  39.            },
  41.          })
  44.        }).backgroundImage($r('app.media.headimg')).backgroundImageSize(ImageSize.FILL)
  46.      Text('冲228').fontWeight(FontWeight.Bold).height(50).fontSize(25)
  47.      TextInput({placeholder:'点击添加签名'}).backgroundColor(Color.White).textAlign(TextAlign.Center)
  48.        .width('40%')
  49.      Text('如果修改头像时遇到点对勾没有反应的情况\n可以尝试退出本页重试').margin({top:140})
  50.        .textAlign(TextAlign.Center)
  54.    }.height('100%').width('100%')
  55.   }
  56. }
复制代码
demo


四、总结

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

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



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

海哥

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表