首页
学习
活动
专区
圈层
工具
发布

Material Design —Tabs

选项卡使内容组织处于较高级别,例如在app的视图、数据组或功能之间切换。 将Tabs以单行的形式显示在其关联的内容上方。 Tab的标签应该简洁地描述其中的内容。...由于滑动手势用于在Tabs之间导航,请勿将Tabs与同样支持滑动手势的内容配对。 类型 固定 滚动 Tab标签 标签标签可能包含icons和文字。...请勿使用包含支持滑动手势的内容的选项卡,因为滑动手势用于在选项卡之间进行导航。 例如,避免在内容可平移的地图中使用选项卡,或者避免在滑动内容的情况下使用可以取消项目的列表。...当用户不需要直接比较选项卡标签时,可滚动选项卡最适合用于浏览触摸界面中的上下文。 要在可滚动选项卡之间导航,请触摸选项卡或向左或向右滑动内容区域。...要在不导航的情况下滚动选项卡,请向左或向右滑动选项卡。 ? 移动端可滚动tabs ? pc端可滚动tabs

3.2K100

100天教程:在Unity中为敌人创造AI动作

在我们的攻击动画中添加一个事件 在我们继续编写Knight攻击玩家的代码之前,我们必须在玩家动画中添加一个事件。 具体来说,我想做到这一点,当Knight攻击时,如果他们与玩家碰撞,我们会受到伤害。...在 动画(Animator) 标签中,在选择我们的 Knight Animator Controller,在Animator面板中点击Attack1 并选择Animation 选项卡打开它。...为此,我拖出Animation标签,并将其停放在窗口中的其他地方,如下所示: 在游戏hierarchy面板中选择我们的Knight对象,然后你可以注意到,在 animation选项卡中,播放按钮现在可以点击...2)在Knight Attack 开始时创建一个动画事件, 并设置_isAttacking布尔值为true,然后在我们的Update()中,如果敌人正在攻击,并且我们与他们交互,则玩家会受到伤害,然后设置...目前,每当我们遇到一个敌人,出于某种奇怪的原因,我们将永远朝着一个方向滑动。我不知道是什么原因,但我们会在明天解决这个问题!

2.7K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用 SwiftUI 的方式进行布局

    0 : -greenSize.height) 尽管在本例中,offset 和 padding 的视觉呈现一致,但当需要与其他视图一起进行布局时,两者之间还是有很大的不同。...,我们将两个视图分别置于两个 overlay 层中,尽管在视觉上,两者之间仍呈垂直排列,但实际上两者之间并无关联。...在上面的代码中,由于两个视图使用了同样的动画曲线设定,因此,在移动时并不会出现分离的情况。...但如果为视图分别设定不同的动画曲线( 例如:一个 linear、一个 easeIn ),状态切换时便无法保证视图之间的完全紧密。...因此,只需要在状态切换时,调整视图二的对齐指南即可( 视图一将自动跟随视图二移动 )。 此种方式在视觉上与通过 VStack 的实现类似,但两者在需求尺寸上有明显不同。

    4.5K00

    用 SwiftUI 的方式进行布局

    0 : -greenSize.height) 尽管在本例中,offset 和 padding 的视觉呈现一致,但当需要与其他视图一起进行布局时,两者之间还是有很大的不同。...,我们将两个视图分别置于两个 overlay 层中,尽管在视觉上,两者之间仍呈垂直排列,但实际上两者之间并无关联。...在上面的代码中,由于两个视图使用了同样的动画曲线设定,因此,在移动时并不会出现分离的情况。...但如果为视图分别设定不同的动画曲线( 例如:一个 linear、一个 easeIn ),状态切换时便无法保证视图之间的完全紧密。...因此,只需要在状态切换时,调整视图二的对齐指南即可( 视图一将自动跟随视图二移动 )。 此种方式在视觉上与通过 VStack 的实现类似,但两者在需求尺寸上有明显不同。

    6K80

    Flutter 可折叠边栏

    原文链接:https://medium.com/flutterdevs/foldable-sidebar-in-flutter-7addcfb8304f 移动应用程序具有多种方法来处理屏幕之间的导航,例如导航抽屉...,底部导航栏,滑动选项卡等。...Flutter使开发人员可以轻松使用导航抽屉,而无需其他人就无需编写大部分代码。 在本博客中,我们将探讨Flutter中 的**可折叠侧边栏。...利用Material Design的移动应用程序有两个必不可少的导航选择。这些导航是“选项卡和抽屉”。抽屉是选项卡的一种可选选择,因为有时移动应用程序没有足够的空间来帮助选项卡。 抽屉是不可见的侧屏。...它是一个向左滑动的菜单,在大多数情况下,它包含应用程序中的重要连接,并且在显示时拥有一半的屏幕。 该演示视频展示了如何在Flutter中创建可折叠的侧边栏。

    8.5K50

    巧用滑动选项卡,提升用户体验

    滑动选项卡 目前针对移动设备的Cordova应用程序和渐进式的Web应用程序非常流行。提升用户体验和交互的关键是传递出原生的视觉效果和感觉,这并不总是一件容易的事情。...开始吧 首先,我们需要一个真正的滑动选项卡组件。有很多可供选择的提供了不同的特性的这样的组件,这里我们将会使用Onsen UI提供的选项卡,它允许在滑动的时候执行自定义操作。...Vue里的滑动选项卡 在Vue模板里用Onsen UI添加一个最小的滑动选项卡非常简单。...这不仅仅适用于物理的距离,在之前的代码里,我们想根据滑动的位置逐渐把一个颜色变换成另一个颜色。为了实现这个,我们需要把颜色表示成离散的值并且知道两个页面之间滑动的比率。...除了这些,滑动选项卡组件在 onSwipe钩子中,也提供了当前页面的十进制指数。比如 1.65的指数意思是当前滑动的是在页面1和页面2的65%( r=0.65)。

    1.8K20

    打造流畅可滑动列表项:滑动操作按钮的高级实现

    概述 在现代移动应用中,可滑动列表项是一种常见且高效的交互方式,它允许用户通过水平滑动列表项来显示隐藏的操作按钮,如删除、置顶、归档等。...可滑动列表项的设计原则 在设计可滑动列表项时,需要考虑以下几个关键原则: 直观性:滑动交互应该直观,用户能够轻松理解如何操作。 反馈性:滑动过程中应提供适当的视觉反馈,如内容跟随手指移动。...,并向左平移最大滑动距离,使其在列表项滑开时正好显示在右侧。...在本案例中,我们设置了20vp的滑动阈值: private swipeThreshold: number = 20 当滑动距离超过这个阈值时,列表项会自动滑到最大滑动距离,显示操作按钮;当滑动距离小于这个阈值时...,使不同列表项之间的边界更加清晰。

    44400

    最新iOS设计规范三|3大界面要素:栏(Bars)

    在iOS 13及更高版本中,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间的联系感。...如果导航栏包含多个文本按钮,需要通过在按钮之间插入固定的空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分的问题。 考虑在导航栏中使用分段控件,使APP的层次结构更加扁平。...因为模态视图为人们提供了一种单独的体验,使他们在完成后便会被解雇,所以这不是应用程序整体导航的一部分。 选项卡功能不可用时,请勿删除或禁用该选项卡。...为了使您的界面具有可预测性,选择一个选项卡应始终影响直接连接到选项卡栏的视图,而不影响屏幕上其他位置的视图。例如,在拆分视图的左侧选择一个选项卡不应导致拆分视图的右侧突然改变。...当弹出键盘时,工具栏也会被隐藏。 ? tips:了解选项卡栏和工具栏之间的区别很重要,因为两种类型的栏都出现在应用程序屏幕的底部。

    14.9K10

    科学家研制出可处理胃部问题的胶囊机器人

    据美国麻省理工学院网站2016年5月12日报道,在模拟人的食道和胃的实验中,美国麻省理工学院、英国谢菲尔德大学和日本东京工业大学的研究人员已经研制出一种微小的折叠机器人,可以从进入人体的胶囊中将自己展开...与它的前辈一样,它可以通过“粘滑运动”移动自身,移动时其附肢通过摩擦粘附于表面,通过其躯干的收缩,改变其重量分布而进行滑动。 和其它多款折叠式机器人相似,新型机器人采用三层结构,中间层会遇热收缩。...中间层收缩时,上下两层上的裂缝样式将决定机器人的折叠方式。 机器人的设计形态经过了无数次的修改,最终成为今天的形状。想要实现机器人的粘滑运动,必须使得机器人尽可能的小,同时需要足够硬。...机器人的设计还需要考虑到胶囊外壳问题,以方便病人口服进体内,所以它的体积要尽可能的被压缩到最小。同时,胶囊进入体内溶解后,它还要有足够的力让自己完全伸展开来,才能顺利进行收缩移动。...施加给机器人的力主要是旋转力,快速旋转可使机器人原地旋转,但慢速旋转则可使机器人沿其一条固定的腿旋转移动。在实验中,研究人员采用控制机器人的同一块磁体吸附住误吞进体内的纽扣电池。

    96540

    教程 | 可视化CapsNet,详解Hinton等人提出的胶囊概念与原理

    你也许会注意到当这个点在边缘时,其两侧颜色之间的差别会很大。...在第一个卷积层我们在寻找简单的边角和曲线。现在我们希望从上一步得到的边缘信息中找到更加复杂一点的形状。 这次我们的步长是 2,即每次移动 2 个像素而不是 1 个。...而事实上我们完全可以摆脱上述的过程,因为当我们在处理边缘时,描述边缘的方式是非常有限的。 当我们在处理形状这一层次的特征时,我们不想给每一个角度的长方形、三角形、椭圆等等都去设计对应的卷积核。...这样我们就可以让向量分布在 0 和 1 之间从而实际上获得一个概率值。 经过压缩操作后胶囊向量的长度如下所示。在这时想要猜出每个胶囊的目标几乎是不可能的。 ?...如果我们调整这些滑动器,我们可以看到每一个维度是如何影响这 4 个输入的: ? 我推荐大家下载使用这个可视化工具来观察在不同输入下滑动向量数值是如何影响重构过程的。

    88070

    教程 | 可视化CapsNet,详解Hinton等人提出的胶囊概念与原理

    你也许会注意到当这个点在边缘时,其两侧颜色之间的差别会很大。...在第一个卷积层我们在寻找简单的边角和曲线。现在我们希望从上一步得到的边缘信息中找到更加复杂一点的形状。 这次我们的步长是 2,即每次移动 2 个像素而不是 1 个。...而事实上我们完全可以摆脱上述的过程,因为当我们在处理边缘时,描述边缘的方式是非常有限的。 当我们在处理形状这一层次的特征时,我们不想给每一个角度的长方形、三角形、椭圆等等都去设计对应的卷积核。...这样我们就可以让向量分布在 0 和 1 之间从而实际上获得一个概率值。 经过压缩操作后胶囊向量的长度如下所示。在这时想要猜出每个胶囊的目标几乎是不可能的。 ?...如果我们调整这些滑动器,我们可以看到每一个维度是如何影响这 4 个输入的: ? 我推荐大家下载使用这个可视化工具来观察在不同输入下滑动向量数值是如何影响重构过程的。

    1.3K50

    游戏开发之UE4添加角色到场景中

    创建一个从Character类继承的类 从基本框架类继承是很简单的: 1) 在项目中打开你的UE4编辑器。 2) 在文件,选择“新建C++类”。 ?...4) 在左上角的组件窗口中,选择Mesh: ? 5) 在右侧的细节面板中,在Mesh选项卡中,选择下拉按钮,然后点击视图选项,点击显示引擎内容,再选择TutorialTPP。 ?...7) 然后我们通过W、E、R快捷键变换模型,使之近似地包围在碰撞体里面。如果碰撞胶囊体不够大,你可以点击组件的CapsuleComponent,然后在细节面板的Shape调节胶囊体大小: ?...2) 在上方选项卡中点击视口,然后选择Mesh,在右侧的细节面板中的Animation选项中的Anim Blueprint Generated Class中选择UE4ASP_Hero_AnimBlueprint...1) 在组件中进行如下的步骤: ? 2) 移动摄像机并旋转角色到如下状态(注意角色的蓝色箭头是角色的前进方向,所以要使得摄像机和角色自身的朝向都要面对着蓝色箭头): ?

    3.2K50

    uni-app实现tabbar选项卡切换

    this.scrollInto = 'tab'+index // 滚动到指定元素 } 在滑块视图组件我们做了如下事情 1.添加duration属性设置滑动动画时长...2.绑定current属性以实现选项卡与滑块视图关联(点击选项卡展示对应滑块) 3.添加事件change,滑块视图滑动时与选项卡同步(滑动滑块展示对应选项卡) 当页面滑动时会触发change事件 onChangeTab...(e){ console.log(e) }, 当页面滑动时我们接受对象e current表示当前滑块视图索引 可以看到滑动的时候,滑块视图与选项卡并没有关联...}, 选项卡已经跟页面关联了 接下来我们来开发滑块视图的y轴滚动区域 我们在滑块视图要展示每一个栏目下的文章列表,并且文章列表可以滑动(纵向滑动) 要实现上面需求我们在滑块视图里面在嵌套一个滚动区域...我们还要用这个高度减去顶部滑块选项卡的高度即可得到滑块视图的y轴滚动区域的高度 在页面加载时设置顶部选项卡高度 let res = uni.getSystemInfo({

    8.3K20

    数据人必会的Excel|掌握32个Excel小技巧,成为效率达人(一)

    对于Excel的学习,除了掌握各类函数公式之外,学习一些Excel的操作小技巧也是必不可少的,这些技巧能够使我们成为效率达人。...我们在来个视频,进行学习下这个快捷键操作! ?...技巧二:快速移动光标至边缘单元格 同样的面对大量数据,我们想要快速移动光标至边缘单元格也有相应的快捷键,Ctrl+方向键(上下左右),有了这个快捷键之后,我们就不需要滑动鼠标一行一行去找最末尾的单元格了...技巧八:快速选择区域 当提到快速选择连续区域时,你一定会想到直接通过鼠标进行框选,除了这个方法之外,我们也可以选中开始单元格,然后按住Shift,点击结束单元格,就选中起始单元格之间的所有数据了。...技巧九:冻结首行 在数据量很大的情况下,我们上下滑动数据表格的时候,列名也会跟着滑动,对于我们阅读数据十分不便,所以这个时候我们需要冻结窗格。

    2.6K20

    30分钟了解所有引擎组件,132个Unity 游戏引擎组件速通!【收藏 == 学会】

    轨迹效果是指物体在移动过程中留下的痕迹,例如火箭尾迹、手指滑动的轨迹等。 Trail Renderer可以将物体的移动轨迹以一定的精度绘制出来,并用材质渲染出来。...要移动顶点,请在鼠标悬停在顶点上时拖动顶点以使盒型碰撞体变大或变小。 盒型碰撞体是最常用的碰撞体之一,在游戏中经常会被用到做一些碰撞效果时使用,从而提高游戏的真实感和可玩性。...使用固定关节的最佳场合是在希望对象可以轻松相互分离时,或者在没有管控情况下连接两个对象的移动 用于将两个游戏对象固定在一起,从而实现刚体之间的约束。...它可以模拟物理学中的摩擦效应,使得两个游戏对象之间的运动更加真实。 Friction Joint 2D通常用于模拟各种摩擦装置、滑动物体等,例如滑动门、滑动箱子等。...例如,当玩家指定一个位置时,Nav Mesh Agent会自动计算最短路径,并且在移动时避免障碍物,从而实现自动导航的效果。

    7.1K35

    卷及网络的弱点,有人想用胶囊网络给解决掉

    也就是当我们给这个模型展示一张移动到右边的猫的图片时,模型预测的是一只移动到右边的猫;展示一张移动到左边的猫的图片时,模型预测的是一只移动到左边的猫。 ? 为什么要平移同变性呢?...卷积网络需要大量的数据来泛化 为了使卷积神经网络具有平移不变量,模型必须为每个不同的观测角度学习不同的滤波器,而这样就需要大量的数据来进行。...总之,利用重构的损失函数作为正则方法,胶囊网络能够通过无监督学习,在在整个物体和物体的姿态之间学习一个全局线性复本来作为权重矩阵。...因此,平移不变性就封装在这个权重矩阵中而不是在神经活动中,这样就使得神经网络有平移同变性。因此,在某种意义上,当图片和全局线性复本相乘时,就是在做一个「旋转和平移」的操作。...极大值池化是做路径规划的一个很原始的方式,它只让在池化中最活跃的神经元起作用。而胶囊网络就不同了,它会把信息传给上层中最擅长处理的胶囊。 ?

    1.1K10

    微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题

    cover-view 和 cover-image 构建的架子,用 position 的 fixed 固定定位在手机屏幕最下方,用真机调试是发现 tabBar 组件并不一定会固定在屏幕的最下方,而且如果页面滑动...,用 fixed 固定的区域会上下移动 官方demo 示例代码 原因: 在微信社区找相关问题发现是 cover-view 的原因,然后这个问题直到现在好像还没修复 解决方案 改用 view 和 image...基础组件构建架子就可以了 自定义导航栏、状态栏在不同机型的适配 背景原因 因为不同机型的导航栏和胶囊距上下间距不同,导致自定义的导航栏的高度不能固定。...需求是导航栏的文字要和胶囊对齐。...,单位px; 综上所述可知 胶囊距离状态栏的距离 = 胶囊距离屏幕顶部的距离(top) - 状态栏的高度(statusBarHeight) 通过这些参数你就可以写出自己想要的各种自定义导航栏的样式了

    3.7K10

    什么是胶囊网络?| 小白深度学习入门

    胶囊网络(CapNet) 胶囊网络(CapsNet)于2011年在Geoffrey Hinton的一篇名为《Transforming Autoencoders》的论文中首次出现。...所谓“胶囊(capsules)”指的是人脑中的一种结构,它们能够很好的处理不同类型的视觉刺激并对诸如位置、形制、速度等信息进行编码。 在深度学习中,胶囊则是嵌入的神经元集合。...右边部分负责将向量转换成一个近似的单位向量;左边部分是一个被称为Squashing的函数,使得输出的长度被压缩在0到1之间。前面我们提到过,这里输出的长度可以被理解为特征的概率。 ?...网络的第一层仍然是一个卷基层,第二层为主胶囊层,在主胶囊层中我们仍然使用了CNN中滑动窗口的概念。第三层为数字胶囊层,他的输出为1610的向量,其中每一个 161的向量对应着一个类的可能性。...胶囊网络中的胶囊单元给了我们构建深度神经网络时一个新的选型,通过动态路由机制网络也较好的解决了复杂网络难以训练的问题。

    6K20

    利用滤光片最大限度提高相机性能

    当油在水面聚集时,如图2所示,看到的颜色来自不同油层,水中的每一层油反射特定波长的光。...在机器视觉系统中,被反射的偏振光通常是不需要的,因为它会引起眩光,使拍摄对象的细节更难辨别。可以使用偏振滤光片去除这种不需要的光。 偏光片的工作原理是只透射特定偏振方式的光。...如果绳子的一端系在栅栏的固定点上,而另一端来回移动,绳子就会形成波浪。如果绳子要穿过尖桩栅栏,当绳子沿着栅栏的方向来回运动时,波就会穿过栅栏。...图13|机器视觉系统无法区分颜色差异 在成像系统中添加红色带通滤光片会显著增加绿色和其他颜色胶囊之间的对比度,如图14所示。绿色胶囊的强度值接近于零,而红色和橙色胶囊的强度值远高于150 DN。...每种颜色胶囊的强度值分为三个不同的范围:绿色胶囊的强度值在50以下,红色胶囊的强度值在50到100之间,橙色胶囊的强度值在100到150之间。

    1.1K01

    QT系统学习系列:1.2样式表子控件查阅

    类别 子控件名称 说明 查看子控件样式表应用 滑动条,滑动块相关 ::handle QScrollBar、QSplitter,QSlider 的手柄(滑块) 滑动条,滑动块相关 ::groove QSlider...的凹槽 滑动条,滑动块相关 ::corner QAbstractScrollArea中两个滚动条之间的角落 滑动条,滑动块相关 ::add-line QScrollBar增加行的按钮,即按下该按钮滚动条增加一行...滑动条,滑动块相关 ::add-page QScrollBar在手柄(滑块)和增加行之间的区域 滑动条,滑动块相关 ::sub-line QScorllBar减少行的按钮,即按下该按钮滚动条减少一行...滑动条,滑动块相关 ::sub-page QScrollBar在手柄(滑块)和减少行之间的区域 箭头相关 ::down- arrow QComboBox、QHeaderView 排序指示器、QScrollBar...::tab-bar QTabWidget的选项卡栏,此子控件仅用于控制QTabBar在QTabWidget中的位置,使用::tab设置选项卡的样式 选项卡栏,选项卡部件,可停靠窗口 ::tab OTabBar

    2.1K10
    领券