Flutter 页面布局：深入理解 Stack 层叠组件实现定位布局

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Basics'),
        ),
        body: Stack(
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，我们创建了一个包含两个 Container 的 Stack。由于没有指定位置，这两个 Container 会堆叠在一起，红色的 Container 会覆盖在蓝色 Container 的上面（因为它在 Stack 的子组件列表中排在后面）。

二、Align 组件与 Stack 结合使用

Align 组件用于在父组件中对齐子组件，与 Stack 结合时，可以轻松地将子组件定位到 Stack 的特定位置。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack with Align'),
        ),
        body: Stack(
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Align(
              alignment: Alignment.topRight,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们通过 Align 组件将红色的 Container 定位到了 Stack 的右上角。Alignment 属性可以接受各种预定义的对齐方式，如 Alignment.topLeft（左上角）、Alignment.center（居中）等，也可以使用自定义的 Alignment 值来实现更灵活的对齐。

三、Positioned 组件实现精确位置定位

Positioned 组件用于在 Stack 中对子组件进行精确的位置定位。通过指定 left、top、right 和 bottom 等属性，可以将子组件放置在 Stack 内的任意位置。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack with Positioned'),
        ),
        body: Stack(
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Positioned(
              left: 50,
              top: 50,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这段代码中，红色的 Container 通过 Positioned 组件被定位到了距离 Stack 左边缘 50 像素、上边缘 50 像素的位置。如果同时指定了 left 和 right（或 top 和 bottom），子组件的大小将根据这两个属性的值自动调整。

四、综合使用实现复杂布局

在实际项目中，往往需要结合 Stack、Align 和 Positioned 组件来实现复杂的页面布局。例如，创建一个带有浮动按钮的卡片式布局。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Complex Stack Layout'),
        ),
        body: Stack(
          children: [
            Container(
              margin: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: Offset(0, 3),
                  ),
                ],
              ),
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Card Title',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8),
                    Text('This is a sample card content.'),
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Container(
                margin: EdgeInsets.all(16),
                child: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.add),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用 Stack 创建了一个卡片式布局，并在卡片的右下角添加了一个浮动按钮。通过 BoxDecoration 和 Padding 等组件来美化卡片样式，利用 Align 组件将浮动按钮定位到右下角。

五、总结

Stack、Align 和 Positioned 组件是 Flutter 中实现定位布局的重要工具。通过合理使用这些组件，开发者可以轻松创建出各种复杂且美观的页面布局。在实际开发过程中，需要根据具体的设计需求灵活运用它们，不断尝试和优化，以打造出用户体验优秀的应用界面。希望本文的内容能帮助你更好地掌握 Flutter 的布局技巧，提升开发效率。