HarmonyOS应用开发：Panel（容器组件）

最新推荐文章于 2025-02-21 14:44:25 发布

「已注销」

最新推荐文章于 2025-02-21 14:44:25 发布

阅读量1.3k

点赞数 24

分类专栏：鸿蒙文章标签： harmonyos 华为鸿蒙系统 android 鸿蒙

本文链接：https://blog.csdn.net/situnanQAQ/article/details/139757248

版权

可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。

说明：

该组件从API Version 7开始支持。

子组件

可以包含子组件。

说明：

子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。

接口

Panel(show: boolean)

参数：

参数名	参数类型	必填	参数描述
show	boolean	是	控制Panel显示或隐藏。说明：如果设置为false时，则不占位隐藏。Visible.None或者show之间有一个生效时，都会生效不占位隐藏。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
type	PanelType	设置可滑动面板的类型。默认值：PanelType.Foldable
mode

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

24
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Panel）

m0_64420071的博客

03-15

2046

ArkTS声明式开发（容器组件：Panel）

鸿蒙5.0版开发：UI框架JS组件-容器组件（panel）

m0_69424697的博客

12-08

715

可滑动面板，提供一种轻量的内容展示窗口，在不同尺寸中切换，属于弹出式组件。

参与评论您还未登录，请先登录后发表或查看评论

鸿蒙5.0开发进阶：JS组件-panel

最新发布

Androidbye的博客

02-21

901

可滑动面板，提供一种轻量的内容展示窗口，在不同尺寸中切换，属于弹出式组件。

HarmonyOS 容器组件(Column Row Flex)

weixin_45966674的博客

01-11

1345

justifyContent和alignItems 大家可以自己去看还是那句话和我们之前讲的一个意思主要看direction主轴设置的啥如果是行那就和Row的一样列自然就和Column的一样根据主轴来的。justifyContent和alignItems 这和我们之前讲的一个意思主要看direction主轴设置的啥如果是行那就和Row的一样列自然就和Column的一样根据主轴来的。就会出现主要的三个提示。

HarmonyOS布局容器组件

当你发现自己的才华撑不起野心时，就请安静下来学习~

11-29

750

一般进行页面开发的流程中，当我们拿到页面设计图时，需要先对页面进行拆解，先确定页面的布局，再分析页面上的内容分别使用哪些组件来实现。在静态布局中，总得来说，组件是从上到下布局的。一个页面需要由若干组件组成，我们如何才能让这些组件有条不紊的在页面上布局，就需要借助容器组件来完成，比如布局容器Colum，Row等。了解了主轴和交叉轴，我们就可以更深刻和准确的理解相关属性，并正确使用。比如在Column和Row组件中的相关参数的含义。我们先学习布局容器的基础知识。

HarmonyOS组件容器组件-form

m0_60786034的博客

05-15

432

form n.形式，样子 v.形成，养成表单容器，支持容器内input元素的内容提交和重置。说明该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。支持设备手机平板智慧屏智能穿戴支持支持支持支持权限列表无子组件支持。

【HarmonyOS实战开发】鸿蒙容器组件解析

HarmonyOS007的博客

07-25

939

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

HarmonyOS Next开发学习手册——UI开发（组件布局）

maniuT的博客

07-15

1355

组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见组件。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见自定义组件。

HarmonyOS鸿蒙开发学习：鸿蒙基础-基础环境-ArkTS-组件-样式

专注移动开发

08-05

1774

下载对应的版本API12 的编辑器 API12的模拟器(mac英特尔安装API11)解压编辑器版本将左侧内容拖入点击打开新建一个路径 HarmonyOS-SDK 将资源下载包中的sdk的内容进行解压，放入到刚刚新建的目录将设置中的安装路径改变成新建的目录，最终点击确认，sdk就安装好了打开原有项目发现一个配置文件的依赖，线上没有提供云下载地址，只能采用离线的版本。hvigor下载资源包中，还有提供一个dependencies，这就是我们需要替换的版本 internal-plugin-S

HarmonyOS应用开发：Swiper（容器组件）

situnanQAQ的博客

06-19

3431

滑块视图容器，提供子组件滑动轮播显示的能力。

Panel容器

qq_47113253的博客

01-15

838

Panel容器使用panel容器实现以下效果： package awt; import java.awt.*; public class PanelDemo { public static void main(String[] args){ //1.创建一个window对象，因为Panel以及其他的容器，都不能独立存在，必须依附window存在 Frame frame = new Frame("这里演示一个panel"); //2.创建一个P

Panel--容器

weixin_34337381的博客

01-11

165

protectedvoidButton1_Click(objectsender,EventArgse) { inta=int.Parse(DropDownList1.SelectedValue); for(inti=1;i<=a;i++) { Labellb=new...

【鸿蒙软件开发】ArkTS基础组件之DataPanel(数据面板)、DatePicker(日期选择)

m0_62599305的博客

10-24

2281

DataPanel：数据面板组件，用于将多个数据占比情况使用占比图进行展示。DatePicker：日期选择器组件，用于根据指定日期范围创建日期滑动选择器。下面的参数分别代表：参数名，参数类型，必填，参数描述values，number[]，是，数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。max，number，否max大于0，表示数据的最大值。max小于等于0，max等于value数组各项的和，按比例显示。默认值：100。

容器Panel

“开心最好”的专栏

05-28

1143

一。就是像吃饭前要洗手一样的事，必干的--------页面设计！！！二。看是怎么做的吧：三。好了，看效果。（要强调DropDownList要设置AutoPostBack为true）四。再看一下吧：五》88

RegisterPanel容器

weixin_42605397的博客

02-16

103

RegisterPanel容器是一个程序中的容器，通常用于显示注册或登录表单等用户界面。该容器可以包含多个控件(如文本框、标签、按钮等)，用于收集用户的输入信息，并向后台发送数据以完成用户注册或登录等操作。RegisterPanel容器可以根据实际需求进行定制和扩展，以实现更多的功能和特性。 ...

【Qt QML】Pane组件

wangyi463295828的博客

05-01

207

Pane（窗格）提供与应用程序样式和主题匹配的背景色。窗格不提供自己的布局，但需要您定位其内容，例如通过创建RowLayout或ColumnLayout。声明为窗格的子项的项自动成为窗格的contentItem的父项。动态创建的项需要显式地添加到contentItem中。

NGUI基础-三大基础组件之Panel组件

m0_71469414的博客

12-28

1226

在游戏开发中，Panel面板的Sorting Layer（排序层）是用来控制2D/3D元素渲染顺序的一种机制。Clipping（裁剪）指的是限制面板内容在指定区域内可见的过程。Depth（深度）通常用来指定UI元素的层级关系，表示元素在屏幕上的叠放顺序，可以用来控制面板及其包含的UI元素在屏幕上的。通过合理设置面板及UI元素的深度值，开发者可以实现复杂的UI布局和叠加效果，确保不同的UI元素在屏幕上的正确显示顺序。一般来说，深度值越大的元素会被显示在屏幕最前方，而深度值越小的元素则会被显示在后方。

Bootstrap 组件：面板组件（panel）

WangMin@汪末末

09-09

4984

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址 ???? WangMin 基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容。默认样式默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。其用法如下： <

第 9 章 Panel(面板)组件

lgs198722的专栏

12-31

1591

学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Panel(面板)组件的使用方法，这个组件不依赖于其他组件。一.加载方式 //class 加载方式 <div class="easyui-panel" data-options="closable:true"> <p>内容区域</p> </div> //JS 加载调用 $('#box').panel({ wid

鸿蒙中左边列表控制右边列表位置

01-03

### HarmonyOS 中实现左边列表控制右边列表位置的方法在鸿蒙操作系统(HarmonyOS)中，为了实现在左侧有一个列表(List)，右侧也有一个列表，并且左侧列表的选择能够影响右侧列表的内容或显示状态，通常会采用双向绑定的方式处理数据流。对于布局方面，可以利用`Column`和`Row`来构建页面结构。其中： - `Row`作为水平排列的基础容器，其内部可以通过设置`justifyContent`属性让子组件按照特定规则分布于主轴上[^2]。 - 使用`List`组件创建可滚动的项目集合；当`List`的方向被设定为垂直(`Axis.Vertical`)时，则意味着它将呈现上下堆叠的效果[^1]。具体到本场景下，推荐的做法如下所示： #### 布局设计 ```xml <Row>  <div class="left-panel"> <List id="left-list" listDirection="Vertical">...</List> </div>  <div class="right-content"> <List id="right-list" listDirection="Vertical">...</List> </div> </Row> ``` 这里定义了一个横向排列的两部分区域——左侧面板放置了第一个`List`用于触发事件源，而右面则是目标响应区域内的另一个`List`实例。 #### 数据交互逻辑为了让左侧列表项点击后能改变右侧内容，可以在JavaScript端监听左侧列表项的状态变化，并据此更新右侧的数据集。例如： ```javascript // 获取左右两侧列表对象 const leftList = this.$refs['left-list']; const rightList = this.$refs['right-list']; // 定义初始状态下右侧要加载的数据数组 let dataListForRightSide; // 给左侧每条记录添加点击回调函数 leftList.on('itemClick', (index, itemData) => { // 根据当前选中的索引或其他条件筛选出对应的数据给右侧渲染 updateRightListBasedOnSelection(index); }); function updateRightListBasedOnSelection(selectedIndex){ switch(selectedIndex){ case 0: dataListForRightSide = /* 对应选项A的数据 */; break; case 1: dataListForRightSide = /* 对应选项B的数据 */; break; default: console.error("未知选择"); } // 刷新右侧列表视图 rightList.setData(dataListForRightSide); } ``` 上述代码片段展示了如何基于用户操作动态调整另一组UI元素的行为模式。需要注意的是实际开发过程中可能还需要考虑更多细节如异步请求获取远程资源、错误处理机制等。