Flutter基础（前端教程⑤-组件重叠）

不重叠

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF5F5F5),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,  // 让卡片靠左对齐
                  children: [
                    Rectangle1(),
                    

                    TopAppBar(),
                    Tabs(),
                    ListItemListItem0Density(),
                    Frame41(),
                    Frame39(),
                    StateLayer1(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(),
    );
  }
}

重叠

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 叠加区域：Rectangle1、TopAppBar 和 Tabs
                    Stack(
                      children: [
                        // 底层背景
                        Rectangle1(),
                        
                        // 搜索栏（TopAppBar）：固定在顶部
                        Positioned(
                          top: 20, // 调整与顶部的距离
                          left: 16,
                          right: 16,
                          child: TopAppBar(),
                        ),
                        
                        // 标签栏（Tabs）：位于背景下方
                        Positioned(
                          top: 100, // 调整与顶部的距离，确保在背景内
                          left: 0,
                          right: 0,
                          child: Tabs(),
                        ),
                      ],
                    ),
                    
                    // 非叠加区域：其余组件按顺序排列
                    const SizedBox(height: 20), // 增加间距，避免与上方重叠
                    ListItemListItem0Density(),
                    Frame41(),
                    Frame39(),
                    StateLayer1(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(),
    );
  }
}

1. Stack 组件基础

Stack 允许子组件按照添加顺序堆叠显示（类似 PS 中的图层），后添加的组件会覆盖在先添加的组件之上。

基本语法：

Stack(
  alignment: Alignment.center, // 对齐方式（默认左上角）
  fit: StackFit.loose,         // 确定非Positioned子组件的大小
  children: [
    // 子组件按顺序堆叠
    Child1(),
    Child2(), // 会覆盖在Child1之上
    Child3(), // 会覆盖在Child1和Child2之上
  ],
)

2. Positioned 组件基础

Positioned 只能作为 Stack 的子组件使用，用于精确控制子组件在 Stack 中的位置和大小。

基本语法：

Stack(
  children: [
    Positioned(
      top: 20,     // 距离Stack顶部的距离
      left: 16,    // 距离Stack左侧的距离
      width: 100,  // 宽度（可选，不设置则根据child自适应）
      height: 50,  // 高度（可选）
      child: Text('定位文本'),
    ),
  ],
)

1