Flutter常用组件-布局组件_flutter 布局组件

1 Row

Row 是 Flutter 中用于水平排列子组件的布局组件之一。它可以将其子组件水平排列，并根据需要进行对齐、定位等操作。

源码：

  Row({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    super.children,
  }) 

参数说明：

• mainAxisAlignment: 控制子组件在主轴方向（水平方向）的对齐方式，默认为 MainAxisAlignment.start，表示子组件居左对齐。其他可能的取值包括 MainAxisAlignment.center、MainAxisAlignment.end 等。
• mainAxisSize: 控制主轴方向上的尺寸，默认为 MainAxisSize.max，表示主轴方向上尽可能占用较多的空间。另一个可能的取值是 MainAxisSize.min，表示主轴方向上尽可能小。
• crossAxisAlignment: 控制子组件在交叉轴方向（垂直方向）的对齐方式，默认为 CrossAxisAlignment.center，表示子组件居中对齐。其他可能的取值包括 CrossAxisAlignment.start、CrossAxisAlignment.end 等。
• textDirection: 子组件的文本方向，默认为 TextDirection.ltr，表示从左向右排列。可以设置为 TextDirection.rtl，表示从右向左排列。
• verticalDirection: 控制子组件在交叉轴方向上的排列顺序，默认为 VerticalDirection.down，表示从上到下排列。可以设置为 VerticalDirection.up，表示从下到上排列。
• textBaseline: 子组件的基线对齐方式。由于文本的基线可能不同，这个属性没有默认值，需要根据具体情况设置。
• children: 包含在 Row 中的子组件列表。

示例：

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.star,
          color: Colors.white,
        ),
        Text(
          'Hello',
          style: TextStyle(backgroundColor: Colors.greenAccent),
        ),
        Text('World'),
      ],
    ),
  ));
}

2 Column

Column 是 Flutter 中用于垂直排列子组件的布局组件之一。它可以将其子组件垂直排列，并根据需要进行对齐、定位等操作。

Column 组件继承自 Flex 组件，因此具有 Flex 组件的所有属性。

源码：

  Column({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline,
    super.children,
  })

参数说明：

• mainAxisAlignment: 控制子组件在主轴方向（垂直方向）的对齐方式，默认为 MainAxisAlignment.start，表示子组件居顶部对齐。其他可能的取值包括 MainAxisAlignment.center、MainAxisAlignment.end 等。
• mainAxisSize: 控制主轴方向上的尺寸，默认为 MainAxisSize.max，表示主轴方向上尽可能占用较多的空间。另一个可能的取值是 MainAxisSize.min，表示主轴方向上尽可能小。
• crossAxisAlignment: 控制子组件在交叉轴方向（水平方向）的对齐方式，默认为 CrossAxisAlignment.center，表示子组件居中对齐。其他可能的取值包括 CrossAxisAlignment.start、CrossAxisAlignment.end 等。
• textDirection: 子组件的文本方向，默认为 TextDirection.ltr，表示从左向右排列。可以设置为 TextDirection.rtl，表示从右向左排列。
• verticalDirection: 控制子组件在交叉轴方向上的排列顺序，默认为 VerticalDirection.down，表示从上到下排列。可以设置为 VerticalDirection.up，表示从下到上排列。
• textBaseline: 子组件的基线对齐方式。由于文本的基线可能不同，这个属性没有默认值，需要根据具体情况设置。
• children: 包含在 Column 中的子组件列表。

示例：

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.star,
          color: Colors.white,
        ),
        Text(
          'Hello',
          style: TextStyle(backgroundColor: Colors.greenAccent),
        ),
        Text('World'),
      ],
    ),
  ));
}

3 Stack

Stack 是 Flutter 中的布局组件之一，用于在重叠的位置上放置子组件。子组件可以根据需要堆叠在一起，并且可以通过 alignment 属性来控制它们的对齐方式。

源码：

Stack({
  super.key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.clipBehavior = Clip.hardEdge,
  super.children,
});

参数说明：

• alignment: 控制子组件的对齐方式，默认为 AlignmentDirectional.topStart，表示子组件相对于 Stack 的起始位置（左上角）进行对齐。其他可能的取值包括 Alignment.topCenter、Alignment.bottomRight 等。
• textDirection: 控制子组件的文本方向。默认情况下会继承父组件的文本方向，通常不需要显式设置。
• fit: 控制子组件的尺寸调整策略，默认为 StackFit.loose，表示子组件尽可能小，但不会超出 Stack 的边界。另一个可能的取值是 StackFit.expand，表示子组件将填充满 Stack 的空间。
• clipBehavior: 控制子组件的裁剪行为，默认为 Clip.hardEdge，表示裁剪时使用硬边缘，裁剪的结果是一个矩形。另一个可能的取值是 Clip.none，表示不进行裁剪。
• children: 包含在 Stack 中的子组件列表。

示例：

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
      ],
    ),
  ));
}

示例创建了一个 Stack，其中包含了三个彼此重叠的容器。通过设置 alignment 属性为 Alignment.center，使得这些容器在 Stack 的中心位置对齐。

4 Positioned

Positioned 组件用于在 Stack 中定位子组件的位置。它允许您指定子组件相对于 Stack 的边缘的位置，或者指定子组件的宽度和高度。

源码：

  Positioned({
    super.key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    required super.child,
  }) 

参数说明：

• left：子组件相对于 Stack 左边缘的距离。
• top：子组件相对于 Stack 顶部边缘的距离。
• right：子组件相对于 Stack 右边缘的距离。
• bottom：子组件相对于 Stack 底部边缘的距离。
• width：子组件的宽度。
• height：子组件的高度。
• child：要定位的子组件。

left、top、right 和 bottom 属性是相对于 Stack 的边缘位置进行定位的，可以使用这些属性来指定子组件相对于 Stack 边缘的偏移量。如果同时指定了 left 和 right，或者同时指定了 top 和 bottom，则宽度或高度将会自动调整以适应。如果同时指定了 width 和 height，则子组件的大小将被固定，而不会根据 Stack 的大小自动调整。

示例：

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Stack(
      children: [
        Positioned(
          left: 10,
          top: 20,
          child: Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        ),
        Positioned(
          right: 10,
          bottom: 20,
          child: Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        ),
      ],
    ),
  ));
}

5 Flex

Flex 组件是用于在水平或垂直方向上排列子组件的布局组件之一。它通常与 Row 和 Column 这样的容器组件一起使用，用于控制子组件在主轴（水平方向或垂直方向）和交叉轴（垂直方向或水平方向）上的布局方式。

源码：

  Flex({
    super.key,
    required this.direction,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    this.clipBehavior = Clip.none,
    super.children,
  })

参数说明：

• direction：决定子组件的排列方向，可以是 Axis.horizontal（水平方向）或 Axis.vertical（垂直方向）。
• mainAxisAlignment：在主轴上对齐子组件的方式，默认为 MainAxisAlignment.start，可选的值包括 start、end、center、spaceBetween、spaceAround 和 spaceEvenly。
• mainAxisSize：在主轴上控制 Flex 组件的大小，默认为 MainAxisSize.max，可以是 MainAxisSize.min 或 MainAxisSize.max。
• crossAxisAlignment：在交叉轴上对齐子组件的方式，默认为 CrossAxisAlignment.center，可选的值包括 start、end、center、stretch 和 baseline。
• textDirection：用于确定文本方向的属性。
• verticalDirection：在垂直布局时，用于确定子组件在交叉轴上的对齐方式，默认为 VerticalDirection.down，可选的值有 down 和 up。
• clipBehavior：用于确定子组件溢出时的裁剪方式，默认为 Clip.none。

示例：

Flex 组件通常与 Row 或 Column 组件一起使用，根据需要选择水平方向或垂直方向来排列子组件。

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Flex(
      direction: Axis.horizontal,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(width: 50, height: 50, color: Colors.red),
        Container(width: 50, height: 50, color: Colors.green),
        Container(width: 50, height: 50, color: Colors.blue),
      ],
    ),
  ));
}

示例中，三个容器水平排列，它们在主轴上均匀分布，交叉轴上居中对齐。

6 Expanded

Expanded 组件是用于在布局中占据可用空间的一个子组件，通常用于 Row、Column 或 Flex 这样的布局组件中。它的作用是将其子组件扩展以填充其父布局在主轴方向上的剩余空间。

源码：

  Expanded({
    super.key,
    super.flex,
    required super.child,
  }) 

参数说明：

• flex：确定子组件在主轴上的扩展比例，默认为 1。如果有多个 Expanded 子组件，它们的 flex 属性值决定了它们在主轴上所占的比例。
• child：子组件，通常是一个 Widget。

示例：

使用 Expanded 组件非常简单，只需要将需要扩展的子组件放置在 Expanded 组件的内部即可。

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Row(
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            height: 100,
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.blue,
            height: 100,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            height: 100,
          ),
        ),
      ],
    ),
  ));
}

示例中，有三个容器放置在 Row 组件中，它们都被 Expanded 组件包裹。第一个和第三个容器没有指定 flex 属性，默认值为 1，因此它们在主轴上的扩展比例相同。第二个容器指定了 flex 为 2，所以它在主轴上的扩展比例是其他容器的两倍，因此它会占据更多的空间。