Dart中BoxDecoration动态设置Gradient/Color时标识符错误问题

我写了一个构建AppBar操作项的Dart函数，需求是：传入Gradient参数时使用渐变样式，传入Color参数时使用带指定透明度的颜色。但当前代码报「期望标识符」错误，不知道怎么正确编写这个逻辑。

错误代码如下：

InkWell buildAppBarActionItem({
     Gradient gradient,
    String icon,
    double width = 36,
    double height = 36,
    double radius = 12,
  
    Color color,
    Function onpressed,
    double opacity = 1,
  }) {
    return InkWell(
      onTap: onpressed,
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(radius),
          ),
          if(color){
            color: color.withOpacity(opacity)
           }
          else{
          gradient: StyleBtn.buildLinearGradient(begin: Alignment.topLeft, eng: Alignment.topRight)
             }

          // color? color: color.withOpacity(opacity) : gradient: StyleBtn.buildLinearGradient(begin: Alignment.topLeft, eng: Alignment.topRight),
        ),
        child: Center(
          child: ImageIcon(
            AssetImage("assets/icon/${icon}"),
            size: 16.0,
            color: MyTheme.white,
          ),
        ),
     
      ),
    );
  }

问题原因 #

你在BoxDecoration的参数列表里用了普通代码块的if/else写法，这不符合Dart对象字面量的条件成员语法，所以报「期望标识符」错误。Dart里在对象或集合字面量中添加条件属性，不能加{}，要直接用条件判断语法。

正确实现 #

下面是修正后的代码，同时处理了「优先用渐变→其次用颜色→都没传用默认渐变」的逻辑，还修正了原代码里的eng笔误（应该是end）：

InkWell buildAppBarActionItem({
  Gradient gradient,
  String icon,
  double width = 36,
  double height = 36,
  double radius = 12,
  Color color,
  Function onPressed,
  double opacity = 1,
}) {
  return InkWell(
    onTap: onPressed,
    child: Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(radius)),
        // 传入渐变参数时，使用该渐变
        if (gradient != null) gradient: gradient,
        // 无渐变但有颜色参数时，使用带透明度的颜色
        if (gradient == null && color != null) color: color.withOpacity(opacity),
        // 两者都没传时，使用默认渐变
        if (gradient == null && color == null) 
          gradient: StyleBtn.buildLinearGradient(begin: Alignment.topLeft, end: Alignment.topRight),
      ),
      child: Center(
        child: ImageIcon(
          AssetImage("assets/icon/${icon}"),
          size: 16.0,
          color: MyTheme.white,
        ),
      ),
    ),
  );
}

补充说明 #

• Dart对象字面量的条件属性语法：直接在参数列表里写if (条件) 属性名: 属性值，不需要包裹大括号
• 如果需要处理「渐变和颜色同时传入」的场景，可以根据业务需求调整判断优先级，比如优先用渐变或者优先用颜色
• 原代码里的onpressed建议改成小驼峰onPressed，符合Dart命名规范

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