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

Flutter statefull小部件不更新svg图标

Flutter是一种跨平台的移动应用开发框架,它使用Dart语言进行编写。Stateful小部件是Flutter中的一种小部件类型,它可以在运行时保持状态并根据需要更新。

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它可以在不失真的情况下缩放和调整大小。在Flutter中,可以使用svg库来加载和显示SVG图标。

当Stateful小部件不更新SVG图标时,可能有以下几个原因:

  1. 未正确设置依赖关系:Stateful小部件的更新依赖于其内部状态的变化。如果SVG图标的显示不受Stateful小部件状态的影响,可能是因为没有正确设置依赖关系。可以使用setState()方法来通知Flutter框架重新构建小部件。
  2. SVG图标缓存:Flutter中的svg库可能会对SVG图标进行缓存,以提高性能。如果SVG图标没有更新,可能是因为缓存的原因。可以尝试清除缓存或重新加载SVG图标。
  3. SVG图标文件未更改:如果SVG图标文件本身没有更改,那么Flutter框架不会重新加载它。确保SVG图标文件已经更新,以便Stateful小部件可以正确显示更新后的图标。

对于解决这个问题,可以尝试以下方法:

  1. 确保Stateful小部件正确设置依赖关系,并在需要更新时调用setState()方法。
  2. 尝试清除SVG图标的缓存,或者重新加载SVG图标。
  3. 确保SVG图标文件已经更新,以便Stateful小部件可以正确显示更新后的图标。

腾讯云提供了一系列与移动应用开发相关的产品和服务,包括云服务器、云存储、人工智能等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景进行选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vscode开发插件推荐第二节

您可以预览以下文件类型:PNG、JPEG、JPG、GIF、SVG。这有助于我们避免在图像路径或名称方面犯任何错误。如果您将鼠标悬停在 path 上,扩展名会提供指向项目结构及其维度中的文件的链接。...激活后,图标将出现在您的资源管理器侧栏中。它有很多自定义功能,例如您可以更改颜色等。...这只会添加最新版本,因此它也可以用于更新现有的 pub。提供的一个很好的扩展 ,他从一开始就与 Flutter 联系在一起,并且是 Flutter 社区的主要贡献者。...Awesome Flutter Snippets 是常用 Flutter 类和方法的集合。它通过消除与创建小部件相关的大部分样板代码来提高您的开发速度。...这只会添加最新版本,因此它也可以用于更新现有的 pub。 Bracket Pair Colorizer 2 我们经常迷失在嵌套部件树和嵌套类的迷宫中,花费大量时间寻找括号对。

1.7K10
  • Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

    文章目录 一、FlutterIcon 下载图标 二、自定义 svg 图标生成 ttf 字体文件 三、使用下载的 ttf 图标文件 四、完整代码示例 五、相关资源 一、FlutterIcon 下载图标 -...10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter...: 图标绘制方向 , 是否按照 svg 文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标...://github.com/han1202012/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https://download.csdn.net

    2.4K20

    Flutter中构建布局 顶

    这些小部件安排在ListView中,而不是列中,因为在设备上运行应用程序时,ListView会自动滚动。...您在Flutter应用中看到的图像,图标和文本都是小部件。 但是你看不到的东西也是小部件,例如排列,约束和对齐可见小部件的行,列和网格。 您可以通过构建小部件来创建布局来构建更复杂的小部件。...在Flutter中,只需几个步骤即可在屏幕上放置文本,图标或图像。 1.选择一个布局小部件来保存该对象。...图标行包含三列图标和文本。 评级行的小部件树: ?...您还可以使用Window > Scale更改模拟器窗口的大小(更改逻辑像素的数量)。 常见的布局小部件 Flutter拥有丰富的布局小部件库,但这里有一些最常用的布局部件

    43.1K10

    Flutter 中 stateless 和 stateful widget 的区别

    Flutter 中 stateless 和 stateful widget 的区别 介绍 要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块。...出于这个原因,外观和属性在小部件的整个生命周期中保持不变。 当我们描述的 UI 部分不依赖于任何其他小部件时,无状态小部件会很有用。无状态小部件的示例是文本、图标图标按钮和凸起按钮。...例如,当我们创建一个AppBar](,无状态小部件可以是不需要更改的脚手架或图标。 无状态小部件类仅在初始化时调用一次。即使有外力作用在它上面,它也不会更新。...如果我们创建一个按钮小部件,每次用户单击该按钮时都会更新自身,这就是一个有状态小部件。...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改时重新渲染setState() 静态小部件 动态小部件 除非发生外部事件,否则无法在运行时更新 可以在运行时根据用户操作或数据更改进行更新

    2.3K10

    开始使用-编写你的第一个Flutter应用程序 顶

    用户可以点击应用栏右上方的列表图标,以移动到仅列出收藏名称的新路由。 动画GIF显示完成的应用程序的工作方式。 ? 你会学到什么: Flutter应用程序的基本结构。...你会到用什么: 您需要安装以下内容: Flutter SDK Flutter SDK包括Flutter的引擎,框架,小部件,工具和Dart SDK。...该应用程序扩展了使应用程序本身成为小部件的StatelessWidget。 在Flutter中,大多数情况都是一个小部件,包括对齐,填充和布局。...)更新正在运行的应用程序。...在Flutter中,导航器管理包含应用程序路由的堆栈。 将路由推入导航器的堆栈,将显示更新为该路由。 从导航器的堆栈中弹出路由,将显示返回到前一个路由。

    9.5K20

    Flutter 中自定义动画底部导航栏

    介绍: 显示在应用程序底部的Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内的某个位置。底部导航栏包含各种选项,如文本标签、图标或两者。...这个演示视频展示了如何在 flutter 中使用自定义的底部导航栏。它展示了自定义底部导航栏将如何在您的 Flutter 应用程序中工作。...它显示当用户点击底部导航栏图标时,它们将被动画化并显示标签文本。当用户点击任何图标时,颜色也会发生变化和动画。它将显示在您的设备上。...itemCornerRadius:该属性用于物品的角半径,如果设置,默认为50。 如何在 dart 文件中实现代码 创建一个新的 dart 文件*my_home_page.dart*。...这是我对用户交互自定义动画底部导航栏的一个介绍。

    8.9K30

    手撸一个前端天气卡片

    最近学校社团面试题目是做一个天气卡片,正好可以借此机会趁着国庆长假静下心来好好研究一番。于是就有了今天的这篇文章。...可以watch一下这个仓库关注后续进展,我会抽时间重构下代码并在这个仓库更新。 Ⅰ.设计构思阶段 1....,圆角,选用无衬线字体,元素风格简洁,并且四者都在或背景或图标中大量使用渐变,使小部件表现得较为灵动。...其中win11小部件添加了浅阴影,可能是为了让小部件从亚克力背景中凸显出来。 于是乎,我也照猫画虎,设计了DW的晴天图标,并且用XD设计出了第一种卡片样式(现DW的medium卡片样式)。...在正式开干前,我就仿照小米天气做出了晴、阴、多云这三个图标,方便之后的设计和开发。格式依然采用了svg,控制组件整体的体积,保证加载速度。

    1.6K50

    Flutter 状态管理之GetX库

    Flutter 状态管理之GetX 前言 正文 一、创建项目 二、状态组件 三、状态更新UI 四、GetX库 ① 添加依赖 ② 局部刷新 ③ 全局刷新 五、源码 前言   Flutter使用的是声明式UI...有时候快捷键生效则你可以手动的点击这个闪电按钮,如果也生效就重新安装,总会生效的,做开发就要有一颗平常心。...在实践中,以下是一些使用场景的示例: 使用 StatelessWidget:当小部件的外观和内容不会随时间而改变时,推荐使用 StatelessWidget,例如静态文本、图标等。...状态类(State)的主要作用是管理StatefulWidget的状态,并根据需要更新部件的UI。...声明式UI基本上都是这种方式,了解了Flutter基本的状态更新UI,下面我们再来学习一下GetX这个库。

    37201

    flutter 起步

    比如 Navigator.pushNamed(context, '/');当部件Widget在StatelessWidget.build函数被返回时,这个部件会成为父部件。...AlertDialog:一个弹框的组件flutter问题:Flutter通过将新的代码注入到正在运行的DartVM中,来实现Hot Reload这种神奇的效果,在DartVM将程序中的类结构更新完成后,...Flutter会立即重建整个控件树,从而更新界面。...但是热刷新也有一些限制,并不是所有的代码改动都可以通过热刷新来更新:编译错误,如果修改后的Dart代码无法通过编译,Flutter会在控制台报错,这时需要修改对应的代码。...全局变量和静态成员变量,这些变量不会在热刷新时更新。修改了main函数中创建的根控件节点,Flutter在热刷新后只会根据原来的根节点重新创建控件树,不会修改根节点。

    4.5K20

    flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法

    页面列表 _pages 列表包含了三个页面,分别是: Home Page Search Page Profile Page 每个页面都是一个 Center 小部件,里面包含一个 Text 小部件...当用户点击某个导航项时,这个方法会被调用,并通过 setState 方法更新 _selectedIndex,触发界面重建,从而显示新选中的页面。 6....: Colors.blue, onTap: _onItemTapped, // 点击事件 ), ); } Scaffold 布局 build 方法返回一个 Scaffold 小部件...它包含三个导航项: Home:图标为家(Icons.home)。 Search:图标为搜索(Icons.search)。 Profile:图标为个人资料(Icons.person)。...onTap 属性将点击事件绑定到 _onItemTapped 方法,使得点击导航项时可以更新状态和切换页面。 7.

    9310

    Flutter常见开发问题

    Android 中的 View 主要是布局的一个元素,但在 Flutter 中,Widget 几乎就是一切。从按钮到布局结构的一切都是小部件。这里的优势在于可定制性。...但是 Flutter 中的按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西,**而不会打破布局限制。...因为如果我将一个图标从一个更改为另一个,则不必完全重建应用程序。这就是 Flutter调试构建如此庞大的原因。创建发布版本时,只会获取所需的资源,并获得我们更习惯的大小。...Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当,而且 Flutter 团队一直在寻找减少应用程序大小的方法。...package和插件之间有一个的区别。包通常是纯粹用 Dart 编写的新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。

    6.7K20

    Flutter常见开发问题

    但是 Flutter 中的按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西,**而不会打破布局限制。...因为如果我将一个图标从一个更改为另一个,则不必完全重建应用程序。这就是 Flutter调试构建如此庞大的原因。创建发布版本时,只会获取所需的资源,并获得我们更习惯的大小。...Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当,而且 Flutter 团队一直在寻找减少应用程序大小的方法。...我个人的意见是先学习一两个月的 Android/iOS,然后从 Flutter 开始。 什么是package和插件? package允许您将新的小部件或功能导入您的应用程序。...package和插件之间有一个的区别。包通常是纯粹用 Dart 编写的新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。

    6.8K30

    您不会错过的2020年7个最重要的Flutter更新

    Material 风格组件更新 新功能并不是框架中唯一值得注意的更改。在这一年中,Material 包已经增加了新的小部件,并进行了更新以匹配新的Material指南。...今年推出的新小部件是: NavigationRail InteractiveViewer 而更新的小部件包括: DatePicker TimerPicker Slider RangeSlider 其他已更新的小部件是...在Flutter 1.22中,扩展了Flutter中可用的标准“Material”按钮集,并修改了它们的主题。...该框架已更新,以使其与iOS 14的新策略和功能兼容*。cupertino_icons*程序包已扩展为带有新图标,并且现有图标更新为与最新的iOS 14样式匹配。...整整一年来,程序包开发人员一直在更新其程序包,以使它们从一开始就与null安全兼容。因此,开发人员的过渡将更加轻松。

    1.5K10

    【译】Flutter 1.20 发布

    icon font tree shaking 会删除未在应用程序中使用的图标,从而减小尺寸。将其用于Flutter Gallery 应用程序时,我们发现它使应用程序大小减少了100kb。...框架本身的元数据,它提供以下内容的机器可读数据文件: 当前所有Flutter部件的目录(395个小部件); Material 和 Cupertino 颜色集的 Flutter 框架[颜色名称到颜色值的映射...];(https://github.com/flutter/tools_metadata/tree/master/resources/colors) Material和Cupertino图标图标元数据...,包括图标名称和预览图标; 这与我们自己用于 Android Studio / IntelliJ 和 VS Code 扩展的元数据相同;我们认为这在构建自己的工具时可能会觉得有用。...随着性能的提高,新的和更新的小部件以及工具的改进,我们只能做到更突出。我们要感谢社区贡献者的数量不断增长,而且不断壮大,使每个 Flutter 版本都可以比以前的版本更大,更快,更强大。

    4K10

    Flutter基础篇(8)-- Flutter for Web详细介绍

    它为Flutter的UI基础提供高级抽象概念,包括动画,手势,基本小部件类,以及面向最常见应用程序需求的Material主题的小部件。...dartdevc只编译更新的模块,而不是编译应用所依赖的所有软件包。 ---- 四、核心功能点(作用) 1.使用Flutter构建的与progressive-web-apps相关联的程序。...在现有移动应用程序内提供动态内容更新的既定方法是使用Web视图控件,其可以动态地加载和显示信息。Flutter支持现在提供统一的Web和移动内容环境,使您可以在线部署内容或嵌入应用程序而无需重写。...flutter_web目前还没有插件系统。暂时提供dart:html,dart:js,dart:svg, dart:indexed_db 这些让你和其他网络库能够访问的绝大多数浏览器的API。...5.Flutter for Web小部件API与移动小部件API相同,但是是单独临时打包的。

    2.9K10

    Flutter 中使用Chip 小部件Flutter专题30】

    作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,程序,安卓,VUE,JavaScript。...本文是关于 Flutter 中的 Chip 小部件。我们将大致了解小部件的基本原理,然后通过代码来实现它。事不宜迟,让我们开始吧。 概述 典型的chip是一个圆角的小盒子。...img 在 Flutter 中,您可以使用以下构造函数来实现 Chip 小部件: Chip({ Key? key, Widget?...一些常用的有: avatar:在标签前显示一个图标图像。 backgroundColor : chip的背景颜色。 padding:chip内容周围的填充。...简单示例 这个例子向您展示了一种同时显示多个chip的简单使用的方法。我们将使用Wrap小部件作为chip列表的父级。当当前行的可用空间用完时,筹码会自动下行。

    2.9K20
    领券