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

Flutter -添加新小部件时,列中的StatefulWidgets不会更改

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它使用Dart语言编写,并提供了丰富的小部件库,可以快速构建高性能、美观的移动应用程序。

在Flutter中,小部件是构建用户界面的基本单元。StatefulWidgets是一种特殊类型的小部件,它可以在运行时保持状态,并且可以通过调用setState()方法来更新其状态。然而,当向列中添加新的小部件时,列中的StatefulWidgets不会自动更改。

这是因为在Flutter中,小部件的状态是独立管理的。当调用setState()方法时,只有调用它的小部件及其子树会重新构建。如果要在列中添加新的小部件并使其更新,需要在添加新小部件的代码中调用setState()方法。

以下是一个示例代码,演示了如何在列中添加新的小部件并更新状态:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  void addItem() {
    setState(() {
      items.add('New Item');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Widget'),
      ),
      body: Column(
        children: [
          RaisedButton(
            child: Text('Add Item'),
            onPressed: addItem,
          ),
          ListView.builder(
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index]),
              );
            },
          ),
        ],
      ),
    );
  }
}

在上面的示例中,我们创建了一个StatefulWidget,其中包含一个列和一个按钮。当点击按钮时,会调用addItem()方法,向items列表中添加一个新的项目,并通过调用setState()方法来更新状态。列中的ListView.builder小部件会根据更新后的items列表重新构建,并显示新的项目。

Flutter提供了丰富的小部件和功能,可以满足各种应用场景的需求。对于Flutter开发,腾讯云提供了一些相关产品和服务,例如:

  • 腾讯云移动开发平台:提供了一站式的移动应用开发解决方案,包括移动应用开发、测试、分发等功能。
  • 腾讯云移动推送:提供了高效可靠的移动消息推送服务,帮助开发者实现消息推送功能。
  • 腾讯云移动直播:提供了稳定可靠的移动直播解决方案,支持实时音视频传输和互动功能。

以上是关于Flutter和相关腾讯云产品的简要介绍,如果需要更详细的信息,可以访问腾讯云官方网站进行了解。

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

相关·内容

Flutter Widget框架之旅 顶

MyScaffold小部件在垂直组织其子女。在顶部,它放置了MyAppBar一个实例,将应用程序栏传递给一个Text小部件用作其标题。...无状态小部件从他们部件接收参数,它们存储在final成员变量。 当一个小部件被要求build,它会使用这些存储值来为它创建部件派生参数。...在Flutter更改通知通过回调方式“向上”流,而当前状态则“向下”流向呈现无状态小部件。重定向这一流程共同父母是State。...当ShoppingList小部件首次插入到树,框架将调用createState函数来创建_ShoppingListState实例,以便与该树该位置关联。...如果您在修改窗口小部件内部状态忘记调用setState,则框架将不知道您窗口小部件是脏,并且可能不会调用窗口小部件build函数,这意味着用户界面可能不会更新以反映已更改状态。

6.7K20

带你快速掌握Flutter视图(Widgets)

在Android/iOS要更新视图,我们可以直接通过对应方法来操作更改。 在Flutter,Widget是不可变不会直接更新。 相反,我们可以通过操纵Widget状态来更新它们。...无状态Widget和有状态Widget之间重要区别在于StatefulWidgets具有一个State对象,该对象存储状态数据并将其传递到树重建中,因此状态不会丢失。...但是,即使Widget是有状态,如果包含它父窗口小部件本身不对这些更改(或其他输入)做出反应,父Widget仍然可以是无状态。...另外推荐大家在widget catalog查看 Flutter提供布局。 如何在布局添加或删除组件?...; 在 Flutter ,推荐组合多个 Widgets 来构建一个自定义 Widget(而不是扩展它)。

10.9K10

一位Android程序员入坑Flutter后整理出一份超详细学习笔记

Google自2017年第一次提出Flutter,到2018年Beta,再加之RN各种风波与问题,使得Flutter热度不断上升,国内不少公司都公布Flutter在其产品应用,如美团,闲鱼等。...因为在Flutter看来吗,Widgets树结构是不可以被更改,但是如果想更改,则是通过StatefulWidgets方法,通过setState来更改Data,触发Widgets重绘,从而替换掉之前...,通过组合(composing)与封装方法来实现,通过小Widgets组合成需要Widgets。...实际上还是需要在Flutter AppAndroid壳子中注册这个filter,然后在FlutterActivity拿到存下来。...,官方文档说它会自动回收Element给你,但是事实上每次你都需要根据position生成Widgets,所以呢应该是Flutter在内部回收了之前Widgets并在你重新创建时候又用上了。

2.4K00

Flutter常见开发问题

但是 Flutter 按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。...package允许您将部件或功能导入您应用程序。package和插件之间有一个区别。包通常是纯粹用 Dart 编写组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快刷新。 注意:通过热重载或重启所做更改不会保存在设备 APK 或 IPA 文件。...更详细地说,一个内容可以改变动态小部件应该是一个有状态部件。无状态小部件只能在更改参数更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态小部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.8K30

Flutter常见开发问题

想象一下 Android 一个按钮。它具有文本等属性,可让您向按钮添加文本。但是 Flutter 按钮不是将标题作为字符串,而是另一个小部件。...package允许您将部件或功能导入您应用程序。package和插件之间有一个区别。包通常是纯粹用 Dart 编写组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快刷新。 注意:通过热重载或重启所做更改不会保存在设备 APK 或 IPA 文件。...更详细地说,一个内容可以改变动态小部件应该是一个有状态部件。无状态小部件只能在更改参数更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态小部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.7K20

Flutter构建布局 顶

这些小部件安排在ListView,而不是,因为在设备上运行应用程序时,ListView会自动滚动。...在设计用户界面,您可以专门使用标准小部件部件,也可以使用材质部件部件。 您可以混合使用两个库部件,您可以自定义现有的小部件,也可以构建自己一组定制小部件。...内容 对齐小部件 调整小部件 包装小部件 嵌套行和 要在Flutter创建行或,可以将一个子窗口小部件列表添加到Row或Column窗口小部件。...每个图像使用一个Container来添加一个圆形灰色边框和边距。 包含图像行使用容器将背景颜色更改为浅灰色。...处理Flutter盒子约束:讨论小部件如何受其渲染框限制。 在Flutter添加资产和图像:说明如何将图像和其他资源添加到应用程序包

43K10

Flutter UI原理

,Widget只是UI元素一个配置数据,并且一个Widget可以对应多个Element,这是因为同一个Widget对象可以被添加到UI树不同部分,而真正渲染,UI树每一个Element节点都会对应一个...因为高效,每次更改Widgets树Flutter都使用Elements树来比较Widgets树和现有的RenderObjects。...当我们将Container颜色更改为红色,框架将触发重建,这将重新创建整个Widget树,因为它是不可变。...接下来,借助Elements树Elements帮助,FlutterWidgets树与旧Widegt树进行比较。 比较基本规则:检查旧Widget和Widget是否来自同一类型。...在我们示例, SimpleApp与以前类型相同,并且具有与相应SimpleAppRender对象相同配置,因此不会有任何更改

3.2K20

记住,永远都不要在 Flutter 中使用全局变量

但是,有些开发人员会使用全局变量,因为他们在一个团队,并且在某些情况下不利于更改。 但是,无论应用程序大小如何,当需要维护代码,全局变量都会带来挑战。...在下一部分,你将学习状态管理库和包,它们提供了以更好方式管理变量状态更好方法,而不会影响维护过程。...Provider 状态管理包 Provider 状态管理器包被广泛用于收集小部件状态数据并在状态更改时更新小部件。 使用提供程序时,只有受影响部件会在数据发生突变被更新。...要在 Flutter 应用程序启动开始使用 GetX,请将 get 添加到你 pubspec.yaml 文件: dependencies: get: 接下来,导入使用 GetX 库函数和组件需要...SetState 方法 之前,我们只介绍了管理状态 Flutter 包和库。 当你部件更改数据值,可以调用一个名为 setState 方法。它将导致 UI 根据状态发生变化。

3.4K30

Flutter-从入门到项目 03: Flutter初体验

= [UIColor blueColor]; 由于 UI 真实来源可能比实例 view 本身存活周期更长,你可能还需要在 view 构造函数复制此配置 在声明式风格,视图配置(如 Flutter...要改变 UI,widget 会在自身上触发重建(在 Flutter 中最常见方法是在 StatefulWidgets 组件上调用 setState())并构造一个 Widget 子树 // Declarative...AppDelegate class])); // 因为在 Flutter 世界里面 都是各种部件 // 这里我们简单使用一下 Center 来写一个 文本 runApp(Center(...删除行 ctr + alt + I: 自动缩进对齐 opt + sft + up/down : 上下移动代码 ctrl + tab: 切换文件 shift + command + enter : 行尾自动添加分号...option + enter: 自动导入用到包 stless: 创建 StatelessWidget stful: 创建 StatefulWidget ?

1K10

谷歌 Flutter 1.17 发布

在此版本添加NavigationRail了一个部件,该小部件提供了响应式应用程序导航模型。它是由Google Material Design团队设计和实施。...2018年10月PR 22330增加了对配置选择加入支持,但不对新名称提供支持。现有的文本样式名称未更改,因为这样做是一个重大API更改,可能会影响大多数应用程序。...在进行此更改之前,如果您有任何分析错误,“热重装”将不会重装您代码。如果分析错误不会影响您当前正在运行代码(例如在单元测试),那么这可能会令人沮丧。...他们报告说:“将Flutter添加到核心产品,可以释放出更高速度和灵活性,这对于客户及其用户而言,都可以转化为真实可衡量价值。”...重大变化 与往常一样,每个新版本Flutter尽量减少重大更改数量,这些是此版本重大更改

3.5K10

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

第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到屏幕 第7步:使用主题更改UI...如果需要,请使用以下链接代码重新开始正轨。 pubspec.yaml(pubspec.yaml文件不会更改。)...lib/main.dart 第5步:添加交互性 在这一步,您将为每一行添加可点击心脏图标。 当用户点击列表条目,切换其“收藏”状态,该词语配对被添加或从一组保存收藏夹移除。...lib/main.dart 第6步:导航到屏幕 在这一步,您将添加一个显示收藏夹屏幕(在Flutter称为路由)。 您将学习如何在主路由和新路由之间导航。...列表图标出现在应用程序栏。 点击它什么也没做,因为_pushSaved函数是空。 3.当用户点击应用栏列表图标,建立一条路由并将其推送到导航器堆栈。 此操作会更改屏幕以显示新路由。

9.5K20

Flutter入门三部曲(2) - 界面开发基础

StatelessWidgets and StatefulWidgets FlutterWidget都必须从Flutter库中继承。...Row, Column- 这些小部件显示水平或垂直方向子项列表。 Stack - 堆栈显示一个孩子列表。这个功能很像CSS'position'属性。...因为State在每次重建都没有抛弃,所以可以维护它并且不必每次重建某些东西都要进行昂贵计算以获得状态属性。 此外,这是允许Flutter动画存在原因。...因为Flutter是复用state。所以,你可能需要重新初始化状态。 如果你Widget是需要根据监听数据,发生变化,那么你就需要从旧对象反注册,然后注册对象。...下一遍文章:我们将更加深入Flutter界面开发一些原理 参考文章 Flutter Widgets FlutterKey,LocalKey,GlobalKey...

2.6K00

Flutter 1.22 正式发布

iOS 14 每当发布新版本移动操作系统,我们都会对其进行彻底测试,以查找影响Flutter及其工具不兼容性或更改。...为使Flutter保持与Material指南最新水平,我们很高兴地宣布Flutter 1.22引入全新按钮。 该PR并没有尝试就地开发现有的按钮类及其主题,而是引入了替换按钮小部件和主题。...新主题遵循Flutter最近在Material窗口小部件采用“规范化”模式。如果您想玩演示,DartPad上有一个很棒演示。...但是,在此版本,我们将最佳做法意见纳入了我们工具,甚至在添加l10n信息启用了热重装支持来更新您应用。 ?...这个想法是要在导航和Flutter其余部分之间统一模型,同时解决许多问题并添加功能。实际上,这个例子几乎不涉及Navigator 2.0内容。

7.4K20

【老孟FlutterFlutter 2 新增功能

除了我们HTML渲染器之外,我们还添加了一个基于CanvasKit渲染器。我们还添加了特定于Web功能,例如Link小部件,以确保在浏览器运行应用感觉像Web应用。...此外,内置上下文菜单已添加到Material和Cupertino设计语言TextField和TextFormField小部件。最后,添加了抓手 到ReorderableListView小部件。...此外,Cupertino设计语言实现添加了一些iOS小部件CupertinoSearchTextField提供了iOS搜索栏UI。...可用修复程序列表,如带灯泡快速修复程序,可帮助您单击鼠标来更改代码。...即使我们尚未捕获所有已弃用API作为数据来提供Flutter Fix,我们仍将继续从先前已弃用API添加更多信息,并将在未来重大更改中继续这样做。

7.8K20

Flutter入门三部曲(2) - 界面开发基础

StatelessWidgets and StatefulWidgets FlutterWidget都必须从Flutter库中继承。...Icon - 用于显示Flutter内置Material和Cupertino图标。 Container - 在Flutter,相当于div。...Row, Column- 这些小部件显示水平或垂直方向子项列表。 Stack - 堆栈显示一个孩子列表。这个功能很像CSS'position'属性。...因为State在每次重建都没有抛弃,所以可以维护它并且不必每次重建某些东西都要进行昂贵计算以获得状态属性。 此外,这是允许Flutter动画存在原因。...因为Flutter是复用state。所以,你可能需要重新初始化状态。 如果你Widget是需要根据监听数据,发生变化,那么你就需要从旧对象反注册,然后注册对象。

1.6K20

Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...pub地址:https://pub.dev/packages/lite_rolling_switch 介绍 在Flutter,开关是一个小部件,用于在两种选择(ON或OFF)之间进行选择。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关更改图标和文本。...在小部件内,我们将添加一个部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式文本。

33.3K60

Flutter 凉了吗?

我更像是一个后端开发人员,所以当涉及到严重依赖它东西,我只想要一些简单东西。这就是Flutter在我眼中闪耀地方。 UI通过将不同部件组合在一起并修改它们以适合你App外观来创建。...这只是Flutter提供部件几个,除这些之外还有很多。使用这些小部件,我们可以构建一个非常简单UI: Flutter像一个拥有各种各样道具魔术师,使你能轻而易举地构建App主题。...每个小部件文本样式必须手动地一个一个设置,但这仍然很简单: 为了进一步提高效率,Flutter可以热重新加载应用程序,因此您无需在每次更改UI重新打开它。...考虑到Dart和Flutter大量可用库,这根本不是问题。是否有兴趣在你应用投放广告?有这方面的库。想要部件吗?有这方面的库。...,BLoCs和SQLite在处理Flutter数据是一个很好组合(https://medium.com/@erigitic/using-streams-blocs-and-sqlite-in-flutter

3K20

Flutter —快速开发IDE快捷方式

知谏院,多次论劾权贵。再授龙图阁直学士、河北都转运使,移知瀛、扬诸州,历权知开封府、权御史丞、三司使等职。嘉祐六年(1061年),升任枢密副使。...Flutter 初学者,那么您一定厌恶嵌套结构,在代码添加或删除一个小部件,或者找到一个小部件在何处结束、何处开始是多么困难。...您想填充一些内容,但担心会弄乱您部件结构。使用我们魔术棒,您可以添加填充而不会弄乱任何东西: 只需在需要填充部件上按Alt + Enter,然后单击“add padding”即可。...或使用其他任何小部件包装它们: 你甚至使用 StreamBuilder 包裹子组件: 不喜欢一个组件?删除它 是的,删除小部件就像添加一个部件一样容易。...当您打开它,它看起来像这样: 现在,您可以清楚地看到哪个窗口小部件,它们在用户界面排列方式以及哪些窗口小部件具有其他子窗口小部件。十分简单!

2.1K20

Flutter 旋转轮

在在本文中,我们将探讨 “Flutter 旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项「Spinwheel」演示程序。...**onChanged:**此 属性用于在每次更改选择从微调器菜单返回所选值回调。 「select」:此 属性用于选择(突出显示)圆扇区。范围是0(项目大小)。想象它就像一个数组。...**在此构建器,我们将添加itemCount和itemBuilder。在itemBuilder,我们将导航容器小部件。在小部件内,我们将添加一个边距,即容器高度。...他子属性,我们将添加一个部件。在此小部件,我们将添加两个文本,分别是问题和答案。...项「以外所有选项,应当绘制边框」指令**确定是否应绘制边框,「onChanged」表示每次更改选择从微调器菜单返回所选值回调。

8.7K20

Flutter】滑动效果评价组件

Flutter」是GoogleUI工具包,可通过一个代码库构建漂亮,本机编译移动,Web和桌面应用程序。 在在本博客,我们将探讨「Flutter**Reviews Slider。...当用户点击微笑并向左或向右旋转或向左旋转,然后更改微笑形状。 该演示视频演示了如何在flutter中使用评论滑块。...它显示了使用「Flutter」应用程序「reviews_slider」包,评论滑块将如何工作。当用户从左到右或从右到左旋转微笑并更改形状,它显示了一个具有变化微笑动画小部件。...void onChange1(int value){ setState((){ selectedValue1 = value; }); } 我们将添加一个部件,并且mainAxisAlignment...「在ReviewSlider,我们将添加」optionStyle」表示评论标题文本样式,例如颜色,大小等,而「onChange则」意味着只要指针更改了滑块值并且不再与屏幕接触,就会触发。

4.4K50
领券