自定义Flutter控件

在Flutter开发中,我们会经常和各种控件打交道,它们也能满足业务的大部分需求。但是,我们往往需要将多个控件组合起来,才能实现业务的需求,而且这样写出来的代码维护起来非常困难。因此,我们可以把那些需要多个控件组合才能实现的功能自定义化,成为一个自定义控件,易于维护。

网络图片

无状态控件

Flutter框架给我们提供了StatelessWidget和StatefulWidget两个抽象类,用于自定义控件,首先我们看一下StatelessWidget抽象类。它可以定义一个不需要可变状态的控件,我们可以称其为“无状态控件”,它通过构建一系列其他控件来描述用户界面的一部分,构建过程以递归方式执行,直到用户界面的描述完全具体化。

比如,下面是一个名为“GreenBoard”的StatelessWidget子类的框架,它的里面包括一个Container控件,中文名称是“容器”,然后设置color属性,也就是背景色为绿色。

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

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: const Color(0xFF2DBD3A)
    );
  }
}

上面代码中,应用了《Dart入门—类与方法》的知识,大家可以去简单了解下。另外,我们覆盖了build这个抽象方法,该方法用于描述由此控件所实现的那一部分用户界面。其中,抽象类BuildContext是该控件在控件树中的位置句柄。

通常情况下,控件的构造函数参数不止一个,每个参数对应一个final修饰的属性,修改上一个例子,使其成为一个可以设置背景颜色和子控件的通用控件。

class Board extends StatelessWidget {
  const Board({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: color, 
      child: child,
    );
  }
}

按照Flutter框架的语法规范,控件的构造函数只能使用命名参数,命名参数可以使用@required注解为必需参数。另外语法规范还规定了,第一个参数是key,最后一个参数是childchildren或其他类似参数。

如果一个无状态控件的父控件会定期更改控件的配置,或者它依赖于频繁更改的继承控件,那么优化build方法的性能,以保持流畅的渲染性能是非常重要的。有以下做法可以用于减少重新构建无状态控件的影响:

  • 尽可能减少build方法传递创建的节点数量及其创建的任何控件。例如,我们可以考虑只使用Align(对齐控件)或CustomSingleChildLayout(自定义单个子控件布局控件),而不是精心安排Row(行布局控件)、Column(列布局控件)、Padding(填充控件)和SizedBox(指定大小的框控件)来定位单个子控件。想绘制正确的图形效果时,考虑一下使用CustomPaint(画布控件),而不是复杂的多个Container(容器)分层和Decoration(装饰)。
  • 尽可能使用const修饰控件,并为控件提供一个const构造函数,以便控件的调用方法也可以这样做。

有状态控件

在了解完如何使用StatelessWidget定义一个无状态控件后,我们学习如何使用StatefulWidget定义一个具有可变状态的控件,我们可以称其为“有状态控件”。首先要搞清楚的是,状态是什么?状态是在构建控件时可以同步读取的信息,并且在控件的生命周期内可以改变,控件的使用者应该在状态发生变化时使用State.setState方法及时通知框架。

StatefulWidget的实例本身是不可变的,我们需要将其可变状态存储在由createState方法创建的单独的State对象中,或者存储在该State所订阅的对象中。例如,我们将之前名为“GreenBoard”的StatelessWidget子类改造成StatefulWidget的子类框架。

class GreenBoard extends StatefulWidget {
  const GreenBoard({ Key key }) : super(key: key);

  @override
  _GreenBoardState createState() => new _GreenBoardState();
}

class _GreenBoardState extends State<GreenBoard> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: const Color(0xFF2DBD3A)
    );
  }
}

只要我们调用了一个StatefulWidget,框架就会调用createState,这意味着,在控件树中,可能有多个不同位置的State对象与同一个StatefulWidget关联。同样的,如果一个StatefulWidget被我们从树中移除,并且再次被我们插入到树中,框架将再次调用createState来创建一个新的State对象,简化了State对象的生命周期。

我们再将之前名为“Board”的StatelessWidget子类改造成StatefulWidget的子类框架。除了可以设置背景颜色和子控件,还有一个可以被调用的,用来改变它的内部状态的方法。

class Board extends StatefulWidget {
  const Board({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  _BoardState createState() => new _BoardState();
}

class _BoardState extends State<Board> {
  double _size = 1.0;

  void grow() {
    setState(() { _size += 0.1; });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: widget.color,
      transform: new Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

StatefulWidget有两种不同的类型:

  • 第一种是在State.initState中分配资源并将其置于State.dispose中,而且不依赖于InheritedWidget或调用State.setState。这样的控件通常在应用程序或页面的根部使用,并通过ChangeNotifier、Stream或其他这样的对象与子控件通信。遵循这种模式的有状态控件相对便宜(在CPU和GPU周期方面),因为它们是一次构建的,而且不会更新。因此,它们可以实现一些非常复杂的build方法。
  • 第二种是使用State.setState或依赖于InheritedWidget的控件。这些控件通常会在应用程序的生命周期中重新构建很多次,因此降低重新构建这种控件的影响至关重要。实际上,它们也可以使用State.initState或State.didChangeDependencies来分配资源,但重点是它们要重新构建。

有以下做法可以用于减少重新构建有状态控件的影响:

  • 把状态推到树叶上。例如,我们的页面上有一个嘀嗒嘀嗒的时钟,此时不应该将状态置于页面的顶部,因为这样的话,每当时钟嘀嗒时,整个页面都会重新构建。我们应该创建一个专用的时钟控件,这样只会更新它自己。
  • 尽可能减少build方法传递创建的节点数量及其创建的任何控件。理想情况下,有状态的控件只会创建一个控件,而这个控件将是一个RenderObjectWidget。很显然,在实际开发中,我们不一定能做到这一点,但控件越接近这个理想状态,效率就越高。
  • 如果子树不更改,则缓存表示该子树的控件,并在每次使用该子树时重新使用它。重用控件的效率要比创建新的控件要高效得多,将有状态的部分分解成一个带有子参数的控件是这样做的常见方法。
  • 尽可能使用const修饰控件,这相当于缓存一个控件,并重新使用它。

关于有状态与无状态的选择

如果自定义的控件可以与用户进行交互,比如通过键盘输入内容、通过滑动屏幕移动滑块、点击时改变状态,又或者是随着时间的推移而变化,比如数据Feed会更新状态。这时我们应该选择使用StatefulWidget创建一个有状态控件。

如果自定义的控件仅依赖于对象本身的配置信息,仅仅是用于展示给定的信息。那我们应该选择使用StatelessWidget创建一个无状态控件。

相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页