【鸿蒙ArkUI实战开发】基于tabs实现页面布局

【HarmonyOS NEXT】如何实现Scroll容器组件中子组件吸顶效果 垂直滑动的Scroll容器组件中,自上而下依次包含Text1、Text2、List三个子组件,然后上滑Scroll组件,滑至Text2子组件处,Text2吸顶,List子组件中内容可继续滑动。请问此场景下Text2吸顶效果可如何实现?鸿蒙原生有提供吸顶效果的API吗?暂时没有原生的吸顶效果API,可以通过偏移量来实现相同效果。Scroll / 子组件 / 吸顶。 阅读详情

往期知识点整理

场景描述

在页面布局过程中,Tabs可以将产品包含的所有内容进行清晰分类,一目了然地呈现应用的内容范围,方便概览与跳转

场景一:tab嵌套list的吸顶效果

场景二:tabbar样式自定义:

1、tabs切换、监听

2、样式自定义

3、tabbar尾端文字渐变

场景三:tabContent切换动画

方案描述

场景一:tab嵌套list的吸顶效果

方案一:

实现思路:

1、最外层为tabs组件,首页tabContent主要用的stack组件嵌套了scroll组件+导航输入框组件,其中scroll组件嵌套了tabs组件,tabs里面嵌套list组件。

2、外层的滚动组件scroll主要通过onScroll,onScrollEdge以及onScrollFrameBegin回调判断页面是否在顶部,中间还是底部。

3、里层list组件也是通过onReachStart,onReachEnd,onScrollFrameBegin回调来判断list列表是否在顶部,中间还是底部,使用scrollBy滑动指定距离。如Scroll嵌套List滚动时,List组件的edgeEffect属性需设置为EdgeEffect.None。

核心代码

// scroll部分主要逻辑

enum ScrollPosition{

  start,

  center,

  end

}

@Entry

@Component

struct NestedScroll {

  @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。

  @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部,1代表中间值,2代表滚动到页面底部。


  ...

  build() {

    Column() {

      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.TabsController }) {

        TabContent() {

          Stack({ alignContent: Alignment.Top }) {

            Scroll(this.scrollerForScroll) {

              Column() {

                Column(){

                }

                .width("100%")

                .height("40%")

                .backgroundColor(Color.Pink)



                // tabbar

                Row({ space: 7 }) {

                  Scroll() {

                    ...

                  }

                }

                //tabs

                Tabs({ barPosition: BarPosition.Start, controller: this.subsController }) {

                  TabContent() {

                    List({ space: 10, scroller: this.scrollerForList }) {

                      ...

                    }

                    .onReachStart(() => {

                      this.listPosition = ScrollPosition.start

                    })

                    .onReachEnd(() => {

                      this.listPosition = ScrollPosition.end

                    })

                    .onScrollFrameBegin((offset: number, state: ScrollState) => {

                      console.info('chenoffset::'+offset)

                      // 滑动到列表中间时

                      if (!((this.listPosition == ScrollPosition.start && offset < 0)

                        || (this.listPosition == ScrollPosition.end && offset > 0))) {

                        this.listPosition = ScrollPosition.center

                      }

                      // 如果页面已滚动到底部 且 列表不在顶部或列表有正向偏移量

                      if (this.scrollPosition == ScrollPosition.end

                        && (this.listPosition != ScrollPosition.start || offset > 0)) {

                        console.info('chenoffsetscrollBy::'+offset)

                        return { offsetRemain: offset };

                      } else {

                        // scrollBy滑动指定距离

                        console.info('chenoffsetscrollBy滑动指定距离::'+offset)

                        this.scrollerForScroll.scrollBy(0, offset)

                        return { offsetRemain: 0 };

                      }

                    })

                  }.tabBar('关注')

                  ...

                }
鸿蒙开发基础 —— ArkUI 页面布局(选项卡 (Tabs)) 对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。图9自定义导航栏系统默认情况下采用了下划线标志当前活跃的页签,而自定义导航栏需要自行实现相应的样式,用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数,以其支持的CustomBuilder的方式传入自定义的函数组件样式。 阅读详情

相关推荐

鸿蒙ArkUI开发-Tabs组件的使用

TabBar的默认显示效果如下所示:往往开发过程中,UX给我们的设计效果可能并不是这样的,比如下面的这种底部页签效果:TabContent的tabBar属性除了支持string类型,还支持使用@Builder装饰器修饰的函数。

m0_62167422的博客 3799

鸿蒙HarmonyOS实战-ArkUI组件(Tabs)_harmonyos tabs,鸿蒙开发面试基础

自定义导航栏是指在应用开发中,开发者使用自己定制的视图代替系统自带的导航栏,以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素,例如按钮、文本、图片、标签等,以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象,提高用户体验和应用的可用性。Column() {Column(){Text(‘我的内容’)

2301_82241698的博客 1298

【鸿蒙基于API 13实战开发】—— ArkUI 页面布局解析

组件按照布局的要求依次排列,构成应用的页面。在声明式UI中,所有的页面都是由自定义组件构成,开发者可以根据自己的需求,选择合适的布局进行页面开发。布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。

shangkangba的博客 987

HarmonyOS ArkUI容器类组件-Tabs组件(Tabs、TabContent)

(value?index?: number;controller?Start,End,:指定页签位置来创建Tabs容器组件,定义了以下两种类型:Start(默认值):当vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。Endvertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。index:指定初次初始页签索引,默认值为0。controller:设置。

m0_70748458的博客 1843

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Tabs容器组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Tabs容器组件。

zy0412326的专栏 2037

鸿蒙HarmonyOS实战-ArkUI组件(Tabs)_harmonyos tabs(1)

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。深知大多数HarmonyOS鸿蒙开发工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。 既有适合小白学习的零基础资料,

tencentes的博客 822

鸿蒙5.0实战案例:基于Tabs实现页面布局

在页面布局过程中,Tabs可以将产品包含的所有内容进行清晰分类,一目了然地呈现应用的内容范围,方便概览与跳转方案一:实现思路:1、最外层为tabs组件,首页tabContent主要用的stack组件嵌套了scroll组件+导航输入框组件,其中scroll组件嵌套了tabs组件,tabs里面嵌套list组件。2、外层的滚动组件scroll主要通过onScroll,onScrollEdge以及onScrollFrameBegin回调判断页面是否在顶部,中间还是底部。3、里层list组件也是通过onReachSt

Maniu_666的博客 1079

鸿蒙5.0开发:ArkUI组件(Tabs)

Tabs组件是一种常见的用户界面(UI)组件,它是一个可以容纳多个选项卡的容器组件。

AyomQAQ的博客 1270

Ant Design Vue - 去掉 <a-tabs> 标签页组件底部细条灰色线(清掉选项卡组件整体底部灰色黑色细线)

默认情况下, 组件底部有一条 “贯穿式” 灰色细线,如下图所示:在组件上绑定属性,其 属性设置为 即可。 成功去除:改变其他样式同样可行,比如字体大小。

🏆 前端领域优质创作者 8341

TabbarStyleDemo

仿QQ Tabbar点击时候的动画效果,UITabBarController中实现以下方法,具体看demo吧,喜欢的star一下,后续还会在加一些动画 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; if (index != _index) { [self animationWithIndex:index]; _index = index;//声明index属性,点击的时候赋值,如果该item选中了,就不能再出现动画效果了 } if([item.title isEqualToString:@"发现"]) { // 也可以判断

极化码理论及算法研究4-巴氏参数、GA算法以及matlab仿真

目录 (如要找其他内容,欢迎访问我的主页寻找) #前言 #极化码概述 #极化码定义 #极化码编码 #极化码译码 #5G标准中极化码的编译码概述 #5G标准中极化码的编码 #5G标准中极化码的译码 #总结 极化码编码 ...

1万+

从个体到群体:Cartool实战静息态EEG微状态聚类全解析

本文详细解析了使用Cartool软件进行静息态EEG微状态聚类的完整实战流程。从个体水平聚类到群体模板提取,再到指标量化,文章深入探讨了k-means算法的应用、GFP峰值数据的使用技巧以及关键参数设置,为脑电信号处理研究者提供了从数据准备到结果解读的全方位指南。

weixin_29062671的博客 290

Xilinx VU+系列多DIE FPGA时序约束与跨DIE信号优化策略

本文深入探讨了Xilinx VU+系列多DIE FPGA的时序约束与跨DIE信号优化策略。针对2.5D/3D封装技术带来的时序挑战,详细解析了SLR区域约束、Laguna寄存器配置及跨时钟域约束等关键技术,提供了实用的TCL脚本和RTL优化示例,帮助开发者有效提升设计性能和时序收敛效率。

weixin_29209801的博客 655

Autodesk全家桶怎么选?AutoCAD、Revit、Fusion 360等7款软件超全对比指南

本文深入对比了Autodesk旗下七款核心软件(AutoCAD、Revit、Inventor、Fusion 360、Maya、3ds Max、Forge)的核心定位与适用场景。针对建筑、制造、创意设计等不同专业需求,提供精准的选型指南,帮助用户根据自身工作流(如二维绘图、BIM协同、产品开发、影视动画)选择最匹配的工具,避免资源浪费并提升效率。

stone的博客 434

YOLOv9改进策略【注意力机制篇】| 添加SE、CBAM、ECA、CA、Swin Transformer等注意力和多头注意力机制

这篇文章带来一个经典注意力模块的汇总,虽然有些模块已经发布很久了,但后续的注意力模块也都是在此基础之上进行改进的,对于初学者来说还是有必要去学习了解一下,以加深对模块,模型的理解。

Limiiiing的博客 2892

基于simulink的电动汽车电机驱动系统IGBT开路故障检测

本文介绍了基于Simulink的电动汽车电机驱动系统IGBT开路故障检测方法。通过搭建永磁同步电机(PMSM)驱动系统模型,实现IGBT开路故障注入,并设计基于电流平均值与PWM逻辑比较的故障检测算法。系统可实时采集三相电流信号,通过MATLAB Function模块实现故障诊断,当检测到PWM信号与电流不匹配时输出故障报警。仿真结果显示,系统能在2.05秒内准确识别A相上管开路故障,并通过Scope和XYGraph直观展示故障特征。该方法为电动汽车电力电子系统故障诊断与容错控制提供了实用解决方案,后续可扩

xiaoheshang_123的博客 150

Transformer 在自动驾驶中的应用:深度对比特斯拉(Tesla)、小鹏(XNet)、华为(ADS 2.0)在 Transformer 架构应用上的异同

自动驾驶汽车是当前人工智能和机器学习领域的热点研究方向之一。其核心技术之一就是基于深度学习的感知和决策系统。在感知系统中,目标检测和跟踪、语义分割、场景理解等计算机视觉任务至关重要。而在决策系统中,规划和控制模块需要对当前状态进行建模并做出相应的决策。近年来,Transformer模型在自然语言处理领域取得了突破性进展,并逐步被应用到计算机视觉等其他领域。相比于传统的卷积神经网络和循环神经网络,Transformer模型具有建模长距离依赖关系的能力,可以更好地捕捉输入序列中的全局信息。

AI天才研究院 864

全网首发--Unet3+改进16:在不同位置添加RepLKBlock超大卷积核

本文提出了一种基于大核卷积的神经网络架构RepLKNet,旨在缩小CNN与ViTs之间的性能差距。通过重新审视CNN中的大核设计,研究证明使用少量大卷积核替代多个小核能获得更强大的性能。提出的RepLKNet采用31×31大卷积核,在ImageNet和下游任务上取得了与SwinTransformer相当或更好的结果,同时具有更低延迟。文章详细介绍了实现步骤:(1)创建RepLKBlock模块文件;(2)在模型层中添加注意力机制;(3)在UNet模型中集成RepLKBlock;(4)完成训练流程。该方法展现了

AIcurator的博客 623

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: 【鸿蒙ArkUI实战开发】基于bindSheet的半模态弹窗
下一篇: 【鸿蒙ArkUI实战开发】基于webView的嵌套滚动
普通网友
博客等级 码龄2年 7013粉丝 723原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值