长沙制作网页的基本步骤,周口seo优化,嘉兴信息发布终端多少钱一台,软件开发流程文档模板theme: cyanosis 1. 前言 很多朋友可能在布局过程中、或者组件使用过程中#xff0c;会遇到诸如颜色、尺寸、约束、定位等问题#xff0c;可能会让你抓耳挠腮。俗话说#xff0c;磨刀不误砍柴工#xff0c;会使用工具是非常重要的#xff0c;其实 Flutter 提供了强大的调试… theme: cyanosis 1. 前言 很多朋友可能在布局过程中、或者组件使用过程中会遇到诸如颜色、尺寸、约束、定位等问题可能会让你抓耳挠腮。俗话说磨刀不误砍柴工会使用工具是非常重要的其实 Flutter 提供了强大的调试工具可以辅助我们去查看界面布局中的一切细节。 基于这些细节可以很轻松地去解决布局相关的疑难杂症。 也能让我们对界面的布局有更深刻的认知这就是 Flutter Inspector 如果你使用 AndroidStudio可以在如下的侧栏选项卡中打开 光秃秃地介绍如何使用的话或许太过无聊下面就通过一个实际的小问题的解决过程来讲述一下如何通过 Flutter Inspector 来分析界面结构和寻找关键源码。如下所示左下角的菜单弹框在 useMaterial3 下呈紫色而 PopupMenuButton 并没有直接修改弹出框背景色的配置项。接下来将通过布局分析器来解决如下几个问题 PopupMenuButton 弹出菜单其背景是何时、如何着色的。如何修改弹出菜单的背景色。弹出菜单在界面树形结构中处于哪个层级。 本文具体源码就不贴了跑起来之后和本文一起使用 Flutter Inspector 来分析。源码地址在: LoveNote520/LoveNote: 提交节点 2. Flutter Inspector 窗口基本介绍 首先需要将应用运行起来 Flutter Inspector 才能展示信息。如下所示映入眼帘的主要有三个部分 [1]. 顶部的操作工具栏。 [2]. 左侧的组件树信息。 [3]. 右侧的选中组件的详情信息。 首先强调一下左侧的树形结构中每个组件条目对应着右侧的一个面板。也就是说你每当点击一个左侧组件树中的节点右侧的面板信息就会更新: 其中右侧面板 Layout Explorer 可视化地展示出: [1]. 当前组件对应的渲染对象树受到的 父级约束 [2]. 当前组件对应的渲染对象树其在界面中的 尺寸 [3]. 当前组件对应的渲染对象树向子级的 传递约束 如果看过 《Flutter 布局探索 - 薪火相传》 的朋友不难理解对于布局来说 父级约束、尺寸、传递约束 这三者是何其重要。而 Layout Explorer 可视化地将这些信息展示出来就非常便于我们去分析布局的细节。 在面板右侧有一个 Widget Datails Tree 的选项卡是极其重要而有用的。同样你每当点击一个左侧组件树中的节点Widget Datails Tree 信息也会更新。其中可以展示某个 Widget 构建过程中的所有细节包括 dependencies 依赖、state 状态类、properties 调试属性、Widget 派生类的所有属性。 以及最重要的 某个 Widget 对应的渲染对象 renderObject从渲染对象中可以进一步分析约束、尺寸、数据等信息。细致入微地去了解当前界面中展示的逻辑这样从内部寻找病因就能更精准地对症下药。 3. 选择模式与具体组件分析 选择模式 Select Widget Model 是一个非常好用的工具。如下所示点击之后可以在应用界面中点一下面板在就可以自动选中被点击的组件。这就可以大大提高查看界面视图中每个组件构建信息的效率不必一个个自己手动去找。 如下所示往上翻一下就可以很容易定位到颜色的来源PopupMenuButton 弹出框的视图由源码内部的 _PopupMenu 组件所构建其中背景色由 Material 组件所设置。 所以此时全局搜索一下 _PopupMenu 组件看看使用 Material 组件时颜色怎么传递的就可以了。如下所示颜色值是三个依次取用 路由颜色、弹框主题色、默认颜色。 从源码中不难看出PopupMenuTheme 可以设置这里的背景颜色如果没有主题色将会取用 defaults 主题数据这里根据 useMaterial3 来确定的这就是主题中 useMaterial3 可以影响弹框颜色的根本原因。 dart ----[_PopupMenu#build]---- final ThemeData theme Theme.of(context); final PopupMenuThemeData popupMenuTheme PopupMenuTheme.of(context); final PopupMenuThemeData defaults theme.useMaterial3 ? _PopupMenuDefaultsM3(context) : _PopupMenuDefaultsM2(context); 3. 修改弹框颜色 有了上面的布局、源码分析之后弹出框的背景色就很好修改了: 如下所示提供 popupMenuTheme 设置白色背景即可 dart theme: ThemeData( fontFamily: aldk, colorSchemeSeed: const Color(0xff6750a4), popupMenuTheme: PopupMenuThemeData( color: Colors.white, ), useMaterial3: true, ), 如下所示color 虽然设成了白色但是弹框背景肉眼看起来很明显不是白色。不过看起来没有之前那么紫了也就是说只设置 popupMenuTheme 的颜色有一点用但是不多。这是什么原因呢? 前面说了一切界面展示中存在的问题都可以通过 Flutter Inspector 来分析。可以先用拾色器看一下颜色是 F3F1F7确实不是白色。 如下所示可以看出 Material 内部使用了 PhysicalShape 组件其颜色恰是 F3F1F7 。这就说明 Material 的颜色并不仅仅是由 color 属性决定的肯定和其他颜色混合了一下。下面就看一下源码中对颜色的处理逻辑。 下面是 Material 组件中的源码实现可以很清晰的看出 useMaterial3 下AnimatedPhysicalModel 的颜色是由 backgroundColor (Material#color) 和 surfaceTintColor 以及 elevation 共同决定的。 颜色的换算过程由 ElevationOverlay.applySurfaceTint 处理通过如下代码不难看出 surfaceTint 设为 null 或透明就可以避免其对颜色的影响。 dart static Color applySurfaceTint(Color color, Color? surfaceTint, double elevation) { if (surfaceTint ! null surfaceTint ! Colors.transparent) { return Color.alphaBlend(surfaceTint.withOpacity(_surfaceTintOpacityForElevation(elevation)), color); } return color; } 对于任何界面展示效果的问题都可以通过 Flutter Inspector 来分析、定位问题所在再查看相关的源码来解决。这就是通过 解决问题 进行探索和学习。也许有时候解决方案很简单但过程中你会学得的更多。比如通过布局分析器查看时你会发现弹框是一个在 MaterialApp 下的独立路由通过 _OverlayEntryWidget 挂在 _Theater 下显示我们的应用界面也是一个 _OverlayEntryWidget 。这就不再展开了有机会专门介绍一下。 这种解决问题流程中积攒的经验将是非常宝贵的它可以让你看清问题的根源所在对整体有更好的把握。那本文就到这了谢谢观看 ~
