宫格导航--纯血鸿蒙组件库AUI

摘要：

宫格导航(A_GirdNav)：可设置导航数据，建议导航项超过16个，可设置“更多”图标指向的页面路由。最多显示两行，手机每行最多显示4个图标，折叠屏每行最多6个图标，平板每行最多8个图标。多余图标通过“更多”图标跳转。

一、组件调用方式

宫格导航组件的调用非常简单，只需要输入A_GirdNav ，然后给属性 data（导航数据）和 moreRouter（“更多”图标指向的页面路由）赋值即可。在 data 当中需要给文字、图标和跳转的路由赋值。如下图所示：

页面调用代码如下：

import { A_TitleBar } from '../aui/basic/A_TitleBar'
import { A_GirdNav } from '../aui/navigation/A_GirdNav'
import { ColorConstants } from '../constants/ColorConstants'
import { FloatConstants } from '../constants/FloatConstants'
import { GirdConstants } from '../constants/GirdConstants'
import { WindowUtils } from '../utils/WindowUtils'@Component
export struct Sample2 {@StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack()@StorageLink('primaryColor') primaryColor: ResourceStr = ColorConstants.INFO@StorageLink('deviceType') deviceType: string = GirdConstants.DEVICE_SMaboutToAppear() {WindowUtils.getInstance()?.setFullScreen()}build() {Row() {Column() {// 标题栏A_TitleBar({ text: '调用示例二' })// 下拉容器Scroll() {GridRow({columns: { sm: GirdConstants.GRID_COLUMNS[0], md: GirdConstants.GRID_COLUMNS[1], lg: GirdConstants.GRID_COLUMNS[2] },gutter: { x: GirdConstants.GRID_GUTTER, y: GirdConstants.GRID_GUTTER },breakpoints: { reference: BreakpointsReference.WindowSize } }) {GridCol({ span: 12 }) {A_GirdNav({data: [{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' }],moreRouter: 'MoreNavigation'})}.margin({top: FloatConstants.SPACE_TOP})}.padding({ bottom:this.deviceType === GirdConstants.DEVICE_LG ? GirdConstants.ZERO : FloatConstants.SPACE_S })}.scrollBar(BarState.Off)}.height(GirdConstants.FULL_PERCENT)}.alignItems(VerticalAlign.Top).padding({top: FloatConstants.SPACE_TOP,left:FloatConstants.SPACE_LEFT,right:FloatConstants.SPACE_RIGHT,bottom:this.deviceType === GirdConstants.DEVICE_LG ? GirdConstants.GRID_BOTTOM : FloatConstants.SPACE_BOTTOM}).width(GirdConstants.FULL_PERCENT).backgroundColor(ColorConstants.APP_BG)}
}

本地模拟器下浅色模式和深色模式运行效果如下：

二、在线排版

在会员页面或管理后台的页面当中选择一个页面，比如“首页”，然后点击“页面设计”。如下图所示：

现在“首页”是一个空页面，还没有任何组件。展开左侧组件库中的“导航组件”分组，将“宫格导航组件”拖拽到页面中，如下图所示：

选择右侧“组件设置”下的“宫格导航”组件，点击“配置数据”按钮，可以根据自己的业务需要，新增、删除或修改每一项配置，如下图所示：

现在，切换到代码魔法页面，我们可以在侧栏菜单这里选择“纯血鸿蒙”，（可以切换为深色模式，看代码更舒适），然后点击“生成代码”，如下图所示：

在生成的鸿蒙项目中，展开特性层（features）,选择 home 模块，找到 /src/main/ets/view 目录下的 HomeView.ets 页面，查看生成的代码，如下图所示：

三、源码解析

宫格导航组件支持两个属性，一个是 data（导航数据，建议导航项超过16个），另外一个是 moreRouter（“更多”图标指向的页面路由）：

卡片导航数据 data 是一个数组 Array<NavigationModel>，其中导航Model的数据结构如下，含三个字段：导航的文字（text）、导航图标（icon）和跳转页面的路由（router）。

继续分析宫格导航组件 A_GirdNav 的源码，在 aboutToAppear() 这个生命周期当中，对设备为折叠屏、平板和手机时的导航数据做了差异化的处理，以实现“一多”适配。其中，设备为折叠屏时，一行最多显示6个图标，最多显示两行。当总的图标数（每个图标对应一项导航数据）小于等于6个时，将所有图标放入一组数据；当总图标数大于6个时分为两组数据，第一组数据取前六项导航数据，第二组数据分两种情况：当总图标数大于12个时（超过两行），则将第7-11个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过12个图标，则将第7个到最后的图标放入第二组数据。如下图所示：

设备为平板时，一行最多显示8个图标，最多显示两行。当总的图标数小于等于8个时，将所有图标放入一组数据；当总图标数大于8个时分为两组数据，第一组数据取前八项导航数据，第二组数据分两种情况：当总图标数大于16个时（超过两行），则将第9-15个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过16个图标，则将第9个到最后的图标放入第二组数据。如下图所示：

设备为手机时，一行最多显示4个图标，最多显示两行。当总的图标数小于等于4个时，将所有图标放入一组数据；当总图标数大于4个时分为两组数据，第一组数据取前四项导航数据，第二组数据分两种情况：当总图标数大于8个时（超过两行），则将第5-7个图标放入第二组数据，然后加上一个“更多”图标；如果总图标数不超过8个图标，则将第5个到最后的图标放入第二组数据。如下图所示：

最后，将原始导航数据中的图标数据做了预处理，变为符合鸿蒙资源命名规则的方式，如下代码所示：

 this.compData.forEach(element => {element.icon = 'app.media.' + (element.icon.startsWith('mdi-') || element.icon.startsWith('mdi_') ? '' : 'mdi_') + element.icon.replaceAll('-', '_')})this.compData2.forEach(element => {element.icon = 'app.media.' + (element.icon.startsWith('mdi-') || element.icon.startsWith('mdi_') ? '' : 'mdi_') + element.icon.replaceAll('-', '_')})

使用自定义构建函数buildGirdNavigation展示两组导航数据，如下图所示：

ArkUI提供了一种轻量的UI元素复用机制@Builder，其内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。使用@Builder装饰自定义构建函数buildGirdNavigation，通过ForEach循环每一组导航数据，内部通过Image组件包装图标，Text组件包装文字，使用点击事件实现页面路由跳转，如下图所示：

宫格导航组件的完整源码如下：

/** Copyright (c) 2024 AIGCoder.com(AI极客)* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*//**调用示例一：A_GirdNav({data: [{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' }]})调用示例二：“更多”图标指向页面路由A_GirdNav({data: [{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' },{ text: 'Java', icon: 'mdi-language-java', router: 'OrderDetail/2' },{ text: 'Python', icon: 'mdi-language-python', router: '' },{ text: 'Vuetify', icon: 'cast-variant', router: '' },{ text: '纯血鸿蒙', icon: 'mdi-tablet-cellphone', router: 'AccountPage' }],moreRouter: 'MoreNavigation'})*/import { ColorConstants } from "../../constants/ColorConstants"
import { FloatConstants } from "../../constants/FloatConstants"
import { GirdConstants } from "../../constants/GirdConstants"
import { NavigationModel } from "../../models/NavigationModel"/*** 【宫格导航】* data：导航数据（建议导航项超过16个）* moreRouter：“更多”图标指向的页面路由*/
@Component
export struct A_GirdNav {@Prop data: Array<NavigationModel>@Prop moreRouter?: string@StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack()@StorageLink('deviceType') deviceType: string = GirdConstants.DEVICE_SM@State compMore: NavigationModel = {text: '更多',icon: 'dots-horizontal-circle-outline',router: this.moreRouter}@State compBlank: NavigationModel = {text: '',icon: '',router: ''}@State compPadding: Length = '16vp'private compMarginTop: Length = '36vp'private compMarginBottom: Length = '12vp'private compCardHeight: Length = '136vp'private compData: Array<NavigationModel> = []private compData2: Array<NavigationModel> = []aboutToAppear(): void {switch (this.deviceType){case GirdConstants.DEVICE_MD:if(this.data.length > 6){this.compData = this.data.slice(0, 6)if(this.data.length > 12){this.compData2 = this.data.slice(6, 11)this.compData2.push(this.compMore)}else{this.compData2 = this.data.slice(6, this.data.length)for (let i = 0; i < 12-this.data.length; i++) {this.compData2.push(this.compBlank)}}}else{this.compData = this.data.slice(0, this.data.length)}this.compCardHeight = this.compData2.length > 0 ? '144vp' : '80vp'breakcase GirdConstants.DEVICE_LG:if(this.data.length > 8){this.compData = this.data.slice(0, 8)if(this.data.length > 16){this.compData2 = this.data.slice(8, 15)this.compData2.push(this.compMore)}else{this.compData2 = this.data.slice(8, this.data.length)for (let i = 0; i < 16-this.data.length; i++) {this.compData2.push(this.compBlank)}}}else{this.compData = this.data.slice(0, this.data.length)}this.compPadding = '24vp'this.compMarginBottom = '16vp'this.compCardHeight = this.compData2.length > 0 ? '160vp' : '96vp'breakcase GirdConstants.DEVICE_SM:default:if(this.data.length > 4){this.compData = this.data.slice(0, 4)if(this.data.length > 8){this.compData2 = this.data.slice(4, 7)this.compData2.push(this.compMore)}else{this.compData2 = this.data.slice(4, this.data.length)for (let i = 0; i < 8-this.data.length; i++) {this.compData2.push(this.compBlank)}}}else{this.compData = this.data.slice(0, this.data.length)}this.compCardHeight = this.compData2.length > 0 ? '136vp' : '80vp'break}this.compData.forEach(element => {element.icon = 'app.media.' + (element.icon.startsWith('mdi-') || element.icon.startsWith('mdi_') ? '' : 'mdi_') + element.icon.replaceAll('-', '_')})this.compData2.forEach(element => {element.icon = 'app.media.' + (element.icon.startsWith('mdi-') || element.icon.startsWith('mdi_') ? '' : 'mdi_') + element.icon.replaceAll('-', '_')})}build() {Column() {this.buildGirdNavigation(this.compData)this.buildGirdNavigation(this.compData2)}.backgroundColor(ColorConstants.CARD_BG).width(GirdConstants.FULL_PERCENT).justifyContent(FlexAlign.SpaceBetween).borderRadius(FloatConstants.RADIUS_CARD).padding(this.compPadding).margin({top: this.compMarginTop,bottom: this.compMarginBottom}).height(this.compCardHeight)}@BuilderbuildGirdNavigation(list: NavigationModel[]) {Row() {ForEach(list, (item: NavigationModel) => {Column({ space: GirdConstants.EIGHT }) {Image($r(item.icon)).width(FloatConstants.IMAGE_SIZE5).height(FloatConstants.IMAGE_SIZE5).fillColor(ColorConstants.FG_LEVEL1)Text(item.text).fontSize(FloatConstants.FONT_SIZE_BODY_S).fontColor(ColorConstants.FG_LEVEL1)}.onClick(() => {if (item.router) {// 跳转到新页面const router = item.routerif (router.includes("/")) {this.pageInfo.pushPathByName(router.substring(0, router.indexOf("/")),router.substring(router.indexOf("/") + 1))} else {this.pageInfo.pushPathByName(router, null)}}}).width(FloatConstants.IMAGE_SIZE10)}, (item: NavigationModel, index: number) => index + JSON.stringify(item))}.justifyContent(FlexAlign.SpaceBetween).width(GirdConstants.FULL_PERCENT)}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/web/81366.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

调试的按钮

调试的按钮

在Debug的时候&#xff0c;会有一些按钮&#xff0c;我们需要知道它们各自的作用。 注&#xff1a;调试器本身并没有一个直接的、可以撤销已执行代码效果的“返回上一步&#xff08;Undo Last Step&#xff09;”或“逆向执行&#xff08;Reverse Debugging&#xff09;”按钮…
阅读更多...
人工智能如何协助老师做课题

人工智能如何协助老师做课题

第一步&#xff1a;在腾讯元宝对话框中输入如何协助老师做课题&#xff0c;通过提问&#xff0c;我们了解了老师做课题的步骤和建议。 第二步&#xff1a;开题报告提问&#xff0c;腾讯元宝对话框中&#xff0c;输入“大单元视域下小学数学教学实践研究课题开题报告。”......…
阅读更多...
OpenGL Chan视频学习-5 Vertex Attributes and Layouts in OpenGL

OpenGL Chan视频学习-5 Vertex Attributes and Layouts in OpenGL

bilibili视频链接&#xff1a; 【最好的OpenGL教程之一】https://www.bilibili.com/video/BV1MJ411u7Bc?p5&vd_source44b77bde056381262ee55e448b9b1973 一、知识点整理 1.1.OpenGL管线工作流程 为显卡提供绘制的所有数据&#xff0c;并将数据存储在GPU内存使用着色器&…
阅读更多...
Linux_编辑器Vim基本使用

Linux_编辑器Vim基本使用

✨✨ 欢迎大家来到小伞的大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;LInux_st 小伞的主页&#xff1a;xiaosan_blog 制作不易&#xff01;点个赞吧&#xff01;&#xff01;谢谢喵&#xff01;&a…
阅读更多...
MyBatis 高级映射功能详解：处理复杂数据库关系

MyBatis 高级映射功能详解：处理复杂数据库关系

MyBatis 的高级映射功能是其强大特性之一&#xff0c;它允许开发者轻松处理数据库中的复杂关系&#xff0c;如一对一、一对多和多对多关系。本文将深入探讨这些高级映射功能&#xff0c;包括映射配置方法、嵌套查询和关联查询的使用&#xff0c;并通过示例代码进行演示。 1.数据…
阅读更多...
Halo：一个强大易用的国产开源建站工具

Halo：一个强大易用的国产开源建站工具

Halo 是一款国产开源的建站工具&#xff0c;适合快速搭建博客、论坛、知识库、公司官网等多种类型的网站&#xff0c;目前在 GitHub 上已经获得了 35.6k Star。 功能特性 Halo 核心功能与优势包括&#xff1a; 插件架构&#xff1a;Halo 采用可插拔架构&#xff0c;功能模块之…
阅读更多...
Java-ArrayList集合的遍历方式详解

Java-ArrayList集合的遍历方式详解

Java-ArrayList集合的遍历方式详解 二、ArrayList概述三、ArrayList的遍历方式1. 普通for循环遍历2. 增强for循环遍历3. 迭代器遍历4. ListIterator遍历5. Java 8 Stream API遍历 四、性能对比与分析性能测试结果分析 五、遍历方式的选择建议六、常见遍历陷阱与注意事项1. 并发…
阅读更多...
华为网路设备学习-23（路由器OSPF-LSA及特殊详解 二）

华为网路设备学习-23（路由器OSPF-LSA及特殊详解 二）

OSPF动态路由协议要求&#xff1a; 1.必须有一个骨干区域&#xff08;Area 0&#xff09;。有且仅有一个&#xff0c;而且连续不可分割。 2.所有非骨干区域&#xff08;Area 1-n&#xff09;必须和骨干区域&#xff08;Area 0&#xff09;直接相连&#xff0c;且所有区域之间…
阅读更多...
基于大模型的急性腐蚀性胃炎风险预测与诊疗方案研究报告

基于大模型的急性腐蚀性胃炎风险预测与诊疗方案研究报告

目录 一、引言 1.1 研究背景与意义 1.2 研究目的 1.3 国内外研究现状 二、急性腐蚀性胃炎概述 2.1 定义与发病机制 2.2 病因分析 2.3 临床表现与分型 2.4 诊断方法 三、大模型技术介绍 3.1 大模型原理 3.2 常用大模型及在医疗领域应用案例 3.3 选择用于急性腐蚀性…
阅读更多...
泰迪杯特等奖案例深度解析：基于三维点云与深度学习的复杂零件装配质量检测系统设计

泰迪杯特等奖案例深度解析：基于三维点云与深度学习的复杂零件装配质量检测系统设计

一、案例背景与行业痛点 1.1 工业装配质检的现状与挑战 在精密制造领域（如航空航天发动机、新能源汽车电池模组），复杂零件的装配质量直接影响产品性能与安全性。传统人工质检存在效率低（单件检测耗时>3分钟）、漏检率高（约15%）等问题，而现有自动化方案面临以下技术…
阅读更多...
离散傅里叶变换DFT推导及理解

离散傅里叶变换DFT推导及理解

DTFT到DFT的推导 关于DTFT的相关推导已经做过总结&#xff0c;详见《DTFT及其反变换的直观理解》&#xff0c;每一个离散的频率分量都是由时域中的复指数信号累加得到的&#xff0c;DTFT得到的频谱时频率的连续函数 。 离散时间傅里叶变换公式&#xff0c;式1&#xff1a; 将…
阅读更多...
欣佰特科技|工业 / 农业 / AR 场景怎么选？Stereolabs ZED 双目3D相机型号对比与选型建议

欣佰特科技|工业 / 农业 / AR 场景怎么选？Stereolabs ZED 双目3D相机型号对比与选型建议

Stereolabs ZED 相机系列为视觉感知领域提供了多种创新解决方案&#xff0c;适用于不同应用场景。选择合适的 ZED 相机型号&#xff0c;需综合考虑分辨率、深度感知范围、接口类型等因素。 Stereolabs ZED 相机产品系列概览 ZED&#xff1a;首款立体视觉相机&#xff0c;专为高…
阅读更多...
黑马点评Reids重点详解（Reids使用重点）

黑马点评Reids重点详解（Reids使用重点）

目录 一、短信登录&#xff08;redisseesion&#xff09; 基于Session实现登录流程 &#x1f504; 图中关键模块解释&#xff1a; 利用seesion登录的问题 设计key的具体细节 整体访问流程 二、商户查询缓存 reids与数据库主动更新的三种方案 缓存穿透 缓存雪崩问题及…
阅读更多...
【Pandas】pandas DataFrame add_suffix

【Pandas】pandas DataFrame add_suffix

Pandas2.2 DataFrame Reindexing selection label manipulation 方法描述DataFrame.add_prefix(prefix[, axis])用于在 DataFrame 的行标签或列标签前添加指定前缀的方法DataFrame.add_suffix(suffix[, axis])用于在 DataFrame 的行标签或列标签后添加指定后缀的方法 pandas…
阅读更多...
解锁MCP：AI大模型的万能工具箱

解锁MCP：AI大模型的万能工具箱

摘要&#xff1a;MCP&#xff08;Model Context Protocol&#xff0c;模型上下文协议&#xff09;是由Anthropic开源发布的一项技术&#xff0c;旨在作为AI大模型与外部数据和工具之间沟通的“通用语言”。它通过标准化协议&#xff0c;让大模型能够自动调用外部工具完成任务&a…
阅读更多...
nginx性能调优与深度监控

nginx性能调优与深度监控

目录 nginx性能调优 更改进程数与连接数 进程数 连接数 静态缓存功能设置 日志切割 配置网页压缩 nginx 的深度监控 GoAccess 简介 GoAccess安装 ​编辑 配置中文环境 GOAccess生成中文报告 测试访问 nginx vts 简介 nginx vts 安装 nginx配置开启vts 测试访问…
阅读更多...
【时时三省】Python 语言----牛客网刷题笔记

【时时三省】Python 语言----牛客网刷题笔记

目录 1，常用函数 1，input() 2，map() 3，split() 4，range() 5, 切片 6，列表推导式 山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 1，常用函数 1，input() 该函数遇到 换行停止接收，返回类型为字符串 2，map() 该函数出镜率较高，目的是将一个可迭…
阅读更多...
docker compose yml 启动的容器中，如何使用linux环境变量赋值

docker compose yml 启动的容器中，如何使用linux环境变量赋值

在 Docker Compose 中&#xff0c;可以通过环境变量&#xff08;${VAR} 或 $VAR&#xff09;来动态配置容器。以下是几种常见的使用方式 - 使用 env_file 加载变量文件 可以单独定义一个环境变量文件&#xff08;如 app.env&#xff09;&#xff0c;然后在 docker-compose.y…
阅读更多...
深入解析Kafka JVM堆内存：优化策略与监控实践

深入解析Kafka JVM堆内存：优化策略与监控实践

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…
阅读更多...
git常用操作命令

git常用操作命令

本文介绍git常用的操作命令&#xff0c;供大家参考。 1、开始 # 初始化本地git git init# 在初始化的目录中&#xff0c;创建readme.txt&#xff0c;添加到git库中 git add readme.txt git commit -m "写了一个readme.txt文件"2、版本回退 2.1、git reset git lo…
阅读更多...
最新文章

Copyright @ 2022~2023