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

【Flutter 实战】1.20版本更新及新增组件

标题 选中的日期 切换到输入模式 年选择菜单 月份分页 当前时间 选中日期 输入模式 结构图： ?...设置深色主题 设置深色主题使 builder ，其用于包装对话框窗口小部件以添加继承的窗口小部件，例如Theme，设置深色主题如下： var result = await showDatePicker(...标题 选定的日期范围 切换到输入模式 月和年标签 当前时间 开始时间 选中时间范围 结束时间 国际化 国际化都是一个套路，下面以 showDatePicker 为例： 在 pubspec.yaml 中引入...iOS风格日期选择器 基础使用 CupertinoDatePicker 是 iOS风格的日期选择器。...time：只显示时间，效果：4 | 14 | PM date：只显示日期，效果：July | 13 | 2012 dateAndTime：时间和日期都显示，效果：Fri Jul 13 | 4 | 14

5K10

最新iOS设计规范七｜10大视觉规范（Visual Design）

根据各种环境变量，实际颜色值可能在不同的释放之间波动。始终使用API应用系统颜色。 ? iOS 13还引入了一系列六种不透明的灰色颜色，你可以在半透明效果不佳的极少数情况下使用它们。...使用适合当前外观模式的颜色。语义颜色（如分隔符）会自动适应当前外观。当你需要自定义颜色时，将颜色集资源添加到APP的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。...当你使用动态颜色对其进行着色或添加活力时，符号在两种外观模式下看起来都很棒。 必要时为明暗外观设计单独的标志符号。在浅色模式下使用线性图标或符号，在深色模式下可能则需要更实心的填充图标或符号。...文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。初级、次级、三级和四级标签颜色会自动适应浅色模式和深色模式下的外观。 使用系统视图绘制文本字段和文本视图。...通常，日期应反映观看活动的人的时区。但是，在某些情况下，例如在航班跟踪APP中，可以更清楚地显示航班开始的日期和时区。

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

苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。...原因有以下几点： 查看照片等媒体内容会更加清晰，生动 在夜晚等光线较暗的模式下可以更舒适的浏览 很多用户觉得深色模式很酷 苹果的新规范有如下五个设计目标： 1.熟悉的感知 2.平台级别保持一致性 3....专注并聚焦内容: 暗模式将焦点放在界面的内容区域，这样会使内容区域更区别于背景，将重要内容凸显出来。...您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。...当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。 ?

4.4K40

iOS应用黑暗模式设计终极指南（附套件下载）

在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。 ? 在WWDC 2019大会上，苹果公布了iOS 13的所有新功能。...在所有超级令人兴奋的功能中，关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人，您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后，人们可以选择采用深色系统外观。...每个按钮都有不同的颜色，iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同（或分组）内容的元素。 ? 需要注意，黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。...08 强调色（Tint Color） Apple提供了9种不同的强调颜色，可在整个应用程序中使用。它们可用于文本，图标或形状。我将下面的强调色改为不同颜色，你会发现他们会变成这样的: ?...但是，这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色，则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下的颜色是稍有差异的，请务必注意。

3.2K10

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

可以的话，让活动指示器的尺寸和颜色与它所在的背景协调。 4.3.2 添加联系人按钮 添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。 ?...4.3.3 日期时间选择器 日期时间选择器展示关于日期和时间的组件，比如小时，分钟，天，以及年。 ? API注释 想要了解如何在代码中定义添加日期时间选择器，请参考UIDatePicker....日期和时间模式（默认模式）包含日期、小时、和分钟，以及一个可选的AM/PM值。 时间。时间模式包括小时和分钟，以及可选的AM/PM值。 日期。日期模式包括月份，天以及年三个值。 倒计时器。...选择器： 是日期时间选择器的通用模式 包括一个或多个滑轮，每个滑轮含有一组值 当前选中的值在中间，以深色标识 不可以自定义大小（选择器的大小与iPhone的键盘相同） 使用选择器可以让用户更容易从一系列不同的值中间进行选择...举例来说，你希望用户能更方便地输入网址、密码或者电话号码。iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。

13.2K30

DarkMode(1)：产品应用深色模式分析

iOS 13 的发推出了深色模式（Dark Mode），不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。  ...让使用者沉浸于内容 将 Dark Mode 翻译为「夜间模式」，是因为前者的使用场景更广，因此使用「深色模式」这样的翻译更恰当。 黑色更有利于我们沉浸于内容本身，无论是生产内容还是消费内容。...论是浅色还是深色外观下，我们都应该在界面层级中，让离用户在逻辑关系上更近的颜色更亮一些。 再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。...你可以在这里下载苹果官方提供的    iOS 13设计模板的 Sketch 文件，其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。...例如，深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。

1.7K20

Figma技巧超全合集！40+隐藏技能！快收藏！（第一辑）

11.Cmd + G: 对选定元素进行分组。 12.Cmd + Option + G：将所选元素框在分组中。有时在调整元素大小时使用框架而不是组，这样更方便。...13 — Control+ Shift + ?：显示所有键盘快捷键。如果你忘记了快捷键，就看看帮助吧。 14.Shift + Cmd + K：从文件中选择照片。因此，可以集中选择照片。...15.颜色选择：让我们选择一个可以填充颜色的元素。在元素中选择填充选项后，您可以使用向上（浅色）和向下（深色）箭头键找到颜色的浅色调和深色调。按住Shift调整，则变化差异更大。...16.文本自动高度和自动宽度 当我们想要调整文本框的大小时，我们从右侧面板调整就可以了。特别是当我们选择复制粘贴文本时，该文本将以其默认样式复制。...此时我们可以应用一个小技巧：我们可以通过双击文本框的任意边缘将文本从自动高度更改为自动宽度。 17.快速定位元素 在大文件中，不少元素很难在画布上找到。我们可以在左侧图层面板中找到它们。

2.6K30

微信黑暗模式终于来啦！UI设计细节完全分析及体验

前一段时间传的沸沸扬扬的苹果与微信黑暗模式的纠葛，终于以微信适配iOS端告终。3月22日静电一觉醒来，微信已经正式开启了“暗黑”模式。...不过，很多人也许发现不了，因为手机白天还是浅色模式，只有到晚上才会改为黑暗模式。 ? 如何开启微信黑暗模式？ 首先，你必须更新到iOS端的微信7.0.12版本。...在Tint颜色上，亮色模式和暗色模式的颜色也不一样，这符合iOS 13 黑暗模式设计的规则定义。一般来说Tint颜色，黑暗模式下更亮一点。...聊天列表页面 左侧色卡为浅色模式，右侧为深色模式，均没有考虑透明度影响。 ? 图标颜色分析对比 在聊天列表，通讯录列表页面，系统图标在两种模式下的颜色均保持一致，未做改变。...但在发现页面中，列表左侧的icon颜色则有略微变化。总体来说，黑暗模式下比亮色模式下的图标颜色更“亮”。是不是这里比较拗口？也就是下图中，右侧比左侧的图标，亮度提升啦！ ?

1.4K20

Android 深色模式的项目应用

颜色：新建values-night文件夹，里面是深色模式下的colors.xml文件 图片：新建drawable-night-xxhdpi图片文件夹 2).启动页我们经常会放品牌图，页面的深色模式可以通过...setTheme(R.style.ToolBarDarkActionBar) 4).可以使用系统自己的颜色值： ?android:attr/textColorPrimary 这是一种通用型文本颜色。...它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。...5).在dialog打开后，再切换系统的深色模式，这时使用系统的颜色会不生效，需要使用自己的color文件里的颜色。具体出现在首次打开应用时，弹出的隐私弹框。...6).需要使用png后缀的图，最好别直接将jpg改为png，可以打开图片后将图片另存为png格式。我做时候debug模式下没问题，打release包的时候就提示了这个问题。

1.1K10

Android 深色模式的项目应用

颜色：新建values-night文件夹，里面是深色模式下的colors.xml文件 图片：新建drawable-night-xxhdpi图片文件夹 2).启动页我们经常会放品牌图，页面的深色模式可以通过...setTheme(R.style.ToolBarDarkActionBar) 4).可以使用系统自己的颜色值： ?android:attr/textColorPrimary 这是一种通用型文本颜色。...它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。 ?android:attr/textColorSecondary可作为第二文本颜色，相对于上面的颜色较浅。...5).在dialog打开后，再切换系统的深色模式，这时使用系统的颜色会不生效，需要使用自己的color文件里的颜色。具体出现在首次打开应用时，弹出的隐私弹框。...6).需要使用png后缀的图，最好别直接将jpg改为png，可以打开图片后将图片另存为png格式。我做时候debug模式下没问题，打release包的时候就提示了这个问题。

1.4K63

iOS10-iOS15主要适配回顾

ATTrackingManager请求权限不弹框 4、iOS15终于迎来了UIButton的这个改动 ios14适配 1、更改了cell布局视图，之前将视图加载在cell上,将会出现contentView...遮罩,导致事件无法响应,必须将customView 放在 contentView 上 2、UIDatePicker默认样式不再是以前的，需要设置preferredDatePickerStyle为 UIDatePickerStyleWheels...3、IDFA必须要用户用户授权处理，否则获取不到IDFA 4、 UIPageControl的变化 具体参考iOS 14 UIPageControl对比、升级与适配 ios13适配 -1、 iOS 13...推出暗黑模式，UIKit 提供新的系统颜色和 api 来适配不同颜色模式，xcassets 对素材适配也做了调整 2、支持第三方登录必须，就必须Sign In with Apple 3、MPMoviePlayerController...废弃 4、iOS 13 DeviceToken有变化 5、模态弹出默认不再是全屏。

1.2K50

【Web技术】623- 简单好用的前端深色模式主题化开发方案

iOS13 引入该特性后各大应用和网站都开始支持了深色模式。...在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深色模式难吗？...深色模式开发 语义化色彩变量 深色模式涉及到了大量网站视觉的“反色”，在已有的网站当中，应该好好排查和梳理网站的颜色，把颜色归一和约束到一定的变量范围和数量里，并给颜色的不同使用场景一个不同的语义变量名...从文本颜色上我们举个简单的例子： 通常的网站里都会有正文（主要文本），帮助提示信息（次要文本），文本占位符。...有没有更简单的深色模式映射切换？比如使用HSL替代RGB色值。 HSL色值的表达形式是通过色相、饱和度、亮度，既然深色模式是调整亮度和饱和度，那是否可以通过hsl色值来自动计算呢？

2K10

APP设计实例解析，深色模式为什么突然就火了？

苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。...知乎在设计夜间模式时，知乎采用了主色调蓝色+深灰色的搭配，深蓝和灰色作为背景，展示出的效果既有强烈的对比，又摆脱了深色的压抑感。 与豆瓣不同，知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。...在最近一次更新中，B站终于对深色模式进行了优化，适度提亮了视频封面和图标的亮度，将多彩型图标调整为了单线型图标，既统一了画面风格，又提升了界面阅读体验。...同样，由于背景颜色太深，导致百度网盘的文本和背景对比度太大，也存在难以阅读的情况，对于诵读困难症患者来说，在阅读时会感觉文字在旋转、模糊。...从上述APP设计案例中，我为大家总结了以下几点建议以作参考： 1.避免使用纯黑色； 2.避免使用高饱和度的颜色； 3.文本颜色选用高亮色，但不宜使用纯白； 4.做好情感化设计； 5.注意结构和层次感；

1.4K30

APP设计实例解析，深色模式为什么突然就火了？

苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。...知乎在设计夜间模式时，知乎采用了主色调蓝色+深灰色的搭配，深蓝和灰色作为背景，展示出的效果既有强烈的对比，又摆脱了深色的压抑感。 与豆瓣不同，知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。...在最近一次更新中，B站终于对深色模式进行了优化，适度提亮了视频封面和图标的亮度，将多彩型图标调整为了单线型图标，既统一了画面风格，又提升了界面阅读体验。...同样，由于背景颜色太深，导致百度网盘的文本和背景对比度太大，也存在难以阅读的情况，对于诵读困难症患者来说，在阅读时会感觉文字在旋转、模糊。...从上述APP设计案例中，我为大家总结了以下几点建议以作参考： 1.避免使用纯黑色； 2.避免使用高饱和度的颜色； 3.文本颜色选用高亮色，但不宜使用纯白； 4.做好情感化设计； 5.注意结构和层次感；

1.9K50

深色模式适配指南

背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...然后将系统设置为深色外观： ? 页面已经加载了对应深色主题的样式： ?...native 深色适配 iOS 在 iOS 系统中，开发者从颜色和图片两个方面来进行适配，我们不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。...当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。...android:attr/textColorPrimary 这是一种通用型文本颜色，它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色，该颜色包含一个停用状态。 ?

2.7K31

暗黑模式在 Trip.com App 的实践

一、背景 在 2019 年，随着 iOS 13 与 Android Q 的推出，Apple 和 Google 同时推出主打功能暗黑模式，分别为 Dark Mode(iOS)/Dark Theme(Android...在前期预研中，我们发现 66% 的 iOS 13 用户选择打开Dark Theme，可见用户对暗黑模式的喜爱和期待。 那么 Dark Theme 能带来哪些好处呢？...2）降低饱和度，提升可读性 设计 Dark Theme 时，尽量避免使用高饱和度的颜色，因为这些颜色会在深色背景上产生视觉抖动，导致人眼产生疲劳。...3）增加对比度，提升可用性 依据 WCAG2.0 AA 设计标准，文本的视觉呈现以及文本图像至少要有4.5:1的对比度。深色表面选取白色文字达不到 AA 标准。 ?...3.1 iOS 我们为 iOS 13 以上用户提供了两种主题模式的选择： 自适应模式：跟随系统展示 Light/Dark 主题 强制 Light 模式：App 保持 Light 主题，不随系统主题变化

1.9K20

CSS变量实现暗黑模式，我的小铺页面已经支持

最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。...这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 ?...带上 Dark 颜色变量并在下面添加 @media 查询： /* 定义 dark 模式的颜色 */ @media (prefers-color-scheme: dark) { :root {...如果有人使用深色操作系统主题并访问您的网站，您的网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面，效果，支持手动切换和自动切换两种。...将复选框更改为 number 并单击 + 符号。 将值更改为 1 并单击 tick 按钮。 现在页面应该变黑。 回到您的网站，主题应该已自动更新为黑暗模式。

1.6K10

最新iOS设计规范五｜3大界面要素：控件（Controls）

三、情境菜单（Context Menus） 在iOS 13及更高版本中，你可以使用情境菜单让用户访问与APP相关的其他功能，而不会使界面混乱。 ?...，以使系统使用当前平台和日期选择器模式来确定适当的显示样式。...日期选择器具有四种模式，每种模式都呈现一组不同的可选值。 日期。显示月份，月份中的几天和年份。 时间。显示小时，分钟和（可选）AM / PM名称。 日期和时间。...当人们点击按钮时，日期选择器将扩展为模式视图，从而提供对熟悉的日历样式编辑器和时间选择器的访问。在模式视图中，人们可以对日期和时间进行多次编辑，然后在视图外部轻按以确认他们的选择。...网络加载指示（Network Activity Indicators） 网络加载指示在iOS 13和全面屏显示的设备上已被弃用。

8.5K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券