Flutter基础(前端教程⑤-组件重叠)

不重叠

Dart 复制代码
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(),
    );
  }
}

重叠

Dart 复制代码
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 中的图层),后添加的组件会覆盖在先添加的组件之上。

基本语法:

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

2. Positioned 组件基础

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

基本语法:

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

1

相关推荐
wjs20241 分钟前
Perl 错误处理
开发语言
楼田莉子2 小时前
C++学习:C++11介绍及其新特性学习
开发语言·c++·学习·stl·visual studio
做运维的阿瑞2 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
不枯石2 小时前
Matlab通过GUI实现点云的随机一致性(RANSAC)配准
开发语言·图像处理·算法·计算机视觉·matlab
牛马的人生3 小时前
MATLAB模块库入门:提升你的工程分析效率
开发语言·其他·matlab
Dontla4 小时前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
光电笑映4 小时前
C++list全解析
c语言·开发语言·数据结构·c++·list
yinuo4 小时前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
恋猫de小郭5 小时前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
小龙报5 小时前
《构建模块化思维---函数(下)》
c语言·开发语言·c++·算法·visualstudio·学习方法