Flutter布局从入门到精通，Flex、FittedBox、Stack、Container全解

前端

2023-12-14 23:27:56

掌握 Flutter 布局：Flex、FittedBox、Stack 和 Container

Flex 布局：动态布局的基石

Flex 布局是 Flutter 中最强大的布局工具之一。它允许您按水平或垂直方向排列子元素，并灵活控制它们的尺寸和对齐方式。Flex 布局基于简单的语法，使用 Row 和 Column 小部件来创建布局。

FittedBox 布局：按比例缩放您的内容

FittedBox 布局旨在将子元素调整为特定的尺寸。当您需要在有限的空间内显示图像或其他内容时，此布局非常有用。FittedBox 布局使用 FittedBox 小部件，其语法也很简洁。

Stack 布局：创建层次结构

Stack 布局是构建复杂布局的理想选择。它将子元素堆叠在一起，允许您创建具有标题和卡片等功能的布局。Stack 布局使用 Stack 小部件，其语法非常简单。

Container 布局：构建您的基础

Container 布局是 Flutter 中最基本的布局。它可用于创建具有特定尺寸、颜色和边框的容器。Container 布局使用 Container 小部件，其语法也很简洁。

示例：将它们组合起来

以下是使用 Flex 布局、FittedBox 布局、Stack 布局和 Container 布局创建示例应用程序的代码：

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('Flutter 布局教程'),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Text('Flex 布局'),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Text('FittedBox 布局'),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Container(
                  color: Colors.blue,
                  child: Text('Stack 布局'),
                ),
                Positioned(
                  top: 10,
                  left: 10,
                  child: Container(
                    color: Colors.yellow,
                    child: Text('Container 布局'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}