文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【UI 设计 - Adobe Illustrator】基本设置 (图像显示 | 图像缩放 | 置入导出 | 标尺 | 网格 | 参考线 | 画板)

设置图像显示效果 (1) 轮廓模式 切换到轮廓模式 :  -- 加载视图 : "文件" -> "打开" 指定 .ai 文件; -- 轮廓模式 : 选择 "视图" -> 轮廓, 快捷键 Ctrl + Y;...-- 轮廓模式样式 :  -- 切换回预览模式 : "视图" -> "预览"; (2) 屏幕显示模式设置 屏幕显示模式设置 : 按 F 键自动切换; -- 正常屏幕模式 : 正常, 上面有菜单栏...隐藏工具栏 和 浮动面板(右侧) :  -- 同时隐藏两个 : 按 Tab 键, 同时将两个面板都隐藏; -- 只隐藏浮动面板 : Shift + Tab 键, 只隐藏右侧浮动面板; (4) 多文件显示...多文件显示 : 多文件显示切换方式, 菜单栏 "窗口" -> "排列"; -- 多标签模式 : 默认; -- 平铺 : 多个文件都显示在界面中; -- 浮动 : 图片在窗口中浮动; 2.

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

    useEffect 实践案例（一）

    当列表为空时，显示暂无数据 接口请求过程中，需要显示 Loading 状态 Loading 状态随便用的一个转圈图标来表示，和下面的图标有点重叠，以后有机会再调整一下 UI 接口请求成功之后，显示一个列表...再次搜索时，显示 Loading 状态 如果接口请求出错，显示错误页面 在实践中，这是针对一个请求所需要的常规状态处理，当然很多时候我们在学习的过程中简化了空数据/Loading/异常等状态，就导致了许多自学的朋友没有在工作中友好处理这些状态的习惯...= useState(false) 还有一个错误信息需要显示 const [error, setError] = useState('') 还有一个稍微有一些特殊的，输入框中输入的内容。...我们要注意准确分析内容：该内容的展示在已有的 UI 中，是根据键盘输入而展示内容，它不由数据来驱动 我们在该案例中，仅仅只是记录输入的内容，并传入 searchApi即可。...如果请求失败，Loading 依然需要改成 false，并记录错误信息 接下来我们要思考列表的 UI 代码。 首先，空数据、错误信息、正常列表的显示情况是互斥的，他们三个只能存在一个。

    41310

    如何设计一个好用的 React Image 组件？

    前言 本文为笔者阅读 react-image[1] 源码过程中的总结，若有所错漏烦请指出。...但是很多同学都是一把梭，直到 UI 小姐姐来找你谈谈人生理想： 图片加载太慢，需要展示loading占位符； 图片加载失败，加载备选图片或展示error占位符。...setValue(src); }) .catch((error) => { // 加载失败 setLoading(false); setError...react-image-1 自定义 imgPromise 前面提到过，加载图片过程中，使用方可能会插入自己的逻辑，所以将 imgPromise 方法作为可选参数loadImg传入，若使用者想自定义加载方法...react-image-2 结语 值得注意的是，本文遵循 react-image 大体思路，但部分内容暂未实现（所以代码可读性要好一点）。

    1.7K20

    useEffect 实践案例（2）：自定义 hook

    在上一章中，我们巧妙的把大量的 JSX 逻辑处理封装在了 List 组件中，使得在页面组件的代码变得非常简单。这是针对 UI 层的逻辑处理，那么在数据的处理上，是否也能够进行一些封装呢？...以上一章中的数据处理逻辑为例，我们来封装一个自定义 hook，将其命名为 useFetch function useFetch() {} 我们先考虑单个场景的封装，单纯只是为了让组件看上去更简洁。...变成了简单的同步代码：通过一个方法获取数据，并将数据渲染到 UI 组件。 Block 组件是单独封装的布局组件，希望不要因此造成任何理解上的困难 一个组件变成了数据与UI的结合。...我们分别将复杂的数据处理逻辑封装在 hook 里，将复杂的UI交互逻辑封装在基础 UI 组件里，在使用时，利用他们的封装结果进行组合，能够简单，高效的组合出复杂的页面，这也是我们在实践中最大的追求 这里有些人可能会有一些疑问...只要我们在写代码的过程中，非常明确的知道这种方式我们舍弃了什么，得到了什么，你权衡之后，愿意做出这样的取舍，那么这样的方式就是可以使用的。

    38210

    React 异步数据渲染异常：从踩坑到解决方案的开发日志

    4.5.0​运行环境：Chrome 120.0.0.0（桌面端）、Node.js 18.17.0​二、bug 现象描述​在开发 “用户订单列表” 功能时，遇到以下异常：​页面首次加载时，订单表格始终显示空白...Either include it or remove the dependency array​手动刷新页面 3-4 次后，偶尔能正常加载数据，但刷新后再次进入该页面又会恢复空白状态​网络请求面板显示...Axios 已成功获取后端返回的订单数据（status: 200），但数据未在组件中渲染​三、bug 排查步骤​步骤 1：确认数据请求有效性​首先检查 Axios 请求逻辑，在fetchOrders函数中添加控制台打印...依赖空数组时，只会在组件挂载时执行一次，此时捕获的fetchOrders是初始版本，但后续状态更新导致组件重新渲染后，新的fetchOrders函数未被触发，形成 “闭包陷阱”—— 状态已更新但渲染逻辑未感知...加载与错误状态全覆盖：​异步请求场景中，需完整处理 “加载中”“请求成功”“请求失败” 三种状态，尤其要在finally中停止加载状态（避免请求失败后加载动画一直显示），提升用户体验。​

    32410

    你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

    React中那些被混淆的「状态」 一个容易被忽视的事实是：React中的状态从来不是平等的。它们属于两个完全不同的世界。 客户端状态（Client State）：你100%拥有和控制它。...乐观更新：修改数据时立即在UI上反馈，等服务端确认后再验证 这些功能完全超出了useState+useEffect的能力范围。...场景：用户添加Todo 我们希望的体验是： 用户点击「添加」按钮 Todo立刻在列表上显示（不等待服务器） 后台发送请求到服务器 如果服务器成功，保持这个状态 如果服务器失败，自动回滚到之前的列表，显示错误提示...备份当前状态以便回滚 const previousTodos = queryClient.getQueryData(['todos']); // 3️⃣ 乐观更新：立即在列表中显示新...维护的缓存有两个关键参数： { staleTime: 5 * 60 * 1000, // 「新鲜度」：数据5分钟内被认为是新的 gcTime: 10 * 60 * 1000, // 「生存期」：未使用的数据

    22710

    从 React 新官网学到的一个最佳实践妙招

    React 知命境第 38 篇，原创第 147 篇 在开发过程中，我们常常会遇到这样的场景。 有一个列表，但是我们需要根据列表的不同类型查询并显示对应类型的数据。如头图所示。...一样的接口、一样的 UI、一样的类型、一样的交互。因此我们很容易会想到，把多个类型的列表当成同一个列表来处理，当 type 发生变化时去重新请求接口就可以轻松完成这个功能。...不过 React 新官方文档中，提出了一个更巧妙的方式来解决这个问题。 首先，我们可以将列表逻辑单独拆分为一个子组件。...这样，我们就能够在不显示监听 type 变化的情况下，做到跟刚才一样的效果 function ListPage() { const [type, setType] = useState('all')...例如，你请求了一个书籍列表，但是某一个区域只能显示选中的书籍的部分信息与几条用户评价，当我们选中别的书籍时，这信息与评论都需要全部更新。

    29910

    《纸上谈兵·solidity》第 48 课：DeFi 实战(12) -- 前端 DApp 集成与用户交互（React + ethers.js 实战）

    用 ethers.js 在 React 中完成常见流程：Connect Wallet、Approve、Deposit、Borrow、Repay、提案/投票。...用 Hooks 抽象常用逻辑（useProvider/useWallet/useContract/useAsyncTx），实现整洁可复用的 UI 接口。...处理生产级问题：gas 估算、链切换、交易失败回滚、乐观 UI、事件订阅。本地测试、集成、部署到 Vercel/Netlify 的要点。...ethers } from "ethers";/** * Provider Hook * 用于获取以太坊 Provider * @param {string} rpcUrl - RPC URL（可选，如果未提供则使用...乐观 UI：在 tx pending 时展示乐观变化（例如 "预计存款 +100"），但后台需在 tx confirmed 后矫正。

    33121

    如何设计一个好用的 React Image 组件？

    前言 本文为笔者阅读 react-image[1] 源码过程中的总结，若有所错漏烦请指出。...但是很多同学都是一把梭，直到 UI 小姐姐来找你谈谈人生理想： 图片加载太慢，需要展示loading占位符； 图片加载失败，加载备选图片或展示error占位符。...setValue(src); }) .catch((error) => { // 加载失败 setLoading(false); setError...react-image-1 自定义 imgPromise 前面提到过，加载图片过程中，使用方可能会插入自己的逻辑，所以将 imgPromise 方法作为可选参数loadImg传入，若使用者想自定义加载方法...return unloader; return null; }; 测试效果如下： react-image-2 结语 值得注意的是，本文遵循 react-image 大体思路，但部分内容暂未实现

    2.4K20

    TextInputLayout-Android M新控件

    它显示了一个“登录”文字与两个EditText元素，一个是为用户名准备的，一个是为密码准备的。布局中还包含了一个触发登陆流程的按钮。背景颜色是扁平风格的灰色。...需要的方法是setErrorEnabled和setError。 setError设置一个红色的错误消息，显示在EditText的下面。如果传入的参数为null，错误消息将清空。...在setError设置错误消息之前开启这个功能意味着在显示错误的时候布局不会变化。你可以把这两个方法结合起来验证下我所说的。...另一个有趣的事实是如果错误功能未开启但是你调用了传入非null参数的setError，那么setErrorEnabled(true)将自动被调用。...现在我们定义了什么是错误的什么是正确的，也知道了如何获取EditText中的数据以及显示可能的错误，onClick方法的实现就很简单了。

    1.5K20

    前端写代码像搭积木,后端凭什么说我们不懂系统设计?

    这篇文章,我要掰开揉碎地讲清楚:前端开发者如何从后端系统设计中偷师,把 UI 代码写成真正的"工程级系统"。 第一层认知突破:别再把 Component 当"页面碎片" 后端的分层架构为什么这么稳?...所有职责混在一起: 数据获取逻辑 状态管理 错误处理 UI 渲染 用户交互 一旦需求变更(比如改用 GraphQL、加个缓存、换个 UI 库),整个组件都要重写。...] = useState(null); const loadUser = useCallback(async () => { setLoading(true); setError(null...product.discount && {product.discount}折} ); } 当某天后端改了字段名,或者去掉了 discount 字段,组件就直接崩溃或者显示异常...items={recommendations} /> ); } 组合思维的优势: 单一职责:每个 Hook 只做一件事 可测试:Hook 可以独立测试 可复用:在不同组件中自由组合

    20220

    这是一份全面 & 清晰的架构设计指南：MVC、MVP & MVVM模式（含实例讲解）

    为什么要进行技术框架的设计 模块化功能 使得程序模块化，即：内部的高聚合、模块之间的低耦合 提高开发效率 开发人员只需专注于某一点（视图显示、业务逻辑 / 数据处理） 提高测试效率 方便后续的测试...三种模式出现的初衷 MVC模式的出现 为解决程序模块化问题，于是MVC模式出现了：将业务逻辑、数据处理与界面显示进行分离来组织代码，即分成M、V、C层； MVP模式的出现 但M、V层还是有相互交叉、...具体实现思路如下： 把Activity中的UI逻辑抽象成View接口 & 由具体的实现类来完成 把业务逻辑抽象成Presenter接口 & 由具体的实现类来完成 Model类还是原来MVC模式的Model...输出出错信息 @Override public void onError() { fyV.SetError()...总结 本文主要讲解了Android开发中主流的技术框架MVC、MVP 与 MVVM模式 下面我将继续对 Android中的知识进行深入讲解

    2K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券