如何将 2 个装饰图像插入到容器中？ [颤抖[

Question

我无法通过 DecorationImage 将两个静态图像加载到容器中

我尝试通过附加列加载，但在我看来这对开发人员来说非常糟糕。或许还有更好的结果

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.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),
            shape: BoxShape.rectangle,
            color: Color.fromRGBO(5, 96, 250, 1),
            image: DecorationImage(
              alignment: Alignment.bottomLeft,
              image: AssetImage('assets/images/elips2.png'),
            ),
          ),
          child: Column(
            children: [
              Flexible(
                flex: 1,
                child: Align(
                    alignment: Alignment.topRight,
                    child: Image.asset('assets/images/elips1.png')),
              ),
              // Align(
              //     alignment: Alignment.bottomLeft,
              //     child: Image.asset('assets/images/elips2.png')),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

为什么不使用 Stack 小部件将图像叠加在一起。像这样：

import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: 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: Color.fromRGBO(5, 96, 250, 1),
          ),
          child: Stack(
            children: [
              Positioned(
                top: 0,
                right: 0,
                child: Image.asset('assets/images/elips1.png'),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                child: Image.asset('assets/images/elips2.png'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}