当前位置：首页 > article >正文

Flutter 自定义组件继承与调用的高级使用方式

article 2024/10/31 3:33:12

✅近期推荐：求职神器

https://bbs.csdn.net/topics/619384540

🔥欢迎大家订阅系列专栏：flutter_鸿蒙next
💬淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！

写在前面

1. 什么是自定义组件？

2. 创建自定义组件

3. 继承自定义组件

4. 使用 Mixins 和组合

5. 自定义属性和样式

6. 高级组合模式

写在后面

写在前面

在 Flutter 中，自定义组件是构建复杂 UI 的核心。通过继承和组合，您可以创建可重用、灵活的组件。本文将深入探讨 Flutter 中自定义组件的高级使用方式，帮助您更好地理解如何通过继承和组合构建灵活的 UI 组件。

1. 什么是自定义组件？

自定义组件是您可以根据需求定义的 Flutter Widget。它们可以是 StatefulWidget 或 StatelessWidget。自定义组件的关键是将 UI 和业务逻辑封装在一个单一的组件中，使其易于重用和维护。

2. 创建自定义组件

首先，让我们创建一个基本的自定义组件。例如，我们可以创建一个简单的按钮组件：

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({Key? key, required this.label, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

在这个例子中，CustomButton 接受一个标签和一个点击事件的回调。

3. 继承自定义组件

继承是自定义组件的高级用法之一。通过继承，您可以扩展现有组件的功能。例如，您可能想要创建一个带有图标的自定义按钮：

class IconButton extends CustomButton {
  final Icon icon;

  const IconButton({
    Key? key,
    required String label,
    required VoidCallback onPressed,
    required this.icon,
  }) : super(key: key, label: label, onPressed: onPressed);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        icon,
        SizedBox(width: 8),
        super.build(context), // 调用父类的 build 方法
      ],
    );
  }
}

在这个示例中，IconButton 继承自 CustomButton，并添加了一个图标。通过调用 super.build(context)，我们可以重用 CustomButton 的构建逻辑。

4. 使用 Mixins 和组合

除了继承外，使用 Mixins 也是实现组件功能复用的有效方式。假设我们想为多个组件添加工具提示功能：

mixin TooltipMixin on StatelessWidget {
  final String tooltip;

  TooltipMixin(this.tooltip);

  Widget buildWithTooltip(BuildContext context, Widget child) {
    return Tooltip(
      message: tooltip,
      child: child,
    );
  }
}

class TooltipButton extends StatelessWidget with TooltipMixin {
  final String label;
  final VoidCallback onPressed;

  TooltipButton({Key? key, required this.label, required this.onPressed, required String tooltip})
      : super(key: key) {
    this.tooltip = tooltip;
  }

  @override
  Widget build(BuildContext context) {
    return buildWithTooltip(context, CustomButton(label: label, onPressed: onPressed));
  }
}

在这个例子中，TooltipMixin 负责处理工具提示逻辑，TooltipButton 组件使用这个 Mixin 来添加工具提示功能。这种方式使得我们的组件更加模块化和灵活。

5. 自定义属性和样式

您可以通过添加自定义属性来扩展组件的功能。例如，您可以在 CustomButton 中添加颜色和大小属性：

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
  final Color color;
  final double fontSize;

  const CustomButton({
    Key? key,
    required this.label,
    required this.onPressed,
    this.color = Colors.blue,
    this.fontSize = 16.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(primary: color),
      child: Text(
        label,
        style: TextStyle(fontSize: fontSize),
      ),
    );
  }
}

6. 高级组合模式

通过组合，可以将多个自定义组件组合在一起，构建复杂的 UI。例如，我们可以将 CustomButton 和 TooltipButton 组合在一起，形成一个新的组件：

class CustomTooltipButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
  final String tooltip;

  const CustomTooltipButton({
    Key? key,
    required this.label,
    required this.onPressed,
    required this.tooltip,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: tooltip,
      child: CustomButton(label: label, onPressed: onPressed),
    );
  }
}