当前位置: 首页 > news >正文

零基础开始学习鸿蒙开发-页面导航栏布局设计

目录

1.设定初始页(Idex.ets)

2.自定义首页组件

3.自定义发现页面组件

4.自定义设置页面组件

总结:主要是运用 了Tabs组件对导航栏进行布局,然后运用BottomTabBarStyle组件嵌套图标和文字,完成导航栏的制作。


1.设定初始页(Idex.ets)

import {find} from '../pages/find'
import {home} from '../pages/home'
import {setting} from '../pages/setting'
@Entry
@Component
struct Index {private controller: TabsController = new TabsController()@State gridMargin: number = 10@State gridGutter: number = 10@State sm: number = -2@State clickedContent: string = "";build() {Column() {Tabs({ barPosition: BarPosition.End, controller: this.controller }) {TabContent() {home({message:'首页'})}.tabBar(new BottomTabBarStyle($r("app.media.home"), "首页"))TabContent() {find({message:'发现'})}.tabBar(new BottomTabBarStyle($r("app.media.find"), "发现"))TabContent() {setting({message:'设置'})}.tabBar(new BottomTabBarStyle($r("app.media.setting"), "设置"))}.animationDuration(800).height('100%').backgroundColor(0xf1f3f5)}.width('100%').height('100%')}
}

效果如下:

2.自定义首页组件

@Entry
@Component
export struct home {@State message: string = '首页'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

3.自定义发现页面组件

// Index.ets
@Entry
@Component
export struct find {@State message: string = '发现'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

4.自定义设置页面组件

// Index.ets
@Entry
@Component
export struct setting {@State message: string = '发现'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

总结:主要是运用 了Tabs组件对导航栏进行布局,然后运用BottomTabBarStyle组件嵌套图标和文字,完成导航栏的制作。

http://www.lryc.cn/news/388014.html

相关文章:

  • 【Hive中常见的优化手段----数据采集!Join 优化!Hive索引!数据倾斜!mapreduce本地模式!map和reduce数量调整!】
  • 【面试系列】软件工程师高频面试题及详细解答
  • Qt开发 | Qt界面布局 | 水平布局 | 竖直布局 | 栅格布局 | 分裂器布局 | setLayout使用 | 添加右键菜单 | 布局切换与布局删除重构
  • LW-DETR: A Transformer Replacement to YOLO for Real-Time Detection
  • 前端技术(二)——javasctipt 介绍
  • FireFox 编译指南2024 Windows10篇-环境准备(一)
  • Spring Boot中的热部署配置
  • 用ChatGPT快速打造一个专业WordPress网站
  • dsp入门
  • Java并发编程-Atomiclnteger、LongAdder等原子类的使用及案例实战
  • 九浅一深Jemalloc5.3.0 -- ②浅*size class
  • JavaScript——属性的增删改查
  • 51单片机第15步_串口多机通讯使用CRC8校验
  • WPF----进度条ProgressBar(渐变色)
  • Apipost接口测试工具的原理及应用详解(四)
  • 【图论】200. 岛屿问题
  • AI学习指南机器学习篇-随机森林的优缺点
  • 基于boost::beast的http服务器(上)
  • 深度学习之近端策略优化(Proximal Policy Optimization,PPO)
  • 用pycharm进行python爬虫的步骤
  • 重写功能 rewrite
  • ISO19110操作要求类中/req/operation/operation-attributes的详细解释
  • 访客(UV)、点击量(PV)、IP、访问量(VV)概念
  • C++系统编程篇——Linux第一个小程序--进度条
  • 一个中文和越南语双语版本的助贷平台开源源码
  • 【游戏引擎之路】登神长阶(五)
  • FireAct:使用智能体(agent)微调大语言模型
  • 20240626让飞凌的OK3588-C开发板在相机使用1080p60分辨率下预览
  • python数据分析——数据分类汇总与统计
  • iOS17系统适配