主页 / coding / 问题 / 78527963
Accepted
Giulia Santoiemma
Asked: 2024-05-24 18:29:17 +0800 CST

如何对带有或不带有图标的 ElevatedButton 应用不同的样式

  • 772

在我的应用程序中，我有很多ElevatedButtons，我在主题中设置了样式。我需要将带有图标的样式设置为与不带图标的样式不同的样式。

这是只有一个属性的代码，但它适用于所有属性ElevatedButtons，我如何选择带有 图标的属性并给它们一个不同的属性borderRadius？

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
    ),
  );
}
flutter

1 个回答

  1. Best Answer

    为了实现这一目标，我建议创建一个自定义小部件作为提升按钮的包装器。例子：

    class CustomButton extends StatelessWidget {
  final Icon? icon;
  final VoidCallback? onPressed;
  final Widget child;

  const CustomButton({
    super.key,
    required this.child,
    this.icon,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final style = ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          // Set the different border radius here
          borderRadius: BorderRadius.circular(icon != null ? 50.0 : 10.0),
        ),
      ),
    );

    return icon != null
        ? ElevatedButton.icon(
            onPressed: onPressed,
            icon: icon!,
            label: child,
            style: style,
          )
        : ElevatedButton(
            onPressed: onPressed,
            style: style,
            child: child,
          );
  }
}

    该icon参数可以为空（可选），如果设置了该参数，则应该ElevatedButton.icon使用指定的样式构建一个。否则，它会以其风格构建一个标准的风格（应该与ElevatedButton.icon的风格不同）。

    输出：

    没有图标：

    CustomButton(
    onPressed: () {},
    child: const Text('Elevated Button'),
),

    在此输入图像描述

    带图标：

    CustomButton(
    icon: const Icon(Icons.add),
    onPressed: () {},
    child: const Text('Icon Elevated Button'),
),

    在此输入图像描述

    style请注意，如果您想保留ThemeData主应用程序小部件的样式，您可以删除标准按钮（不带图标）。但是，我不推荐它，因为将有一个显式小部件来处理提升按钮的外观。

    • 1

相关问题