文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

鸿蒙开发实战案例：沉浸式适配案例

介绍开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。...本案例分别针对Navigation、滚动、Web页、底部弹框等场景实现了沉浸式适配，且介绍了实现沉浸式适配的两种方案。...效果图预览使用说明：首页顶部是Navigation沉浸式，滑动商品列表是滚动场景沉浸式点击首页的banner进入web页展示Web页沉浸式点击商品进入商品详情页，展示普通页沉浸式点击商品详情页的商品评论弹出评论弹框展示底部弹框沉浸式实现思路页面的显示区域...Navigation沉浸式适配Navigation沉浸式需要区分不同场景，如果是整个页面的背景色设置在Navigation组件，则对Navigation组件设置expandSafeArea熟悉使其整体绘制延伸至状态栏和导航条...若页面顶部和底部背景色不一致，需分别处理，如本案例单独对顶部组件设置了expandSafeArea熟悉使其绘制延伸至状态栏。详情见NavImmersive.ets。

6920
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    可用于7埃米节点，imec首次展示功能性单片CFET器件

    虽然结果是从正面图案化两个触点获得的，但 imec 还展示了将底部触点形成移至晶圆背面的可行性——将顶部器件的存活率从 11% 显著提高到 79%。...△图1：具有MDI和堆叠正面图案化触点的CMOS CFET器件(TC =顶部触点; TJ= 顶部结; BC=底部触点; BJ= 底部结)。...SEM 横截面沿BC/TC (左)和横跨BC/TC (右)显示。 △图2：具有正面图案化堆叠接触的nFET和pFET的ld/Vg曲线。...在测试载体上演示了电气功能，其中 nFET 和 pFET 器件使用公共栅极，顶部和底部触点从正面连接。...第二个关键模块是堆叠源极/漏极底部和顶部触点的形成，它们通过介电隔离垂直分隔。关键步骤是底部触点金属填充和蚀刻，以及随后的介电填充和蚀刻——所有这些都在与 MDI 堆栈相同的狭小空间内完成。

    8810

    Android布局详解

    普通视图还是布局都继承自 View ，其中 ViewGroup 就是所有布局的父类， ViewGroup 继承自 View 同时可以对 View 进行管理 ( 编排，控制 View 显示位置和大小 )主要掌握以下三种布局...true” 靠父容器左侧 android:layout_alignParentRight=”true” 靠父容器右侧 android:layout_alignParentTop=”true” 靠父容器顶部...layout_toRightOf 在谁的右侧 android:layout_above 在谁的上面 android:layout_below 在谁的下面 android:layout_alignTop 顶部对齐...android:collapseColumns：设置要隐藏的列 列的索引从0开始，shrinkColumns和stretchColumns可以同时设置。...: ①横跨几行: android:layout_rowSpan = “2” //纵向横跨2行 ②横跨几列: android:layout_columnSpan = “3” //横向横跨2

    1.5K20

    iPhone X 适配手Q H5 页面通用解决方案

    目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px...解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。...网页内容完全覆盖可视窗口 auto: The default value, 同contain的作用 通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部。...底部适配层颜色在主资源加载完成后填充颜色 对于顶部通栏的页面，通过加URL参数来增加顶部黑色适配层。..._bid=278&_wvx=1 对于有底部操作栏（包括通栏和非通栏），通过加URL参数来增加底部适配层以及设置颜色。

    13.1K1911

    鸿蒙应用开发从入门到入行 - 篇8：Tabs选项卡页签视图切换

    省略里面的TabContent代码}此时界面效果如下图如上代码所示：barPosition参数，需要传入BarPosition的枚举，这个枚举仅有两个值：Start与End，默认即为Start，代表在顶部...，设置为End即为底部修改导航栏位置到侧边那么是不是只有顶部、底部两种位置呢？...、底部都有导航栏，即整个App分为“首页”、“发现”、“推荐”、“我的”四个部分，但是在“首页”里，又分为：关注、视频、游戏、数码、科技四个板块，如下图所示这时候就需要嵌套导航栏（在首页这个视图里再套一个...，会发现底部的导航栏有滚动，首页里嵌套的导航栏也有滚动。...这是因为使用自定义导航栏后，需要自行在Builder里根据当前选中下标来判断显示不同的图标和颜色综上所述，我们应该先声明一个状态变量，记录当前选中的索引@State currentIndex: number

    16210

    HarmonyOS 开发实践 —— 基于Grid实现混合布局

    ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。...通过onScrollFrameBegin事件计算实时滚动量，滚动整个页面，使上方精选布局滚动，如果页面已滚动到底部，列表不在顶部或列表有正向偏移量，则使页面上方精选部分自动上滑，功能列表置顶。...，1代表中间值，2代表滚动到List底部。 ...@State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。 ...            this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;             // 非（页面在顶部或页面在底部

    18510

    LaTeX浮动体

    t：页顶（top），浮动体被放在一页的顶部，这可以是代码环境所在页面或之后的页面。 b：页底（bottom），浮动体被放在一页的底部，这可以是代码环境所在页面或之后的页面。...此外，LaTeX 标准文档类还提供了跨栏排版的图表环境 figure* 和 table*，用来产生跨栏排版的浮动体。跨栏浮动体只允许排在页面的顶部（t）或单独的浮动页面（p）中，其他位置参数会被忽略。...figure* 和 table* 环境的默认位置都是 tp。在大多数情况下，使用 table* 或 figure* 环境的效果就是把内容排在后面一页的顶部。 3....\suppressfloats 命令可以带一个可选参数 t 或 b，表示本页顶部或底部禁止放置浮动体。...限制浮动环境数量和占用大小的参数 参数 类型 默认值 描述 topnumber 计数器 222 文本页顶部浮动体的最大数量 bottomnumber 计数器 111 文本页底部浮动体的最大数量 totalnumber

    2.5K20

    零基础微信小程序开发——全局配置之tabBar（保姆级教程+超详细）

    小程序中的tabBar通常被分为底部tabBar和顶部tabBar两种类型。 底部tabBar： 底部tabBar是小程序中最为常见的一种tabBar类型。...它位于屏幕的底部，用户可以通过点击不同的选项卡来切换不同的页面。 底部tabBar中至少需要配置两个选项卡，最多可以配置五个选项卡。这些选项卡通常包括图标和文本，以直观地表示每个页面的功能和内容。...顶部tabBar： 顶部tabBar相对较少见，它位于屏幕的顶部，用于实现页面的切换。 与底部tabBar不同的是，当渲染顶部tabBar时，不显示图标，只显示文本。...这可能是因为顶部空间有限，且用户通常更习惯于在底部进行页面切换操作。 顶部tabBar的样式和配置相对较少，通常只包括文本和分隔线等简单元素。...它定义了tabBar的整体背景色调，是用户体验中不可或缺的一部分，可以影响整个界面的视觉效果。 selectedIconPath：这个属性指定了当tab项被选中时，显示的图标路径。

    20910

    HarmonyOS 开发实践——基于tabs实现页面布局

    2、外层的滚动组件scroll主要通过onScroll，onScrollEdge以及onScrollFrameBegin回调判断页面是否在顶部，中间还是底部。...3、里层list组件也是通过onReachStart，onReachEnd，onScrollFrameBegin回调来判断list列表是否在顶部，中间还是底部,使用scrollBy滑动指定距离。...@State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。  ...  ...this.scrollerForScroll.currentOffset().yOffset;            console.info('this.currentYOffset'+this.currentYOffset)            // 非（页面在顶部或页面在底部...4、目前自定义切换动画只支持两种场景触发：点击页签和调用TabsController.changeIndex()接口。

    20020

    2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

    lockAnchors: true, // //定义section页面的滚动方式，需要引入jquery.easings插件 // easing:, // //是否使用css3 transform...来实现滚动效果 // css3: false, // //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部...", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素...lockAnchors: true, // //定义section页面的滚动方式，需要引入jquery.easings插件 // easing:, // //是否使用css3 transform...来实现滚动效果 // css3: false, // //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部

    11.9K30

    ViewPager轻松完成TabHost效果

    关于标题及这条线的颜色，和整个标识View的背景，都可以在代码里设置。 还有一个区别就是，PagerTabStrip可以点击切换View，而PagerTitleStrip不能点击。...，左右滑动页面也可以看到Tab处的线条跟随改变，如下图所示： 从上面的案例可以发现，PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器...其默认显示在顶部，还可以通过android:layout_gravity 属性设置为TOP或BOTTOM将它显示在ViewPager的顶部或底部。...然后新建几个页面文件，这里继续使用上一期ViewPager快速实现引导页里面的页面文件，同样使用相同的适配器ViewPagerAdapter。...除了系统自带的和上面的自定义方法，在实际开发中常会结合Fragment来一起开发，建议后期学完Fragment后再来进一步学习。

    1.6K70

    Anroid Wear OS 手表应用开发 - UI

    导航栏 WearableNavigationDrawerView 就是用来解决这个问题的，我们先看看它的效果： 从手表顶部向下滑，会出现一个导航栏，显示当前页面的图标和标题。...和 ViewPager 类似，我们需要给它设置一个适配器，设置每个页面的图标和标题，像这样： class MainDrawerAdapter(context: Context) : WearableNavigationDrawerView.WearableNavigationDrawerAdapter...既然可以从顶部下拉出导航栏，要不在底部上拉出一个操作栏？操作栏 WearableActionDrawerView 就是用来做这个的。...，controller.peekDrawer() 会在底部露出一小部分操作栏，如果当前页面是一个列表，这一部分会在列表滑动时隐藏，在列表到顶部和底部时显示： 露出部分默认会显示操作栏第一项的图标，可以在布局中添加...FrameLayout> 复制代码 通过 layout_gravity 来设置抽屉栏是在顶部还是底部

    2.6K30

    【Flutter 专题】图解 ListView 下拉刷新与上拉加载 (二)

    ListView + NotificationListener 和尚参考了很多大神的实现方式，发现 NotificationListener 很像 Android 的滑动监听事件，再顶部和底部添加事件处理...onNotification: dataNotification, child: childWidget(), ), ); } 问题小结 一：如何区分列表滑动到顶部或底部...'; rowNumber = 0; dataItems.clear(); loadData(); } } return true; } 二：监听的整个过程滑动中多次调用接口...且在非底部时 maxScrollExtent 和 offset 值会相等。使用该类监听时更灵活，有些操作并非到底部才会进行处理等。...和尚以前对列表的处理只包括列表数据为 0 时展示 Loading 等待页，有数据时展示数据列表，但是对于其他异常情况没有处理，这次特意添加上异常页面，这仅仅是业务方面的添加，没有新的技术点。 ?

    1K21

    HarmonyOS开发学习（3）–页面开发

    比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的” 两个内容视图的切换。 ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。...页签容器Tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。...Tabs组件页签默认显示在顶部，某些场景下您可能希望Tabs页签出现在底部或者侧边，您可以使用Tabs组件接口中的参数barPosition设置页签位置。...，页签位于容器顶部。...您可以使用@Builder装饰器，构造一个生成自定义TabBar样式的函数，实现上面的底部页签效果，示例代码如下： @Entry @Component struct TabsExample { @State

    1.1K10

    Flutter入门-路由导航

    其中PageRoute 是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，其定义了路由构建及切换过渡动画的接口及属性。...对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。...Navigator Navigator 是一个路由导航组件，提供了打开和退出路由的方法，Navigator 内部通过栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶路由。...pop(BuildContext context,[ result ]) 将栈顶路由出栈，result 页面关闭返回给上一个页面的数据 maybePop 判断页面是否可以返回上一页，如果可以直接返回...比如A-B-C，路由栈中存在三个页面，此时处于C,传入C，则替换B页面为指定新路由页； 示例 路由传值 用于在路由跳转时携带一些参数，比如打开某个新闻详情页时，我们需要携带 新闻id,这样才能具体知道显示什么

    1.2K20

    Z-blogPHP《小清新》至简至美个人博客主题模板，自适应加SEO优化

    V、修复用户模板页无法打开的BUG。 V、增加其他模板顶部背景图接口。...顶部背景图在主题设置开启，不同分类模板可以设置不同背景，新增的接口就是除了分类模板之外的页面，例如：标签页、用户页和搜索页等等，调用这个接口。...4.修改网页底部背景色和文字颜色。 5.修改优化文章页底部版权和标签居中对齐方式。 6.优化侧栏文字标题蓝色线条。 7.js、css代码精简优化移动端。...最后就是网站底部的设置了，只需要修改下年份和网站名称就行，其他不需要设置，也不需要修改。...广告设置：简单说下头部接口和脚本底部接口，如图：如果是百度或者谷歌联盟，把公共js放在头部接口就行，其他代码可以放在脚本底部，注意这俩是接口，不是广告位，不能直接投放广告。

    3.3K20

    效率至上—全新微云

    如果司机因为思考而减缓车速，整个立交桥的通行效率都会下降，形成交通拥堵。 ? 我们在设计移动APP时，当然没有设计立交桥这么紧迫。...而且在文件页出现选择操作时，会将入口向左挤开，使得位置不稳定。 针对这种情况，我们决定将它移动到底部中央固定位置。...上传入口固定在底部 更突出 左图中的顶部背景色过重，干扰用户预览内容。列表页的高度不够会显得很拥挤。 针对这种情况，我们决定对两个区域做出调整。...更易用 在上传界面中，操作项和信息区域混在一起难以辨识，而关闭入口在右上角难以触达。 我们把这个页面整体分成两个区域，顶部是信息区域，底部常用功能操作区域。...这样可以让上传页面改成全屏更好地利用空间对页面的布局进行调整，顶部重要的的每日流量信息提示更明显，常用的操作功能更易用。 ?

    1.6K30

    导航设计的10种模式

    01 底部Tab导航 描述： 当产品的整个体验流中是以几个常用功能模块（一般不超过5个）贯穿的，意味着用户需要在多个标签入口之间来回切换；为了保证切换的效率，将贯穿产品整个体验的流的模块平铺在Tab Bar...实际项目中，顶部与底部配合使用的挺多。 ?...优点： 扩展性好：标签的个数没有上限，不过太多的话，越是后面的页面渗透率会越低； 占据空间小：相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可...优点： 节省页面展示空间，让用户将更多的注意力聚焦到当前页面； 由于导航界面是隐藏在屏幕之外，展开之后整一页面都是导航菜单内容，所以可扩展和个性化的空间很大； 扩展性好，导航的个数没上限。...举例：淘宝首页 淘宝的首页布局就是是顶部搜索框（非常重要）+banner轮播（精准推送的广告、形成变现）+宫格（给阿里系产品进行导流）+卡片+底部tab。

    3.6K40

    大屏时代的生态变迁，看平板手机的拇指热键与界面布局

    在平板手机上，仍然需要将导航及高频功能控件放置在屏幕底部。无论用户怎样持机，平板手机的屏幕顶部区域总是相对难以触及。...虽然根据Android设计规范的要求，我们应该在小屏手机中将App的导航与功能控件放置在顶部，以避免与底部的系统导航栏产生冲突，但是在大屏设备上，可以将一些高频控件从标准的Action Bar中移出，并放置到屏幕底部...在默认情况下，Android的Action Bar会将所有的导航及功能选项整合到界面顶部（左），而分体式Action Bar则会将一些重要功能放到屏幕底部，使其更便于被拇指点击（右）。...可以通过屏幕底部的悬浮按钮触发更多功能，同时避免与Android的系统导航栏产生大范围的冲突。 此外，也可以尝试将控件放置在顶部，但使其能够响应某种作用于屏幕下方的辅助交互形式。...与系统提供的上下移动界面的方式不同，在App或网页内部，一种更具实践性的做法是在界面边缘放置某种“抽屉把手”，形如按钮或Tab，点击之后即可展开整个面板。 ?

    2.4K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券