面试题：Flutter Container布局下如何实现复杂的叠加效果

Question

假设需要在一个Container中，先绘制一个带有模糊阴影的圆形，再在圆形上面叠加一个带有圆角且有半透明遮罩的矩形，并且矩形内部还有文本，使用Flutter的Container布局相关知识，该如何实现？请阐述实现思路并给出大致代码框架。

Answer 1

实现思路

1. 使用 Container 绘制圆形，通过 decoration 的 BoxDecoration 设置圆形形状以及模糊阴影效果。
2. 在圆形的 Container 上层叠加另一个 Container 绘制带圆角且有半透明遮罩的矩形。
3. 在矩形 Container 内添加文本。
4. 通过 Stack 布局将两个 Container 进行叠加。

大致代码框架

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              // 绘制带有模糊阴影的圆形
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: const Offset(0, 3), // 阴影位置
                    ),
                  ],
                ),
              ),
              // 绘制带有圆角且有半透明遮罩的矩形，并添加文本
              Container(
                width: 150,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white.withOpacity(0.5),
                ),
                child: const Center(
                  child: Text('矩形内部文本'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}