flutter的stack布局组件示例

这段代码创建了一个 Flutter 应用，使用Stack布局和状态管理来实现根据按钮点击切换不同子组件布局的效果。这种方式可以在需要动态切换显示不同重叠布局的场景中使用。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _toggle = false; // 用于切换布局的标志

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Toggle Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 堆叠布局
              Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  // 底层的Container
                  Container(
                    width: 200,
                    height: 200,
                    color: Colors.red,
                  ),
                  // 根据切换标志来决定显示哪个布局
                  if (_toggle)
                    Positioned(
                      left: 50,
                      top: 50,
                      child: Container(
                        width: 100,
                        height: 100,
                        color: Colors.green,
                      ),
                    )
                  else
                    Positioned(
                      right: 50,
                      bottom: 50,
                      child: Container(
                        width: 75,
                        height: 75,
                        color: Colors.blue,
                      ),
                    ),
                ],
              ),
              // 切换按钮
              SizedBox(height: 20), // 添加一些间距
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _toggle = !_toggle; // 切换布局
                  });
                },
                child: Text('Toggle Layout'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以下是对这段代码的分析：

一、整体结构
这段代码是一个使用 Flutter 框架创建的应用程序，展示了如何使用Stack布局和切换标志来动态切换显示不同的子组件布局。

二、代码详细分析

1. import ‘package:flutter/material.dart’;
   导入 Flutter 的 Material 设计风格的库，以便使用 Flutter 提供的各种 UI 组件和功能。

2. void main() { runApp(MyApp()); }
   main函数是应用程序的入口点。这里调用了runApp函数并传入一个MyApp实例，启动了 Flutter 应用程序。

3. class MyApp extends StatefulWidget {… }
   MyApp类是一个有状态的组件，继承自StatefulWidget。它的目的是创建一个可以管理状态的应用程序。

4. class _MyAppState extends State {… }
   _MyAppState是MyApp的状态类，用于管理MyApp的状态。
   bool _toggle = false;定义了一个布尔变量，用于作为切换布局的标志。
   build方法构建了应用程序的用户界面。
   返回一个MaterialApp实例，设置了应用的首页为一个包含AppBar和Center的Scaffold。
   AppBar显示了应用程序的标题，这里是’Stack Toggle Example’。
   Center将其子组件居中显示，子组件是一个Column布局。
   Column布局将其子组件垂直排列，包含一个Stack布局和一个ElevatedButton。
   Stack布局是一个堆叠布局，子组件可以重叠放置。
   alignment属性设置了子组件的对齐方式为中心对齐。
   子组件包含两个固定大小和颜色的Container，一个作为底层容器，另一个根据切换标志_toggle的 值，通过条件判断来决定显示位置和颜色的容器。
   ElevatedButton是一个带有凸起效果的按钮，当点击时调用onPressed的回调函数。
   在回调函数中，通过setState方法更新状态，将_toggle的值取反，实现切换布局的效果。