页面布局

Flutter中的布局是指如何将UI元素组织在屏幕上，以便构建一个美观、有效的用户界面。Flutter中的布局主要使用“盒模型”和“Flex布局”两种方式。

盒模型

在Flutter中，每个UI元素都可以被视为一个矩形盒子，其中包含内容、边框和内边距。这些盒子可以被嵌套，从而形成更复杂的布局。Flutter中的盒模型使用了CSS盒模型的基本概念，包括以下四个属性：

• margin（外边距）：用于控制UI元素与其它元素之间的距离。
• padding（内边距）：用于控制UI元素内部内容与边框之间的距离。
• border（边框）：用于控制UI元素边框的样式、颜色和宽度。
• content（内容）：包含UI元素实际显示的内容。

盒子可以通过Container类来创建，这是Flutter中用于构建盒模型的基本类。下面是一个简单的例子，展示了如何使用Container类来创建一个带有红色边框、黄色背景和一些文本的盒子：

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.yellow,
    border: Border.all(color: Colors.red),
  ),
  child: Text('Hello, Flutter!'),
)

Flex布局

除了盒模型之外，Flutter还提供了一种称为“Flex布局”的方式来构建布局。Flex布局可以看作是一种更高级别的布局方式，它可以更好地控制子元素的位置和大小。在Flutter中，使用Flex布局需要使用两个类：Row和Column。

Row和Column都继承自Flex，是Flex的子类，它们分别用于构建水平方向和垂直方向的布局。它们都可以包含多个子元素，并且可以控制子元素的位置和大小。下面是一个简单的例子，展示了如何使用Row和Column类来构建布局：

Column(
  children: [
    Text('Row 1'),
    Text('Row 2'),
    Text('Row 3'),
  ],
)

Row(
  children: [
    Text('Column 1'),
    Text('Column 2'),
    Text('Column 3'),
  ],
)

这些都是Flutter中基本的布局方式，但实际上Flutter还提供了许多其它的布局方式，如Stack、Expanded等，可以根据具体的应用场景选择合适的布局方式。

Flutter的Layout指的是控件在父控件中的位置和大小，包括绝对布局、相对布局、线性布局、流式布局等多种布局方式。本篇文章将为您介绍Flutter中常用的布局方式。

绝对布局

绝对布局指的是将控件按照绝对位置进行布局，通常使用Positioned控件实现。例如：

Stack(
  children: <Widget>[
    Positioned(
      left: 20,
      top: 20,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      right: 20,
      top: 20,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

相对布局

相对布局指的是控件在父控件中相对于其他控件的位置和大小，通常使用Align或Positioned控件实现。例如：

Stack(
  children: <Widget>[
    Positioned(
      left: 0,
      top: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Align(
      alignment: Alignment.topRight,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

线性布局

线性布局指的是将控件按照一定方向进行布局，通常使用Row或Column控件实现。例如：

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        height: 100,
        color: Colors.green,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

流式布局

流式布局指的是控件按照一定规则进行自适应布局，通常使用Wrap或Flow控件实现。

拥有单个子元素的布局widget

拥有多个子元素的布局widget

Layout helpers