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

Flutter 全栈式——页面框架

对于没有相关基础的人,在正式学习App的UI之前,建议先了解Material Design相关的知识 关于Material Design设计风格的资料 MaterialApp MaterialApp代表使用...,按钮text等 localeListResolutionCallback LocaleListResolutionCallback 该回调负责在应用启动时以及用户更改设备的区域设置时选择应用的区域设置...debug横幅 debugShowMaterialGrid bool debug模式下是否显示Material网格 // 在构建UI前,设置一些属性 MaterialApp( builder...)抽屉菜单 drawerScrimColor Color 打开侧滑菜单时遮盖在主要内容区的蒙层颜色 backgroundColor Color 内容的背景颜色。...DragStartBehavior 处理拖动开始行为的方式 drawerEdgeDragWidth double 水平滑动将要打开侧滑菜单的区域的宽度 extendBody bool 若为true且指定了

2.9K30

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

这是一套高度自恰的设计规范,有着相当严密的内部逻辑,在 Material Design 的内在隐喻逻辑的推动下,严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。...: ·突出的方式,是使用直接可见的图标来打开或者关闭主题 ·不那么突出的方式,是在菜单或者APP设置中放置开关 ?...在APP的顶部菜单中显示主题开关 ? 在弹出菜单的菜单层中显示开关 ? 在APP的设置列表当中显示开关 属性 深色主题使用的是深灰色,而不是黑色来作为主要的色彩。...大面积控件区域 参考资料(需要梯子): Bottom app bar Backdrop 对于一些使用了较大区域的控件或是弹出式菜单,应该使用深色主题的基准色来作为色彩。 ?...错误 应该避免将配色中的主色引用到弹出菜单的背景上,这回导致明亮的色彩盖住多半屏幕。

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

    iOS开发常用之网络

    其他UI AwesomeMenu - 最多人用的路径菜单。 DCPathButton - Path,4.0的弹出菜单,呼出或者关闭菜单时,多个小图标会分别按照逆时针和顺时针的方向进行滚动。...,可以设置打开或关闭。...所以想支持到iOS8.0,支持自定义,支持等宽排列,支持从左向右排列。 类似美团的下拉菜单 - 类似美团的下拉菜单,源码推荐说明。...类似美团的下拉选项 - 类似于美团,大众点评的下拉菜单选项,code4app代码,评论代码有瑕疵。 CRMediaPickerController - 一个简单易用的图片/视频选择器.1。...ADo_GuideView - 转动的用户引导页(模仿网易bobo)因为没有从应用程序包里抓到@ 3x的图片,建议在iPhone5模拟器运行,保证效果〜(版本新特性,导航页,引导页)。

    23.7K10

    AngularDart Material Design 选择 顶

    MaterialSelectComponent Selector: material-select> 材料选择是用于从集合中选择项目的容器,使用复选图标标记所选选项。...通过SelectionOptions实现的ObserveAware接口支持异步建议。 材料选择具有固定的最大高度和自动溢出。 一旦有用例,我们可以为自定义最大高度添加属性。...popupClass - 要添加到下拉列表弹出窗口的样式类,以便可以以封装方式设置弹出窗口的样式。 有关文档,请参阅MaterialPopup。...使用labelFactory而不是它允许更好的树可抖动代码。 listAutoFocus bool  弹出窗口打开时是否默认聚焦选项列表。...当弹出窗口中的另一个元素专注于打开时,应设置为false,例如一个搜索框。 options SelectionOptions  用于此选择模型的选项。

    6K20

    Material Design — 菜单(Menus)

    菜单(Menus) Material Design链接:菜单 ? 菜单 菜单的形式是在短暂的动作条上展示选项列表。 菜单出现在与按钮,操作或其他控件的交互中。...左:应用栏中的操作太多时将会设置一个菜单    右:包含五个选项的菜单 菜单标签 按钮或控件的标签应该简洁而准确地反映菜单内的项目(如下图)。...例如,重做在没有任何可重做的操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用的例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开时,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。 ?...向下展开的简单菜单 ? 向上展开的简单菜单 ·不要在简单菜单弹出的第一个选项上放列表中的非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。

    5.8K100

    flutter 起步

    flutter简介Flutter是谷歌的移动UI框架,可以运行在ios与android系统上,可以以完成app的开发,使用情况页面大多数涉及到flutter 开发的app 都是混合开发,占比并不多。...控件类型从StatelessWidget到StatefulWidget的转换,因为Flutter在执行热刷新时会保留程序原来的state,而某个控件从stageless→stateful后会导致Flutter...actions → List - 一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示;对于不常用的菜单通常使用 PopupMenuButton...来显示为三个点,点击后弹出二级菜单。...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。

    4.5K20

    AngularDart Material Design 输入 顶

    通过SelectionOptions实现的ObserveAware接口支持异步建议。 弹出建议列表具有最大高度和自动溢出。 一旦有用例,我们可以为自定义最大高度添加属性。...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择中的第一个选定值在选项中有效       2.如果选择没有选定值,则选项中没有任何活动 inputText String...selection SelectionModel  如果设置,自动建议将使用提供的可观察SelectionModel对象。 默认情况下使用单个选择模型。...shouldClearOnSelection bool  从菜单中选择项目后是否清除文本。 showClearIcon bool  显示或隐藏尾随关闭图标。...Accessor始终设置从输入设置的原始String值,但仅在可以解析输入时设置Control的值。 keypressUpdate属性在每个按键上都有值更新,而默认值是仅在模糊事件上更新的值。

    5.3K40

    IntelliJ IDEA 2023主题 图标 这样配置 ,让你的IDEA好看到爆炸!

    那安装好之后,这个插件他会弹出一个设置窗口: 这个设置比较简单,这里就不具体介绍,大家挑自己喜欢设置即可。...那这里,如果你不小心关掉了,那也没关系,我们可以从 Setting 进去,搜索 Material,就可以找到。 这个设置地方,首先我们挑选自己喜欢的主题。...那第二点,设置 Tab(标签页) 的大小,高度这些。 这里的 Tab,指的就是上方窗口的标签页 第二个就是设置标签页的高亮颜色,当这个标签页被选中的时候,下方就会显示这个高亮颜色。...第三点,设置 Compact 这个选项。 那这个选项,主要是减少 UI 的高度,设置之后看起来就可以更紧凑一点。 第三个设置选项,Components 选项。...字体安装完成之后,打开 IDEA Setting-Font 设置选项,选择 Fira Code 字体或者 JetBrains Mono 字体,选中 Enable ligatures。

    2.6K10

    这样设置,让你的 IDEA 好看到爆炸!

    Midnight Blue Material Theme UI 上面这个插件它仅仅提供几个主题,下面这款插件呢,它的功能的就很齐全,不仅能设置主题,还能设置 IDEA 其他 UI。...那这里,如果你不小心关掉了,那也没关系,我们可以从 Setting 进去,搜索 Material,就可以找到。 这个设置地方,首先我们挑选自己喜欢的主题。 ?...那第二点,设置 Tab(标签页) 的大小,高度这些。 这里的 Tab,指的就是上方窗口的标签页 ? 第二个就是设置标签页的高亮颜色,当这个标签页被选中的时候,下方就会显示这个高亮颜色。...第三点,设置 Compact 这个选项。 ? 那这个选项,主要是减少 UI 的高度,设置之后看起来就可以更紧凑一点。 第三个设置选项,Components 选项。 ?...字体安装完成之后,打开 IDEA Setting-Font 设置选项,选择 Fira Code 字体或者 JetBrains Mono 字体,选中 Enable ligatures。 ?

    2.6K21

    IDEA 这样设置,好看到爆炸!!!

    Material Theme UI 上面这个插件它仅仅提供几个主题,下面这款插件呢,它的功能的就很齐全,不仅能设置主题,还能设置 IDEA 其他 UI。...那安装好之后,这个插件他会弹出一个设置窗口: ? 这个设置比较简单,这里就不具体介绍,大家挑自己喜欢设置即可。...那这里,如果你不小心关掉了,那也没关系,我们可以从 Setting 进去,搜索 Material,就可以找到。 这个设置地方,首先我们挑选自己喜欢的主题。 ?...第三点,设置 Compact 这个选项。 ? 那这个选项,主要是减少 UI 的高度,设置之后看起来就可以更紧凑一点。 第三个设置选项,Components 选项。 ?...字体安装完成之后,打开 IDEA Setting-Font 设置选项,选择 Fira Code 字体或者 JetBrains Mono 字体,选中 Enable ligatures。 ?

    1.5K20

    【软件开发规范七】《Android UI设计规范》

    现在,多数标注工具都支持 dp 标注功能,比如 MarkMan,如果UI设计者是按照1280*720的尺寸设计的效果图,在标注时选择xhdpi即可: ​编辑 使用 MarkMan 进行 dp 标注 DP...编辑 对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。 ** 提取颜色 ** ​编辑 Android L可以从图片中提取主色,运用在其他UI元素上。...通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。 狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。 ​...编辑 选择器(Pickers) ​编辑 选择器提供了一个简单的方法来从一个预定义集合中选取单个值。 ​...编辑 日期选择器 ​编辑 时间选择器 进度和动态(Progress & activity) ​编辑 ​编辑 线形进度条只出现在纸片的边缘 ​编辑 环形进度条也分时间已知和时间未知两种

    5.1K20

    全功能数据库管理工具-RazorSQL 10大版本发布

    可以通过 View -> Legacy UI Mode 菜单选择以前的外观。 Mac:现在默认自动检测暗模式/亮模式。...注意:此设置不会对不使用客户端计算机时区进行日期/时间显示的驱动程序产生影响 添加了对在验证 JDBC 连接时使用 PostgreSQL pgpass 文件格式的支持 添加了对在验证 JDBC 连接时使用密码文件...RazorSQL 在屏幕上的位置 从高分辨率显示器移动到非高分辨率显示器时,RazorSQL 不再自动最大化,除非之前的宽度和高度大于新显示器上的最大屏幕分辨率 通过 UCanAccess 驱动程序连接到...,弹出菜单字体不会增加 深色模式:匹配括号/括号高亮颜色难以看到 Mac:在某些情况下,查看菜单未正确显示当前设置的外观选择 通过 UCanAccess 驱动程序连接到 MS Access 时,日期字段在导入工具和生成...文件系统浏览器:Windows / Linux:文件名可能会被截断 文件系统浏览器:突出显示与文件名标签不匹配的日期和大小标签的颜色前景 Mac:如果从视图菜单中选择暗模式,将选择切换到自动检测暗/亮模式不再重新打开自动检测

    3.9K20

    React UI组件库教程

    它是一个全面的预构建 UI 组件集合,可以立即在生产中使用。特点:全面的组件集合: Material-UI 包括许多组件,包括按钮、菜单、表单、表格等。...移动优先的方法: Material-UI 设计为移动优先,这意味着这些组件在任何设备上都会表现出色,从智能手机到桌面设备。...专注于状态管理: Headless UI 跟踪组件状态(打开/关闭,选中/未选中等),但将视觉表示完全留给你。3....Mantine UI 的组件库涵盖了多种场景下的常用组件,从基础的表单输入到复杂的布局和交互工具都应有尽有,同时提供了高度的可定制性,让开发者能够快速实现自己的设计目标。1....表单组件提供了从输入框(TextInput)、单选框(Radio)、复选框(Checkbox)到复杂表单验证工具的全套支持。

    5100

    基于web的项目资源分配系统

    从用户打开编辑器开始,到用户点击提交按钮这个过程封装成一个promise。 和编辑器功能相关的模块包括异步封装模块,UI布局模块,表格交互模块。...图5.1 前后端模块一览 5.1 前端 5.1.1 表格交互模块 context菜单是鼠标右键弹出的菜单。在表格的任意位置点击都可以触发菜单,但是点击的位置会影响当前聚焦的对象。...其中async.js提供了所有封装好的异步操作,从任务的开始到结束都封装在一个promise内,等待调用。根据类型,这些异步模块分为编辑器UI异步工具和网络类异步工具。 1)编辑器UI异步。...在很多情况下,UI的变化是异步完成的,比如UI的加载有时候就很慢,还有比如某一个对话框需要等侧边栏隐藏起来后才能打开。...所以本系统准备了3个编辑器对话框的异步函数,分别是登录框,person编辑框以及project编辑框。Promise从对话框打开的一瞬间开始,到用户点击确定或取消时结束。

    4.5K70

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    首先点击窗口的 View 菜单,找到 Tool Window 子菜单,然后选择 Layout Inspector,这样就打开了布局检查器窗口。 布局检查器仅显示正在运行的进程的 UI 层次结构。...Run 按钮来启动应用; 如果您的应用进程已经运行,点击 select process,选择正在运行的设备,然后从设备右侧的列表来选择一个已运行的应用。...您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。和旋转特性一样,这个功能也仅适用于 Android 10 以上的设备。 通过布局检查器您还可以将新设计的界面和现有 UI 进行比较。...打开 Android Studio 4.0,然后在 File 菜单里选择 New Project; 选择 Bottom Navigation Activity,点击 Next 然后点击 Finish;...在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。 有可能是 navigation host 的尺寸设置错了,我们尝试把它的高度设置为 'wrap_content': <!

    2.6K10

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    首先点击窗口的 View 菜单,找到 Tool Window 子菜单,然后选择 Layout Inspector,这样就打开了布局检查器窗口。 布局检查器仅显示正在运行的进程的 UI 层次结构。...Run 按钮来启动应用; 如果您的应用进程已经运行,点击 select process,选择正在运行的设备,然后从设备右侧的列表来选择一个已运行的应用。...您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。和旋转特性一样,这个功能也仅适用于 Android 10 以上的设备。 通过布局检查器您还可以将新设计的界面和现有 UI 进行比较。...打开 Android Studio 4.0,然后在 File 菜单里选择 New Project; 选择 Bottom Navigation Activity,点击 Next 然后点击 Finish;...在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。 有可能是 navigation host 的尺寸设置错了,我们尝试把它的高度设置为 'wrap_content': <!

    2.5K20

    PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

    Material Theme UI 主题界面插件 Material Theme UI主题界面插件,旨在提供基于 Material Design设计语言的用户界面主题。...主要功能包括: 外观样式: Material Theme UI 插件会为代码编辑器添加 Material Design 风格的外观样式,包括按钮、边框、工具栏等元素,以及配色方案。...颜色方案: 插件通常提供多种 Material Design 风格的颜色方案供用户选择,用户可以根据自己的喜好和需求来选择合适的配色方案。...增强用户体验: Material Theme UI 的目标是提供一种清晰、现代的用户界面,从而增强用户的使用体验,使编辑器更加舒适和易用。...但博主不建议安装汉化插件,最好熟悉英文的界面有助于编程的学习~ Pycharm常用快捷键 重命名项目Shift+F6 选择项目点击Shift+F6在弹出的输入框中输入要修改的名称确认无误回车即可 运行代码

    5.5K40
    领券