如何对Dart Flutter中重复调用的自定义JeffButton类实例进行个性化定制

核心逻辑是给你的自定义StatelessWidget添加可配置的构造参数，实例化时传入不同参数即可实现每个按钮单独定制，具体实现步骤如下：

1. 改造JeffButton类，添加可配置属性与构造函数 #

你可以根据需要定制的内容声明对应属性，比如按钮点击事件、图标、展示文字、图标大小、颜色等，将原来写死的固定值替换为参数变量即可：

import 'package:flutter/material.dart';

class JeffButton extends StatelessWidget {
  // 声明可配置的属性
  final IconData icon;
  final String label;
  final VoidCallback onPressed;
  final Color iconColor;
  final Color textColor;
  final double iconSize;

  // 构造函数，required代表必填参数，也可以添加默认值简化调用
  const JeffButton({
    super.key,
    required this.icon,
    required this.label,
    required this.onPressed,
    this.iconColor = Colors.white,
    this.textColor = Colors.white,
    this.iconSize = 85,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
      child: TextButton.icon(
        // 替换为传入的点击事件
        onPressed: onPressed,
        icon: Column(
          children: [
            Icon(
              // 替换为传入的图标
              icon,
              // 替换为传入的图标颜色
              color: iconColor,
              // 替换为传入的图标大小
              size: iconSize,
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                // 替换为传入的文字标签
                label,
                style: TextStyle(
                  // 替换为传入的文字颜色
                  color: textColor,
                ),
              ),
            ),
          ],
        ),
        label: const Text(''),
      ),
    );
  }
}

2. 实例化时传入不同参数，实现每个按钮个性化 #

之后创建按钮列表时，给每个JeffButton传入不同的参数即可：

class HomeButtons {
  List<Widget> jeffButtons = [
    // 第一个按钮：添加图标，标签为新建，点击触发新建逻辑
    JeffButton(
      icon: Icons.add,
      label: "新建",
      onPressed: () {
        // 写第一个按钮的点击逻辑
        debugPrint("点击了新建按钮");
      },
    ),
    // 第二个按钮：删除图标，标签为删除，图标红色
    JeffButton(
      icon: Icons.delete,
      label: "删除",
      iconColor: Colors.red,
      onPressed: () {
        debugPrint("点击了删除按钮");
      },
    ),
    // 剩下的按钮按需求传不同参数即可，还可以自定义iconSize、textColor等属性
    JeffButton(
      icon: Icons.edit,
      label: "编辑",
      onPressed: () => debugPrint("点击了编辑按钮"),
    ),
    JeffButton(
      icon: Icons.share,
      label: "分享",
      onPressed: () => debugPrint("点击了分享按钮"),
    ),
    JeffButton(
      icon: Icons.download,
      label: "下载",
      onPressed: () => debugPrint("点击了下载按钮"),
    ),
    JeffButton(
      icon: Icons.settings,
      label: "设置",
      onPressed: () => debugPrint("点击了设置按钮"),
    ),
  ];
}

补充说明 #

如果后续需要更多自定义能力，比如调整padding、字体大小、按钮背景色等，只需要在JeffButton类中新增对应属性，加入构造函数，再把原代码中的固定值替换为属性变量即可。

内容的提问来源于stack exchange，提问作者meltdown_ultra