Flutter自定义组件MyContainer的color属性不生效问题求助

核心问题原因 #

你的MyContainer组件里，BoxDecoration的color被硬编码成了Colors.white，完全没用到你传入的color参数，所以不管外部传什么颜色，容器背景始终是白色。

修复后的MyContainer代码 #

class MyContainer extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry margin;
  final Color color;

  MyContainer({required this.child, this.margin = const EdgeInsets.all(12),required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      decoration: BoxDecoration(
        // 替换硬编码值为传入的color参数
        color: color,
        borderRadius: BorderRadius.all(
          Radius.circular(15),
        ),
      ),
      child: child,
    );
  }
}

额外注意：GenderWidget的onTap触发问题 #

你的GenderWidget里onTap: onPressed()的写法有问题——这会导致组件初始化时就直接执行onPressed方法，而不是点击时才触发。需要改成以下两种写法之一：

写法1：直接传递函数引用

GestureDetector(
  onTap: onPressed, // 去掉括号
  child: ...
)

写法2：用匿名函数包裹

GestureDetector(
  onTap: () => onPressed(),
  child: ...
)

修改后GenderWidget完整代码：

class GenderWidget extends StatelessWidget {
  final String gender;
  final Function onPressed;
  GenderWidget({required this.gender, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.person),
          const SizedBox(height: 10),
          Text(gender,style: textStyle,),
        ],
      ),
    );
  }
}

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