Flutter – 扩展小部件

简介

Flutter 是一款由 Google 开发的跨平台 UI 框架。它能够让程序员构建高性能、高保真度的应用程序，并可以运行在多种平台上，包括 iOS、Android、Web 以及桌面端。

Flutter 使用小部件（Widgets）来构建视图。小部件是 Flutter 的基本构建块，用于描述应用程序的视图层次结构。Flutter 提供了丰富的小部件库，开发者可以通过组合这些小部件来构建复杂的 UI。

然而，有时候，内置的小部件并不能满足我们的需求。这时候，我们就需要扩展小部件，以便实现自己的视图组件。

如何扩展小部件

Flutter 提供了两种方式用于扩展小部件：

1. 继承现有的小部件
2. 创建自定义小部件

1. 继承现有的小部件

继承现有的小部件是一种简单的扩展方式。这种方式可以让我们在不从头开始构建小部件的情况下，通过继承已有的小部件，重新定义它的行为，实现自己需要的效果。

以继承 Container 为例，我们可以创建一个新的 MyContainer 小部件，重新定义 Container 的颜色和边框：

class MyContainer extends Container {
  MyContainer({Key key, Widget child})
      : super(
          key: key,
          child: child,
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(
              color: Colors.black,
              width: 2.0,
            ),
          ),
        );
}

这个 MyContainer 小部件与 Container 小部件基本相同。唯一的区别在于它的颜色和边框样式。

2. 创建自定义小部件

第二种扩展方式是创建自定义小部件。这种方式需要我们从头开始构建小部件，并实现它自己的行为。

以创建一个自定义的旋转按钮为例，我们需要先构建一个按钮（CustomButton），并定义它的点击事件。接着，在按钮组件中，我们通过继承 RawMaterialButton 并重写 build 方法，实现自己的按钮样式和旋转效果：

class CustomButton extends StatefulWidget {
  final VoidCallback onPressed;

  CustomButton({Key key, @required this.onPressed})
      : super(key: key);

  @override
  _CustomButtonState createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns:
          Tween(begin: 0.0, end: 1.0).animate(_animationController),
      child: RawMaterialButton(
        onPressed: () {
          _animationController.repeat();
          widget.onPressed();
        },
        elevation: 2.0,
        fillColor: Colors.blue,
        child: Icon(
          Icons.refresh,
          color: Colors.white,
        ),
        padding: EdgeInsets.all(15.0),
        shape: CircleBorder(),
      ),
    );
  }
}

这个 CustomButton 小部件可以通过以下方式使用：

CustomButton(
  onPressed: () {
    // do something
  },
),

结论

Flutter 的小部件体系非常丰富，几乎可以满足开发者的所有需求。但在某些情况下，我们需要扩展小部件以满足特定的需求。Flutter 提供了两种扩展方式：继承现有的小部件和创建自定义小部件。开发者可以根据自己的需求选择合适的方式。