鸿蒙开发案例（博文尚美）

最新推荐文章于 2024-06-29 10:49:09 发布

祇骁

最新推荐文章于 2024-06-29 10:49:09 发布

阅读量709

点赞数 29

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2402_85336411/article/details/140011777

版权

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、案例原图

二、构思

1.组件

（一）由Column、Row、List、ListItem、Scroll、Swiper、Tabs、TabContent等容器组件组成

（二）由Button、Divider、Image、Marquee、Search、Text等基础组件组成

2.框架

（一）将“zhu”作为主要的包，在其之上进行跳转

（二）在6个分支内我写入两个分支：1.一个在“HOME”内，为页面结构2.另一个在“NEWS”内，为跑马灯

一、代码局部分析

1.”zhu"内

Text(title)
  .fontColor(this.currentIndex === index ? Color.Green : Color.Gray)
  .fontSize(this.currentIndex === index ? 10 : 7)
  .width(30)
  .margin({ left: 7 })

.fontColor实现点击后，文体变色

.fontSize实现点击后，文体变大

Divider()
  .strokeWidth(2)
  .color('#36D')
  .opacity(this.currentIndex === index ? 1 : 0)

.opacity实现点击后，文体下方出现横线

Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    HOME()
  }
  .tabBar(this.TabBuilder('HOME', 0))

  TabContent() {
    Text('内容2')
  }
  .tabBar(this.TabBuilder('ABOUT', 1))

  TabContent() {
    Text('内容3')
  }
  .tabBar(this.TabBuilder('PORTFOLIO', 2))

  TabContent() {
    Text('内容4')
  }
  .tabBar(this.TabBuilder('SERVICE', 3))

  TabContent() {
    NEWS()
  }
  .tabBar(this.TabBuilder('NEWS', 4))

  TabContent() {
    Text('内容6')
  }
  .tabBar(this.TabBuilder('CONTACT', 5))

Tabs

通过页签进行内容试图切换的容器组件，每个页签对应一个内容视图。

TabContent

仅在Tabs中使用，对应一个切换页签的内容视图。

若添加跳转页面可将Text(’内容’)替换掉

.vertical(false)

.vertical可以更改页签所朝方向

2.”HOME"内

Swiper(this.swiperController) {
  Image($r('app.media.banner'))
    .width('100%')
    .height('20%')
  Image($r('app.media.banner'))
    .width('100%')
    .height('20%')
  Image($r('app.media.banner'))
    .width('100%')
    .height('20%')
  Image($r('app.media.banner'))
    .width('100%')
    .height('20%')
}

Swiper可以使图像实现轮播画面

.loop(true)
.autoPlay(true)
.interval(5800)
.vertical(true)

.loop使图像可以循环轮播

.autoPlay使图像可以自动播放

.interval控制轮播时的速度

.vertical控制轮播为纵向轮播

@Builder
function ItemCard(item: Item) {

  Column({ space: 15 }) {
    Image(item.image)
      .margin({ left: 10 })
      .width(45)
      .height(45)
    Text(item.name5)
      .fontWeight(FontWeight.Bold)
      .fontSize(15)
      .margin({ left: 9 })
    Text(item.name1)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
    Text(item.name2)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
  }
  .width('90%')
  .margin({ left: 10, right: 19 })
}//服务范围一栏中对类的渲染（上行）

@Builder
function ItemCard1(item: Item1) {

  Column({ space: 15 }) {
    Image(item.image1)
      .margin({ left: 10 })
      .width(45)
      .height(45)
    Text(item.name6)
      .fontWeight(FontWeight.Bold)
      .fontSize(15)
      .margin({ left: 9 })
    Text(item.name3)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
    Text(item.name4)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
  }
  .width('90%')
  .margin({ left: 10, right: 20 })

Scroll(this.scroller) {
  Column() {
    List() {
      ForEach(
        this.items,
        (item: Item) => {
          ListItem() {
            ItemCard(item)
          }
        })
    }
    .listDirection(Axis.Horizontal)
    .height('50%')

    Row() {
      List() {
        ForEach(
          this.items1,
          (item1: Item1) => {
            ListItem() {
              ItemCard1(item1)
            }
          })
      }
      .listDirection(Axis.Horizontal)
      .height('40%')

    }
  }

}

原服务范围界面,地方够多,字迹清晰.但模拟机界面小,若按原示例来,根本看不清字,所以我把循环之间间距放大,使其滑动起来比较美观

首先因为处于两行,我运用了两次循环,.list自身条件便是若超出界面,则文本可以实现滚动效果.为了能使两个循环同时滚动,我又将二者包含在Scroller（可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动)之中

scroller: Scroller = new Scroller()

需要说明Scroller

.edgeEffect(EdgeEffect.Spring)
.scrollable(ScrollDirection.Horizontal)

.edgeEffect可以控制滑动到底的回弹效果

.scrollable可以控制滑动的方向

3.“NEWS“内

State start: boolean = true//跑马灯固定为播放状态
private fromStart: boolean = true//文本从头开始播放
private step: number = 50//设置动画滚动时的步长
private loop: number = Infinity//设置重复滚动次数为无限循环
private src: string = "更多新闻尽情期待!"//跑马灯内容

一些有关跑马灯的函数，内部有注释

start: this.start,
step: this.step,
loop: this.loop,
fromStart: this.fromStart,
src: this.src

命名的一些类

4.案例代码

1."zhu"

import { HOME } from './HOME'
import { NEWS } from './NEWS'

@Entry
@Component
struct zhu {
  @Builder
  TabBuilder(title: string, index: number) {
    Column({ space: 4 }) {
      Text(title)
        .fontColor(this.currentIndex === index ? Color.Green : Color.Gray)
        .fontSize(this.currentIndex === index ? 10 : 7)
        .width(30)
        .margin({ left: 7 })
      Divider()
        .strokeWidth(2)
        .color('#36D')
        .opacity(this.currentIndex === index ? 1 : 0)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  @State currentIndex: number = 0

  build() {
    Column() {
      Row() {
        Image($r('app.media.logo'))
          .width('100')
          .margin({ left: 10 })//logo
        Search({ placeholder: 'SEARCH' })
          .width('69%')
          .height('30')//搜索框
      }
      .width('100%')

      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          HOME()
        }
        .tabBar(this.TabBuilder('HOME', 0))

        TabContent() {
          Text('内容2')
        }
        .tabBar(this.TabBuilder('ABOUT', 1))

        TabContent() {
          Text('内容3')
        }
        .tabBar(this.TabBuilder('PORTFOLIO', 2))

        TabContent() {
          Text('内容4')
        }
        .tabBar(this.TabBuilder('SERVICE', 3))

        TabContent() {
          NEWS()
        }
        .tabBar(this.TabBuilder('NEWS', 4))

        TabContent() {
          Text('内容6')
        }
        .tabBar(this.TabBuilder('CONTACT', 5))
      }//跳转及其项目名称
      .width('100%')
      .height('100%')
      .vertical(false)
      .onChange(index => this.currentIndex = index)
    }

  }
}

2."HOME"

class Item {
  image: ResourceStr
  name1: string
  name2: string
  name5: string

  constructor(image: ResourceStr, name5: string, name1: string, name2: string) {
    this.image = image
    this.name1 = name1
    this.name2 = name2
    this.name5 = name5

  }
}//服务范围一栏中的类（上行）

class Item1 {
  image1: ResourceStr
  name3: string
  name4: string
  name6: string

  constructor(image1: ResourceStr, name6: string, name3: string, name4: string) {
    this.image1 = image1
    this.name3 = name3
    this.name4 = name4
    this.name6 = name6

  }
}//服务范围一栏中的类（下行）

class Item2 {
  image2: ResourceStr

  constructor(image2: ResourceStr) {
    this.image2 = image2
  }
}//客户案例一栏中的类

class Item3 {
  name7: string
  name8: string
  name9: string
  name10: string

  constructor(name7: string, name8: string, name9: string, name10: string) {
    this.name7 = name7
    this.name8 = name8
    this.name9 = name9
    this.name10 = name10

  }
}//最新资讯一栏中的类（上行）

class Item4 {
  name11: string
  name12: string
  name13: string
  name14: string

  constructor(name11: string, name12: string, name13: string, name14: string) {
    this.name11 = name11
    this.name12 = name12
    this.name13 = name13
    this.name14 = name14

  }
}//最新资讯一栏中的类（下行）

@Builder
function ItemCard(item: Item) {

  Column({ space: 15 }) {
    Image(item.image)
      .margin({ left: 10 })
      .width(45)
      .height(45)
    Text(item.name5)
      .fontWeight(FontWeight.Bold)
      .fontSize(15)
      .margin({ left: 9 })
    Text(item.name1)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
    Text(item.name2)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
  }
  .width('90%')
  .margin({ left: 10, right: 19 })
}//服务范围一栏中对类的渲染（上行）

@Builder
function ItemCard1(item: Item1) {

  Column({ space: 15 }) {
    Image(item.image1)
      .margin({ left: 10 })
      .width(45)
      .height(45)
    Text(item.name6)
      .fontWeight(FontWeight.Bold)
      .fontSize(15)
      .margin({ left: 9 })
    Text(item.name3)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
    Text(item.name4)
      .fontSize(15)
      .margin({ left: 10 })
      .fontColor('gray')
  }
  .width('90%')
  .margin({ left: 10, right: 20 })
}//服务范围一栏中对类的渲染（下行）

@Builder
function ItemCard2(item: Item2) {

  Column({ space: 15 }) {
    Image(item.image2)
      .margin({ left: 10 })
      .width(105)
      .height(55)
  }
  .margin({ top: 20 })
  .justifyContent(FlexAlign.SpaceAround)
}//客户案例一栏中对类的渲染

@Builder
function ItemCard3(item: Item3) {


  Row() {
    Column() {
      Text(item.name7)
        .fontWeight(FontWeight.Bolder)
        .fontColor('#ff74f1c5')
        .fontSize(40)
        .margin({ top: 30 })

      Text(item.name8)
        .fontWeight(FontWeight.Bold)
        .fontSize(15)
        .fontColor('gray')
    }

    Divider()
      .vertical(true)
      .height(80)
      .margin({ left: 10, right: 10, top: 30 })
    Column() {
      Text(item.name9)
        .fontSize(15)
      Text(item.name10)
        .fontSize(15)
        .fontColor('gray')
        .margin({ top: 15 })
        .width(400)
      Divider()
        .width(390)
        .margin({ top: 10 })
    }
    .margin({ top: 30 })
    .alignItems(HorizontalAlign.Start)
  }

}//最新资讯一栏中对类的渲染（上行）

@Builder
function ItemCard4(item: Item4) {
  Row() {
    Column() {
      Text(item.name11)
        .fontWeight(FontWeight.Bolder)
        .fontColor('#ff74f1c5')
        .fontSize(40)
        .margin({ top: 30 })
      Text(item.name12)
        .fontWeight(FontWeight.Bold)
        .fontSize(15)
        .fontColor('gray')
    }

    Divider()
      .vertical(true)
      .height(80)
      .margin({ left: 10, right: 10, top: 30 })
    Column() {
      Text(item.name13)
        .fontSize(15)
      Text(item.name14)
        .fontSize(15)
        .fontColor('gray')
        .margin({ top: 15 })
        .width(400)
      Divider()
        .width(390)
        .margin({ top: 10 })
    }
    .margin({ top: 30 })
    .alignItems(HorizontalAlign.Start)
  }

}//最新资讯一栏中对类的渲染（下行）

@Entry
@Component
export struct HOME {
  private items: Array<Item> = [
    new Item($r('app.media.section1img1'), '1.WEB DESIGN', '企业品牌网站设计/手机网站制作', '动画网站创意设计'),
    new Item($r('app.media.section1img2'), '1.WEB DESIGN', '标志logo设计/产品宣传册设计', '企业广告/海报设计'),
    new Item($r('app.media.section1img3'), '1.WEB DESIGN', '淘宝/天猫装修设计及运营推广', '企业微博/微信营销'),
  ]//服务范围一栏中的信息（上行）
  private items1: Array<Item1> = [
    new Item1($r('app.media.section1img4'), '1.WEB DESIGN', '腾讯/网易企业邮箱品牌代理', '个性化邮箱定制开发'),
    new Item1($r('app.media.section1img4'), '1.WEB DESIGN', '腾讯/网易企业邮箱品牌代理', '个性化邮箱定制开发'),
    new Item1($r('app.media.ex'), '更多', '', ''),
  ]//服务范围一栏中的信息（下行）
  private items2: Array<Item2> = [
    new Item2($r('app.media.section2')),
    new Item2($r('app.media.section2')),
    new Item2($r('app.media.section2')),
  ]//客户案例一栏中的信息
  private items3: Array<Item3> = [
    new Item3('09', 'Jan', '网站排名进入前二的技巧说明', '很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...'),
    new Item3('08', 'Jan', '网站排名进入前二的技巧说明', '很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...'),
  ]//最新资讯一栏中的信息（上行）
  private items4: Array<Item4> = [
    new Item4('09', 'Jan', '网站排名进入前二的技巧说明', '很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...'),
    new Item4('09', 'Jan', '网站排名进入前二的技巧说明', '很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...'),
  ]//最新资讯一栏中的信息（下行）
  private swiperController: SwiperController = new SwiperController()
  scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller) {
      Column() {
        Swiper(this.swiperController) {
          Image($r('app.media.banner'))
            .width('100%')
            .height('20%')
          Image($r('app.media.banner'))
            .width('100%')
            .height('20%')
          Image($r('app.media.banner'))
            .width('100%')
            .height('20%')
          Image($r('app.media.banner'))
            .width('100%')
            .height('20%')
        }//添加一个横向滑动条，使原布局文字直观表现出来
        .loop(true)
        .autoPlay(true)
        .interval(5800)
        .vertical(true)//轮播动画

        Row() {
          Image($r('app.media.1'))
            .width(80)
            .height(20)
          Text('服务范围')
            .fontSize(15)
            .width(60)
          Image($r('app.media.2'))
            .width(85)
            .height(20)
        }
        .margin({ top: 20 })

        Text('our services')
          .fontColor('gray')
          .fontSize(10)
          .margin({ right: 6 })
        Scroll(this.scroller) {
          Column() {
            List() {
              ForEach(
                this.items,
                (item: Item) => {
                  ListItem() {
                    ItemCard(item)
                  }
                })
            }
            .listDirection(Axis.Horizontal)
            .height('50%')

            Row() {
              List() {
                ForEach(
                  this.items1,
                  (item1: Item1) => {
                    ListItem() {
                      ItemCard1(item1)
                    }
                  })
              }
              .listDirection(Axis.Horizontal)
              .height('40%')

            }
          }

        }//重叠在同一个布局内，达到同时滑动效果
        .edgeEffect(EdgeEffect.Spring)
        .scrollable(ScrollDirection.Horizontal)
        .height('50%')

        Column() {
          Row() {
            Image($r('app.media.a'))
              .width(95)
              .height(20)
            Text('{客户案例}')
              .fontSize(15)
              .width(80)
              .fontColor('#ff74f1c5')
            Image($r('app.media.b'))
              .width(110)
              .height(20)
          }
          .margin({ top: 20 })

          Text('With the best professional technology,to design the best innovative web site')
            .fontColor('gray')
            .fontSize(10)

            List() {
              ForEach(
                this.items2,
                (item2: Item2) => {
                  ListItem() {
                    ItemCard2(item2)
                  }
                })
            }
            .listDirection(Axis.Horizontal)
            .height('12%')

            Button('VIEW MORE')
              .backgroundColor('#ff74f1c5')
              .width(120)
              .height(35)
              .fontSize(13)

        }
        .backgroundColor('#F1F2F3')
        .width('100%')

        Row() {
          Image($r('app.media.1'))
            .width(80)
            .height(20)
          Text('最新资讯')
            .fontSize(15)
            .width(60)
          Image($r('app.media.2'))
            .width(85)
            .height(20)
        }
        .margin({ top: 20 })

        Text('our services')
          .fontColor('gray')
          .fontSize(10)
          .margin({ right: 6 })
        Row() {
          Image($r('app.media.section3'))
            .width(200)
            .height(100)
          Column() {
            List() {
              ForEach(
                this.items3,
                (item3: Item3) => {
                  ListItem() {
                    ItemCard3(item3)
                  }
                })
            }
            .listDirection(Axis.Horizontal)

            List() {
              ForEach(
                this.items4,
                (item4: Item4) => {
                  ListItem() {
                    ItemCard4(item4)
                  }
                })
            }
            .listDirection(Axis.Horizontal)
          }
        }

        Row() {
          Text('Home')
            .fontColor('white')
            .fontSize(15)
          Text('  |  ')
            .fontColor('white')
            .fontSize(15)
          Text('About')
            .fontColor('white')
            .fontSize(15)
          Text('  |  ')
            .fontColor('white')
            .fontSize(15)
          Text('Portfolio')
            .fontColor('white')
            .fontSize(15)
          Text('  |  ')
            .fontColor('white')
            .fontSize(15)
          Text('Contact')
            .fontColor('white')
            .fontSize(15)
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#ff74f1c5')
        .width('100%')
        .height(50)
      }
      .width('100%')
    }
    .edgeEffect(EdgeEffect.Spring)//整体添加滑动条，使其整体达到滑动效果
  }
}

3."NEWS"

@Entry
@Component
export  struct NEWS {
  @State start: boolean = true//跑马灯固定为播放状态
  private fromStart: boolean = true//文本从头开始播放
  private step: number = 50//设置动画滚动时的步长
  private loop: number = Infinity//设置重复滚动次数为无限循环
  private src: string = "更多新闻尽情期待!"//跑马灯内容

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Marquee({
        start: this.start,
        step: this.step,
        loop: this.loop,
        fromStart: this.fromStart,
        src: this.src
      })//命名其所需的类
        .width(360)
        .height(80)
        .fontColor('#FFFFFF')
        .fontSize(48)
        .fontWeight(700)
        .backgroundColor('#182431')
        .margin({ bottom: 40 })
    }
    .width('100%')

总结

本案例实际考察页面构造情况，其他跳转页面可以发挥想象进行填充

祇骁

关注

29
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发案例（博文尚美）

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考本案例实际考察页面构造情况，其他跳转页面可以发挥想象进行填充。
复制链接

扫一扫