Flutter – 自定义小部件

Flutter 是一款开源的移动应用程序开发框架，其中最强大的特性之一即是允许开发者创建自定义小部件。小部件是 Flutter 应用程序中可重用的、基本的视觉组件，它们相当于 Android 中的 View 或 iOS 中的 UIView。

为什么要自定义小部件？

在 Flutter 中，有许多预定义的小部件，包括文本、按钮和图像等。但是，有些情况下你可能需要创建一个自定义的小部件，例如，一个特殊风格的按钮或者是一种自定义动画效果。使用自定义小部件，可以方便我们重复利用许多常用的功能模块，加速开发，提高开发效率。

创建自定义小部件

在 Flutter 中，要创建一个自定义小部件，需要继承 StatefulWidget 或 StatelessWidget，两者的区别在于 StatefulWidget 是有状态的小部件，而 StatelessWidget 是无状态的小部件。如果需要创建一些可修改状态的小部件，需要使用 StatefulWidget；如果一个小部件只需要展示一些 UI，无需保存状态，可以使用 StatelessWidget。

StatelessWidget

下面是一个 StatelessWidget 的示例：

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  final String text;

  MyCustomWidget({this.text});

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

这个自定义小部件 MyCustomWidget 接收一个字符串参数 text，并将其展示为一个 Text。在 build 方法中，返回一个 Container 小部件，它包含一个 Text。

StatefulWidget

接下来，我们看看 StatefulWidget 的示例：

import 'package:flutter/material.dart';

class MyCustomWidget extends StatefulWidget {
  final String text;

  MyCustomWidget({this.text});

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

class _MyCustomWidgetState extends State<MyCustomWidget> {
  String _displayText;

  @override
  void initState() {
    super.initState();
    _displayText = widget.text;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        onTap: () {
          setState(() {
            _displayText = _displayText.toUpperCase();
          });
        },
        child: Text(_displayText),
      ),
    );
  }
}

这个自定义小部件 MyCustomWidget 也接收一个字符串参数 text，并将其展示为一个 Text。与 StatelessWidget 不同的是，MyCustomWidget 继承自 StatefulWidget，同时实现了一个 State。

在 createState 方法中，返回一个新的状态。在这个状态类 _MyCustomWidgetState 中，我们定义了一个 _displayText 变量，并在 initState 方法中初始化它。

在 build 方法中，返回一个 GestureDetector，当点击此小部件时，使 _displayText 变量大写，并且调用 setState 方法。

总结

本文介绍了创建自定义小部件的方法，以及如何通过继承 StatelessWidget 和 StatefulWidget 来创建不同类型的小部件。自定义小部件是 Flutter 中非常重要的一部分，它可以让我们快速生成可复用的 UI 组件，从而加速开发进程。