在initState或类构造函数中定义小部件,而不是在构建?

伊恩

我看到的大多数示例和流行的智慧都为类中的Widget使用了一个典型的模板,其中所有其他的Widget都在该build方法内创建(我认为可以使代码更清晰,但请放开它)。

但是,如果所引用的窗口小部件不做进一步更改,则每个构建调用仍将重新创建该窗口小部件。在aninitState或class构造函数中分配它并在以后引用它时,是否存在任何实际问题

琐碎的例子

// this partial from inside the build() method currently
Container(
  padding: const EdgeInsets.only(bottom: 8.0),
    child: Text(
      'Oeschinen Lake Campground',
       style: TextStyle(
       fontWeight: FontWeight.bold,
    ),
  ),
 ),

// Now inside initState or class Constructor
myText = Text(
      'Oeschinen Lake Campground',
       style: TextStyle(
       fontWeight: FontWeight.bold,
    ),
 );

...
// Still inside build method (in fact this could also go inside the constructor ?)
Container( 
  padding: const EdgeInsets.only(bottom: 8.0),
  child: myText
)

这仅适用于不基于状态引用的代码。

以这种方式,除了设计/美学之外,还有其他缺点吗?尽管这个示例很简单,但我一直认为,当应用变得更加复杂时,也许不必重新构建非基于状态的小部件可能会有一些性能/电池/顶空的好处(我也意识到我认为小部件会更进一步每次树都可能仍然需要一个新对象)。但是,我是不熟悉飞镖技术的人,所以要警惕一些我没有适当考虑的问题,或者从根本上误解了某些方面。

雷米·罗素(Remi Rousselet)

这是合法的优化。实际上,您甚至可以对依赖状态的小部件(与结合使用didUpdateWidget)进行相同的操作。胜利是微不足道的。

小部件非常轻巧,Dart已针对许多微实例进行了优化。

这种方法有一个问题:您松开热装。


重用旧的窗口小部件实例仍然非常有用。仿佛小部件实例不变,Flutter中止了子树的构建。

这在动画中经常使用,而不是每帧都重建整个窗口小部件树。一个典型的例子是AnimatedBuilder(但全部XXTransition遵循相同的逻辑)

Animation animation;

AnimatedBuilder(
  animation: animation,
  child: Text('Foo'),
  builder: (context, child) {
    return Align(
      alignment: Alignment(.5, animation.value),
      child: child,
    );
  },
);

在这里,这会自愿重用child实例,以免Text再次调用build方法。


那么,我应该这样做吗?

好吧,是的,不是。优化您的应用程序总是很酷的。但是除了使用变量之外,还有一种更好的方法:const构造函数。

要重用您的示例,您可以将“总是相同的”小部件树提取到带有const构造函数的自定义小部件中:

class _Foo extends StatelessWidget {
  const _Foo({Key key}): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'Oeschinen Lake Campground',
      style: TextStyle(
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

然后在您的build方法中以这种方式使用它

@override
Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.only(bottom: 8.0),
    child: const _Foo(),
  );
}

这样,您可以获得缓存小部件实例的好处。但是您不要松开热装。

完美吧?

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

initstate 在构建小部件之前未执行

如何在类构造函数参数中动态传递窗口小部件

为什么在构建小部件之前,我的initState()不调用使用sharedprefs的函数?

小部件类中的AJAX函数

将小部件添加到布局仅在自定义类的构造函数中有效

在构造函数中访问容器子窗口小部件尺寸

如何将小部件构造函数作为参数传递给另一个小部件来构建

Flutter:如何从不是小部件的类中调用SnackBar

类引用成员 - 不是具有合成构造函数的类中的错误,而是用户定义的构造函数中的错误

flutter initstate()列表未访问其他类小部件

this.each不是jqm小部件中的函数

在 QT Creator 中使用自定义构造函数提升自定义小部件

PHP小部件使用类选择器而不是<tag>来构建菜单

在 Serializable 类的构造函数中定义对象

TypeError:类扩展值未定义不是React JS中的构造函数或null

下面的构造函数在dart中是如何工作的,我已经提取了小部件并且flutter为我的小部件提供了以下构造函数

initState和Flutter中的类构造函数有什么区别?

Flutter-为什么在每次重新构建父窗口小部件时都不调用子窗口小部件的initState()?

在类的函数内创建小部件

Flutter 的小部件构造函数中这种类似 JSON 的语法是什么?

使用UI设计文件并使用自定义构造函数QT创建自定义小部件

如何在构建方法之外的 State 类中访问 Stateful 小部件变量?

错误:尝试构建导航时,Dart 中未定义名称“小部件”

如何在Qt / C ++中构建自定义的本机OSX Webkit小部件?

Javascript 类在构造函数中或类外定义属性

JavaScript类:构造函数中定义的成员未定义?

模板类定义中的模板构造函数定义

构造函数中定义的类函数的默认参数

构造继承的小部件时如何设置基类的属性?