Flutter背景装饰Widget覆盖其他元素问题求助

你的问题核心是：封装的background Widget虽然接收了child参数，但没有将这个子元素添加到Container中，导致只有背景Container被渲染，传入的Column完全没显示，看起来像是背景覆盖了所有元素。

修改方案 #

把background Widget的代码修改为：

import 'package:flutter/material.dart';

Widget background({required Widget child}) {
  return Container(
    padding: const EdgeInsets.all(20),
    alignment: Alignment.topCenter,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Color(0xff0b4257),
          Color(0xcc0b4257),
          Color(0x990b4257),
          Color(0x660b4257),
        ],
      ),
    ),
    child: child, // 关键：添加这一行，将传入的子元素嵌入Container
  );
}

补充说明 #

1. 新增的child: child是核心，让Container同时承载背景装饰和子元素，子元素会自动显示在背景之上；
2. 把参数类型从Column改为Widget，能让这个背景Widget适配更多类型的子元素，提升复用性；
3. LoginPage中的调用代码无需修改，因为Column是Widget的子类，完全兼容。

效果截图：

内容的提问来源于stack exchange，提问作者CândidoGuilherme