首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter质感设计之底部导航

BottomNavigationBar即底部导航控件。显示在应用底部的质感设计控件,用于在少量视图中切换。...底部导航包含多个以标签、图标或两者搭配的形式显示在项目底部的项目,提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕,侧面导航可能更好。...创建navigation_icon_view.dart文件,定义一个NavigationIconView类,用于管理BottomNavigationBarItem(底部导航项目)控件的样式、行为与动画...import 'package:flutter/material.dart'; // 创建类,导航图标视图 class NavigationIconView { // 导航图标视图的构造函数 NavigationIconView...类CustomIcon创建一个容器控件,作为一个自定义的图标使用。同时使用质感设计的弹出菜单控件切换底部导航的行为和样式。

3K21
您找到你想要的搜索结果了吗?
是的
没有找到

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

以下有一些方法可以让滚动的内容能正常显示在状态 后面: 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态背景,同时能确保内容视图不会出现在状态后面。...你可以用导航在不同视图间提供导航,或在上面放置管理当前视图内容的相关控件。如果你需要提供导航难以承载的大量控件同时又不是非要提供导航不可,你可以考虑使用工具(Toolbar)。...即使空间充足,也应当避免让过多的控件填满你的导航。一般来说,导航上应该不多于以下三个元素:当前视图的标题、返回按钮和一个针对当前的操作控件。...导航,工具,和标签 可以操作当前app视图中的对象的各种控件或对象 (默认情况下, 浮出层中的表格视图导航和工具的背景都是透明的,这样会让浮出层的毛玻璃效果展示出来) 在横屏的情况下,动作列表总是出现在浮出层里...(下图是iPhone自带的邮件应用,网络视图指的是下图中导航和标签中间的区域) ? API注释 想要了解如何在代码中定义网络视图,请参考Web Views.

10.1K51

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

UI Kit提供的界面组件有三类:(Bars),视图(Views),控件(Controls)。 ?...有时,导航的右侧也会有一个控件,如“编辑”或“完成”按钮,用于管理活动视图中的内容。在拆分视图中,导航可能会显示在拆分视图的单个窗格中。...导航控件 避免在导航上挤满太多控件。通常,导航最多只能包含视图的当前标题,后退按钮以及一个用于管理视图内容的控件。如果在导航中使用分段控件,则该不应包含标题或分段控件以外的任何控件。...例如,如果iOS设备上没有歌曲,则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。 始终在附加视图中切换上下文。...工具应该是当前页面中有意义并且常用的命令。 思考图标或文本标题按钮哪个更适合。当你需要3个以上的工具按钮时,图标的效果更好。如果是3个或3个以下的按钮,文本按钮可以更清晰。

9.8K10

iOS头部渐变的表格视图设计 原

iOS头部渐变的表格视图设计         今天再来给大家带来一个开发中常用到的视图控制器,在很多应用中,可能都会遇到这样的一个需求:表视图控制器最上方有一个头图控件,当表格视图滑动在顶部时,导航透明...,当表格视图逐渐向下滑动时,导航渐渐出现,并且在滑动期间,头图会展示相关的渐变动画效果。... *      2.这个视图控制器如果是被present出来的 则不会出现假导航  *      3.这个视图控制器中自带一个TableView 设置TableView的头图不会影响原动画效果  *...,我主要考虑两个需要优化的地方,第一是这个控制器在不同的场景下可能会有不同的结构,例如在导航结构中被push出来或者通过模态跳转被present出来,我在这个控件的实现时做了兼容,实际上无论有无导航控件内部都没有使用系统的导航...,而是模拟实现了一个自定义的导航来与系统的导航无缝衔接。

1.2K20

iOS 11 更大的导航 (官方翻译版)

有时,导航的右侧包含一个控件,如编辑或完成按钮,用于管理活动视图中的内容。在拆分视图中,导航可能会出现在拆分视图的单个窗格中。...导航是半透明的,可能具有背景色调,并且可以配置为在屏幕上键入屏幕时隐藏,发生手势或视图调整大小。 ? 考虑在显示全屏内容时暂时隐藏导航。当您想关注内容时,导航可能会分散注意力。...提示不需要导航时使用工具,或者想要多个控件来管理内容。请参阅工具导航标题 考虑在导航中显示当前视图的标题。在大多数情况下,标题可帮助人们了解他们正在查看的内容。...导航控件 避免拥挤导管的控制太多。通常,导航不应包含视图的当前标题,后退按钮和管理视图内容的一个控件。如果您在导航中使用分段控件,则该不应包含标题或除分段控件之外的任何控件。...考虑在导航中使用分段控件来展平应用程序的信息层次结构。如果您在导航中使用分段控件,请仅在层次结构的顶层执行此操作,并确保在较低级别选择准确的后退按钮。有关其他指导,请参阅细分控件。 ?

2.9K30

iOS好用的第三方侧边控件——MMDrawerController

iOS好用的第三方侧边控件——MMDrawerController 一、引言         很多应用程序都采用了侧边这样的界面结构,MMDrawerController是一个轻量级的侧边抽屉控件...= 1 << 3, //点击导航时可以关闭侧边 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边..., //中心视图控制器只有导航可以进行用户交互 MMDrawerOpenCenterInteractionModeNavigationBarOnly, }; */ @property (...UIBarButtonItem,可以直接在导航上使用。        ...2.同时展示左边与又边。 3.无法设置显示一个最小的抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边视图

2.8K20

Android开发笔记(一百四十四)高仿支付宝的头部伸缩动画

之所以要嵌套这么多层,是因为要完成以下功能: 1、CoordinatorLayout嵌套AppBarLayout,这是为了让头部导航能够跟随内容视图下拉而展开,跟随内容视图上拉而收缩。...如果导航是从收缩状态向下展开,则此时相应的做上述渐变动画的取反效果,即: 1、导航从收缩状态向下展开时,头部的各控件要慢慢向背景色过渡,也就是淡入效果;同时展开导航的下部分布局,并且该布局上的各控件渐渐变得清晰...看起来还比较复杂,如果只对某个控件做渐变动画还好,可是导航上的控件有好几个,而且并不固定常常会增加和修改。倘若要对导航上的各控件逐一动画过去,不但费力气,而且后期也不好维护。...为了解决这个问题,我们可以采取类似遮罩的做法,即一开始先给导航罩上一层透明的视图,此时导航的画面就完全显示;然后随着导航的移动距离,计算当前位置下的遮罩透明度,比如该遮罩变得越来越不透明,看起来导航就像蒙上了一层面纱...反过来,也可以一开始给导航罩上一层不透明的视图,此时导航控件是看不见的,然后随着距离的变化,遮罩变得越来越不透明,导航也会跟着变得越来越清晰了。

1.2K10

如何处理手势冲突 | 手势导航连载 (三)

那么,如何解决这个问题呢?我们准备了一张流程图帮助大家快速做出决策: △ 请点击图片放大查看 注解: 非粘性沉浸模式: 用户可以通过在系统上滑动来退出沉浸模式。...粘性沉浸模式: 用户可以通过在系统上滑动来暂时退出沉浸模式 这里我们向您进一步解释一下流程图里的内容。 问题 1: 应用需要隐藏导航或状态吗?...问题 3: 常用的视图/控件位于手势交互区域内/附近吗? 这个问题应该简单一些。注意,这个问题也包括那些占据屏幕较大区域,且包括了手势交互区域的视图/控件。...问题 6: 该视图/控件是否和强制系统手势交互区域重叠? 最后一个问题询问该控件是否位于系统强制手势导航交互区域内。...但请注意,我们依然需要在播放控件底部插入一个内边距,其值等于系统的高度,这样可以使歌曲名称等文本不会被系统导航条 (即屏幕底部的那条 "横线") 遮盖。

4.9K30

WPF面试题-来自ChatGPT的解答

导航控件(Navigation Controls):这些控件用于实现应用程序的导航和页面切换。...常见的导航控件包括Frame(框架控件)、Page(页面控件)、NavigationWindow(导航窗口控件)等。...如何在WPF应用程序中全局捕获异常? 在WPF应用程序中,我们可以通过以下步骤来全局捕获大部分异常: 在App.xaml.cs文件中,找到Application类的构造函数。...将e.Handled属性设置为true,表示异常已经被处理,防止应用程序崩溃。...外观:Window通常具有标题、边框和窗口控制按钮(最小化、最大化、关闭等),可以通过样式和模板进行自定义。而Page通常没有标题和边框,它的外观完全由其内容决定。

35530

iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

UIKit提供的UI组件可以大致分为以下4种类型: (Bars):包含了上下文信息来指引用户他们所在的位置,以及控件来帮助用户导航或执行操作。...从编程的角度来看,UI组件元素其实是视图的子类,因为它们继承了UIView。视图能绘制屏幕内容并知道用户何时在其范围内触屏。...使用导航(Navigation Bar)帮助用户轻松访问分层内容。导航的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。想要了解更多内容,请查看Navigation Bar....UIKit同时还提供了以下相关控件: 分段控件(Segmented Control)。分段控件让用户在一屏内就可以查到不同分类的内容,而不需要切换到其他屏幕。 工具(Toolbar)。...尽管工具导航或标签相似,但是工具不具导航作用。相反,工具为用户提供了可以控制当前屏幕内容的控件

1.8K41

Android Studio 3.6 发布啦,快来围观

拆分视图并放大设计编辑器 ? 此版本中包含对视觉设计编辑器的以下更新: 设计编辑器(例如,布局编辑器和导航编辑器)现在提供一个拆分视图 的支持,可以同时查看UI 的设计视图和代码视图。...五、在APK分析器中反混淆类和方法字节码 使用APK Analyzer检查DEX文件时,可以按以下步骤对类和方法字节码进行模糊处理: 1.从菜单中选择 Build > Analyze APK。...在虚拟设备运行时,最多可以添加两个以下显示: 1.打开扩展控件,然后导航到 Displays 选项卡。 2.通过单击添加 Add secondary display 来添加另一个显示。...另外,如果在后台运行SDK下载任务,则现在可以使用状态中的控件暂停或继续下载。 ? 状态中的后台下载任务,带有新控件,可暂停或继续下载。...要变通解决此问题,请执行以下操作: 1.通过单击 File > Settings 打开设置窗口。 2.导航到Appearance & Behavior > Appearance。

8.9K20

iOS导航使用总结

,用于优化滑动类视图(继承于UIScrollView的视图)在视图控制里的显示: iOS系统的导航UINavigationBar与标签UITabBar默认都是半透明模糊效果,在这种情况下系统会对视图控制器的...但是对于普通的视图,此时我们仍然需要注意:非滑动视图的布局仍然要考虑导航和标签高度,注意不被遮挡,比如布局的时候加上导航高度,以免内容被导航遮挡。...导航透明情况下,滑动视图自动偏移,普通视图被遮挡 其实,这种系统的优化也是可以控制关闭的,关闭优化之后,滑动视图就会和普通视图一样,如果还设置其布局的原点是(0,0),其内容就会被导航所覆盖,关键代码如下...,默认值是UIRectEdgeAll,即:当前视图控制器里各种UI控件会忽略导航和标签的存在,布局时若设置其原点设置为(0,0),视图会延伸显示到导航的下面被覆盖。...,那么视图控制器里的控件就会默认从(0,64)开始布局了,设置导航不透明的方法如下: self.navigationController.navigationBar.translucent= NO;

3.2K20

处理视觉冲突 | 手势导航 (二)

在上一篇文章中,我们介绍了如何将应用构建到全面屏设备。然而有些交互可能导致应用的某些视图被系统遮盖,导致用户无法看见或操作。本文正是为帮助您解决这个问题而撰写——如何判断安全的交互区域。...Insets 区域负责描述屏幕的哪些部分会与系统 UI 相交 (intersect),例如导航或状态。如果您的控件出现在了这些区域内,就可能被系统 UI 遮盖。...这套 insets 描述了系统占据的区域,方便您使用对应的数值将自己的控件从系统下面移开。...注意,使用可点击区域里的数值进行布局时,依然可能导致自己的控件与系统 UI 在视觉上重叠,这一点与系统窗口区域 insets 不同,使用后者的值对自己的控件进行位移后能确保不会与系统/导航发生视觉重叠...关于如何修改系统手势区域,请参考我们接下来的文章《如何处理手势冲突 | 手势导航连载 (三)》。 强制系统手势边衬区只包含那些系统保留的区域,在这些区域内系统手势操作永远优先。

2.8K30

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

4.3.8 页面控件 页面控件告诉用户当前共打开了多少个视图,还有他们正处在其中哪一个。 ? API注释 想要了解如何在代码中定义页面控件,可以参考UIPageControls....当视图数量超过页面宽度可承载的氛围时,点的大小和间距并不会因此变小(如果需要显示的点超过一定数量,系统会把它截断) 默认情况下不支持视图之间导航;你必须实现视图视图之间的导航并适当地更新页面控件状态...页面控件不显示视图如何相互关联的,而且不表明哪个视图对应于每个点,因此它不能帮助用户导航到特定的视图。 避免显示太多点。超过10个点就很难让用户一目了然,而超过20个视图在序列中访问起来非常耗时。...如果用户可以在你的应用程序打开超过20个视图,请考虑给视图一个不同的展示方式,以提供关于视图的详细信息,使其支持不连续的导航。 在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。...举个例子,如果一个模态视图中含有导航条和取消或完成任务的按钮,这里的导航条样式应该与你的app中导航条一样。 合适的话,在模态视图里加入可以说明任务内容的标题。

13.2K30

Android5.0新控件实例详解

谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种。 ? 1....CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLayout。它是一个带圆角的背景和阴影FrameLayout。...Toolbar(工具) Toolbar顾名思义是工具,作为ActionBar的替代品出现,谷歌推荐使用Toolbar替代ActionBar。...Toolbar可能包含以下可选元素的组合: – 导航按钮 – 品牌的Logo图像 – 标题和子标题 – 一个或多个自定义视图 this.toolbar = (Toolbar) findViewById...ActionBar,之后就可以获取ActionBar并进行操作,操作的结果就会反应在toolbar上面 setActionBar(toolbar); //设置了返回箭头,,相当于设置了toolbar的导航按钮

1.1K10
领券