Flutter中如何在Container内插入两张装饰性图片？

你遇到的问题是BoxDecoration的image属性仅支持设置单张装饰图，所以直接用它无法同时加载两张图。这里提供两种更优雅的替代方案：

方案一：利用foregroundDecoration叠加装饰层 #

Container除了decoration，还有foregroundDecoration属性，可以在主装饰层上方再添加一层装饰，刚好用来放置第二张图：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Container(
          width: 341,
          height: 91,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: const Color.fromRGBO(5, 96, 250, 1),
            image: const DecorationImage(
              alignment: Alignment.bottomLeft,
              image: AssetImage('assets/images/elips2.png'),
            ),
          ),
          // 前景装饰层放置右上角的图
          foregroundDecoration: const BoxDecoration(
            image: DecorationImage(
              alignment: Alignment.topRight,
              image: AssetImage('assets/images/elips1.png'),
            ),
          ),
        ),
      ),
    );
  }
}

这个方案完全不需要额外的子组件，仅通过Container自身的装饰属性实现，结构最简洁。

方案二：用Stack实现多层布局 #

如果后续需要在容器内添加更多交互元素，Stack会更灵活，它可以清晰地分层管理不同的视觉元素：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SizedBox(
          width: 341,
          height: 91,
          child: Stack(
            children: [
              // 底层容器：背景色+左下角图
              Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: const Color.fromRGBO(5, 96, 250, 1),
                  image: const DecorationImage(
                    alignment: Alignment.bottomLeft,
                    image: AssetImage('assets/images/elips2.png'),
                  ),
                ),
              ),
              // 上层定位图：右上角
              const Align(
                alignment: Alignment.topRight,
                child: Image.asset('assets/images/elips1.png'),
              ),
              // 后续可以在这里添加其他文本/按钮等元素
            ],
          ),
        ),
      ),
    );
  }
}

两种方案都能替代你原来的Column实现，且结构更清晰优雅，可根据后续需求选择合适的方式。

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