3、Row和Colum属性详解_flutter row属性

一、Row 属性

Row是Flutter中用于水平排列子组件的布局控件，它有以下常用的属性：

1. children:

   • 类型：List<Widget>
   • 作用：指定要在Row中排列的子组件列表。

2. mainAxisAlignment:

   • 类型：MainAxisAlignment
   • 作用：控制子组件在主轴上的对齐方式。

3. crossAxisAlignment:

   • 类型：CrossAxisAlignment
   • 作用：控制子组件在交叉轴上的对齐方式。

4. mainAxisSize:

   • 类型：MainAxisSize
   • 作用：控制Row在主轴上的尺寸大小。

5. textDirection:

   • 类型：TextDirection
   • 作用：控制文本方向，影响水平方向的布局。

6. verticalDirection:

   • 类型：VerticalDirection
   • 作用：控制子组件在交叉轴上的排列顺序。

7. textBaseline:

   • 类型：TextBaseline
   • 作用：在基线对齐的情况下，控制文本的基线。

这些属性允许你对Row中的子组件进行不同的布局调整，从而实现不同的界面布局效果。

二、Row的用法

在Flutter中，Row是用于在水平方向上排列子组件的一个基本布局控件。它将其子组件按照水平方向依次排列，类似于行布局。以下是Row的一些常用属性以及相应的示例说明：

1. children:

   • 类型：List<Widget>
   • 作用：指定要在Row中排列的子组件列表。
   • 示例：

     Row(
       children: [
         Text("Hello"),
         Text("World"),
       ],
     )
     1
     2
     3
     4
     5
     6

2. mainAxisAlignment:

   • 类型：MainAxisAlignment
   • 作用：控制子组件在主轴上的对齐方式。
   • 可选值：MainAxisAlignment.start、MainAxisAlignment.center、MainAxisAlignment.end、MainAxisAlignment.spaceBetween、MainAxisAlignment.spaceAround、MainAxisAlignment.spaceEvenly等。
   • 示例：

     Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Text("Left"),
         Text("Center"),
         Text("Right"),
       ],
     )
     1
     2
     3
     4
     5
     6
     7
     8

3. crossAxisAlignment:

   • 类型：CrossAxisAlignment
   • 作用：控制子组件在交叉轴上的对齐方式。
   • 可选值：CrossAxisAlignment.start、CrossAxisAlignment.center、CrossAxisAlignment.end、CrossAxisAlignment.stretch等。
   • 示例：

     Row(
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         Container(width: 50, height: 50, color: Colors.red),
         Container(width: 30, height: 70, color: Colors.green),
         Container(width: 70, height: 30, color: Colors.blue),
       ],
     )
     1
     2
     3
     4
     5
     6
     7
     8

4. mainAxisSize:

   • 类型：MainAxisSize
   • 作用：控制Row在主轴上的尺寸大小。
   • 可选值：MainAxisSize.max（默认，尽可能填充空间）、MainAxisSize.min（适应子组件尺寸）。
   • 示例：

     Row(
       mainAxisSize: MainAxisSize.min,
       children: [
         Text("Small"),
         Text("Size"),
       ],
     )
     1
     2
     3
     4
     5
     6
     7

5. textDirection:

   • 类型：TextDirection
   • 作用：控制文本方向，影响水平方向的布局。
   • 可选值：TextDirection.ltr（从左到右，默认）、TextDirection.rtl（从右到左）。
   • 示例：

     Row(
       textDirection: TextDirection.rtl,
       children: [
         Text("مرحبا"),
         Text("عالم"),
       ],
     )
     1
     2
     3
     4
     5
     6
     7

6. verticalDirection:

   • 类型：VerticalDirection
   • 作用：控制子组件在交叉轴上的排列顺序。
   • 可选值：VerticalDirection.down（从上到下，默认）、VerticalDirection.up（从下到上）。
   • 示例：

     Row(
       verticalDirection: VerticalDirection.up,
       children: [
         Text("Top"),
         Text("Bottom"),
       ],
     )
     1
     2
     3
     4
     5
     6
     7

7. textBaseline:

   • 类型：TextBaseline
   • 作用：在基线对齐的情况下，控制文本的基线。
   • 可选值：TextBaseline.alphabetic、TextBaseline.ideographic。
   • 示例：

     Row(
       textBaseline: TextBaseline.ideographic,
       crossAxisAlignment: CrossAxisAlignment.baseline,
       textDirection: TextDirection.ltr,
       children: [
         Text("汉字", style: TextStyle(fontSize: 30)),
         Text("Alphabetic", style: TextStyle(fontSize: 20)),
       ],
     )
     1
     2
     3
     4
     5
     6
     7
     8
     9

这些是Row常用的属性，通过调整它们的值，你可以控制Row中子组件的布局方式和样式。根据你的需求，可以灵活地组合这些属性来实现不同的布局效果。

三、Row的使用场景

Row在Flutter中的使用场景是需要将多个子组件水平排列在一行的情况。以下是一些常见的使用场景：

1. 导航栏：在顶部导航栏中，可能包含了多个导航项，如返回按钮、标题、操作按钮等。这些导航项通常被水平排列在一行，这时可以使用Row来实现。

2. 工具栏：类似于导航栏，工具栏也可能包含多个工具按钮，这些按钮可以使用Row在水平方向上进行排列。

3. 底部选项卡：在底部选项卡栏中，通常会有多个选项卡按钮，这些按钮可以使用Row水平排列在底部。

4. 表单字段：在某些表单中，可能需要在一行内放置多个表单字段，如文本输入框、复选框等。

5. 水平列表：如果需要在一行内显示多个列表项，可以使用Row来排列这些列表项，尤其在有限的宽度内显示多个内容时很有用。

6. 水平图标和文本组合：当需要将图标和文本水平排列在一起时，可以使用Row来实现。

7. 水平对齐元素：如果需要在一行中进行水平对齐的元素，如多个按钮、标签等，可以使用Row来布局。

总之，任何需要将多个组件水平排列在一行的场景都可以使用Row来实现。通过调整Row的属性，你可以控制子组件的排列方式、对齐方式以及尺寸大小，从而满足不同的布局需求。

四、Colum

Column是Flutter中用于垂直排列子组件的布局控件，它有以下常用的属性：

1. children:

   • 类型：List<Widget>
   • 作用：指定要在Column中排列的子组件列表。

2. mainAxisAlignment:

   • 类型：MainAxisAlignment
   • 作用：控制子组件在主轴上的对齐方式。

3. crossAxisAlignment:

   • 类型：CrossAxisAlignment
   • 作用：控制子组件在交叉轴上的对齐方式。

4. mainAxisSize:

   • 类型：MainAxisSize
   • 作用：控制Column在主轴上的尺寸大小。

5. textDirection:

   • 类型：TextDirection
   • 作用：控制文本方向，影响垂直方向的布局。

6. verticalDirection:

   • 类型：VerticalDirection
   • 作用：控制子组件在交叉轴上的排列顺序。

7. textBaseline:

   • 类型：TextBaseline
   • 作用：在基线对齐的情况下，控制文本的基线。

这些属性与Row的属性类似，但是用于垂直方向上的布局。通过调整这些属性的值，你可以控制Column中子组件的排列方式、对齐方式以及尺寸大小，从而实现不同的垂直布局效果。

五、Colum的用法

当你使用Column布局时，可以通过调整属性来控制子组件的排列方式和样式。以下是一些具体示例：

1. 基本垂直布局:

Column(
  children: [
    Text("Header"),
    Text("Content"),
    Text("Footer"),
  ],
)
1
2
3
4
5
6
7

2. 交叉轴对齐:

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Text("Right Aligned"),
    Text("Center Aligned"),
    Text("Left Aligned"),
  ],
)
1
2
3
4
5
6
7
8

3. 主轴对齐:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3"),
  ],
)
1
2
3
4
5
6
7
8

4. 控制尺寸:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text("Small Text"),
    Text("Tiny Text"),
  ],
)
1
2
3
4
5
6
7

5. 文本基线对齐:

Column(
  textBaseline: TextBaseline.ideographic,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textDirection: TextDirection.ltr,
  children: [
    Text("汉字", style: TextStyle(fontSize: 30)),
    Text("Alphabetic", style: TextStyle(fontSize: 20)),
  ],
)
1
2
3
4
5
6
7
8
9

6. 反向排列:

Column(
  verticalDirection: VerticalDirection.up,
  children: [
    Text("Bottom"),
    Text("Top"),
  ],
)
1
2
3
4
5
6
7

7. 嵌套布局:

Column(
  children: [
    Text("Header"),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Icon(Icons.star),
        Icon(Icons.star),
        Icon(Icons.star),
      ],
    ),
    Text("Footer"),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这些示例中，Column用于垂直排列子组件。你可以根据需要使用不同的属性来调整子组件的排列方式、对齐方式和尺寸，以满足你的布局需求。

六、Colum的使用场景

Column在Flutter中的使用场景是需要将多个子组件垂直排列的情况。以下是一些常见的使用场景：

1. 列表：如果你需要在垂直方向上显示一个列表，例如聊天消息列表、通知列表等，可以使用Column来排列列表项。

2. 表单：当你需要在垂直方向上放置多个表单字段，如文本输入框、复选框等，可以使用Column来布局表单。

3. 卡片：在卡片式布局中，可能需要将标题、内容、操作按钮等元素垂直排列，这时可以使用Column来实现。

4. 详细信息：在显示详细信息页面时，你可能希望将不同部分的信息垂直排列，例如标题、图像、描述、评论等。

5. 导航页：在移动应用中，导航页可能包含多个导航选项，这些选项可以使用Column垂直排列。

6. 垂直图标和文本组合：当需要将图标和相关文本垂直排列在一起时，可以使用Column来布局。

7. 垂直对齐元素：如果需要在一列中进行垂直对齐的元素，如多个按钮、标签等，可以使用Column来布局。

总之，任何需要将多个组件垂直排列在一列的场景都可以使用Column来实现。通过调整Column的属性，你可以控制子组件的排列方式、对齐方式以及尺寸大小，从而满足不同的垂直布局需求。