Flutter 中如何创建自定义 Widget？

推荐答案

在 Flutter 中创建自定义 Widget 通常有两种方式：

1. 组合现有 Widget：通过组合多个现有的 Widget 来创建新的 Widget。
2. 继承 StatelessWidget 或 StatefulWidget：通过继承 StatelessWidget 或 StatefulWidget 来创建全新的 Widget。

1. 组合现有 Widget

-- -------------------- ---- -------
----- ------------ ------- --------------- -
  ---------
  ------ ------------------ -------- -
    ------ ----------
      -------- ---------------------
      ------ -------
        --------- -
          ------------ ---------
          ---------------
            ---------- -- -
              ------------- -----------
            --
            ------ ----------- -----
          --
        --
      --
    --
  -
-

2. 继承 StatelessWidget 或 StatefulWidget

继承 StatelessWidget

-- -------------------- ---- -------
----- --------------------- ------- --------------- -
  ---------
  ------ ------------------ -------- -
    ------ ----------
      ------ ------------
      ------ -------
        ------ ---------- -- - ------ ------------------
      --
    --
  -
-

继承 StatefulWidget

-- -------------------- ---- -------
----- -------------------- ------- -------------- -
  ---------
  -------------------------- ------------- -- -----------------------------
-

----- -------------------------- ------- --------------------------- -
  --- -------- - --

  ---- ------------------- -
    ----------- -
      -----------
    ---
  -

  ---------
  ------ ------------------ -------- -
    ------ ---------
      ------- -------
        ------ ------------ -----------------
      --
      ----- -------
        ------ -------
          ------------------ -------------------------
          --------- ---------
            --------- ---- ------ --- ------ ---- ---- ---------
            -----
              ------------
              ------ --------------------------------------
            --
          --
        --
      --
      --------------------- ---------------------
        ---------- ------------------
        -------- ------------
        ------ ----------------
      --
    --
  -
-

本题详细解读

1. 组合现有 Widget

组合现有 Widget 是最常见的创建自定义 Widget 的方式。通过将多个现有的 Widget 组合在一起，可以快速构建出复杂的 UI 结构。这种方式的好处是代码简洁、易于维护，并且可以充分利用 Flutter 提供的丰富的 Widget 库。

2. 继承 StatelessWidget 或 StatefulWidget

继承 StatelessWidget

StatelessWidget 是不可变的 Widget，一旦创建后，其状态不会改变。适合用于展示静态内容的场景。通过继承 StatelessWidget，可以创建一个全新的 Widget，并在 build 方法中定义其 UI 结构。

继承 StatefulWidget

StatefulWidget 是可变的 Widget，可以在其生命周期内改变状态。适合用于需要动态更新 UI 的场景。通过继承 StatefulWidget，可以创建一个带有状态的 Widget，并在 State 类中管理其状态和 UI 更新。

总结

在 Flutter 中，创建自定义 Widget 的方式非常灵活，开发者可以根据具体需求选择合适的方式。无论是通过组合现有 Widget，还是通过继承 StatelessWidget 或 StatefulWidget，都可以轻松实现自定义的 UI 组件。