面试题：Flutter中Container与Stack布局结合实现复杂交互界面

Question

使用Container和Stack实现一个具有以下特性的界面：底部是一个铺满屏幕宽度、高度为200像素的Container作为背景展示图片；在这个背景Container之上，有三个不同大小和透明度的Container重叠放置，并且这三个Container需要响应点击事件，点击后改变自身颜色，同时向控制台输出点击信息。请阐述完整的实现逻辑并给出主要代码。

Answer 1

实现逻辑

1. 设置底部背景Container：使用Container铺满屏幕宽度，高度设为200像素，并设置背景图片。
2. 创建三个重叠的Container：定义三个不同大小和透明度的Container，并将它们重叠放置在背景Container之上。
3. 添加点击事件处理：为这三个Container添加点击事件监听器，在点击时改变自身颜色并向控制台输出点击信息。

主要代码（以Flutter为例）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 底部背景Container
            Container(
              width: double.infinity,
              height: 200,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/background.jpg'), // 替换为实际图片路径
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 第一个重叠的Container
            Positioned(
              top: 50,
              left: 50,
              child: GestureDetector(
                onTap: () {
                  print('第一个Container被点击');
                },
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue.withOpacity(0.7),
                ),
              ),
            ),
            // 第二个重叠的Container
            Positioned(
              top: 80,
              left: 80,
              child: GestureDetector(
                onTap: () {
                  print('第二个Container被点击');
                },
                child: Container(
                  width: 150,
                  height: 150,
                  color: Colors.green.withOpacity(0.5),
                ),
              ),
            ),
            // 第三个重叠的Container
            Positioned(
              top: 120,
              left: 120,
              child: GestureDetector(
                onTap: () {
                  print('第三个Container被点击');
                },
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red.withOpacity(0.3),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. Stack用于重叠放置多个Widget。
2. Positioned用于指定子Widget在Stack中的位置。
3. GestureDetector用于添加点击事件监听器。

如果是其他框架，实现思路类似，但具体代码语法会有所不同。例如在React Native中，需要使用View组件和TouchableOpacity等组件来实现类似功能。