3、Row和Colum属性详解

最新推荐文章于 2024-07-07 10:26:08 发布

piplab666

最新推荐文章于 2024-07-07 10:26:08 发布

阅读量736

点赞数

分类专栏： Flutter Widget 属性详解文章标签： flutter ui

本文链接：https://blog.csdn.net/qq_31556299/article/details/132417785

版权

Flutter Widget 属性详解专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Flutter中的Row和Column布局控件，包括它们的属性如children、mainAxisAlignment、crossAxisAlignment等，并提供了用法示例。Row用于水平排列子组件，Column用于垂直排列，适用于导航栏、工具栏、表单布局等多种场景，通过调整属性可以实现灵活的布局设计。

摘要由CSDN通过智能技术生成

一、Row 属性

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

children:
- 类型：List<Widget>
- 作用：指定要在Row中排列的子组件列表。
mainAxisAlignment:
- 类型：MainAxisAlignment
- 作用：控制子组件在主轴上的对齐方式。
crossAxisAlignment:
- 类型：CrossAxisAlignment
- 作用：控制子组件在交叉轴上的对齐方式。
mainAxisSize:
- 类型：MainAxisSize
- 作用：控制Row在主轴上的尺寸大小。
textDirection:
- 类型：TextDirection
- 作用：控制文本方向，影响水平方向的布局。
verticalDirection:
- 类型：VerticalDirection
- 作用：控制子组件在交叉轴上的排列顺序。
textBaseline:
- 类型：TextBaseline
- 作用：在基线对齐的情况下，控制文本的基线。

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

二、Row的用法

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

children:
- 类型：List<Widget>
- 作用：指定要在Row中排列的子组件列表。
- 示例：
```
Row(
  children: [
    Text("Hello"),
    Text("World"),
  ],
)
```
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"),
  ],
)
```

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),
  ],
)

mainAxisSize:
- 类型：MainAxisSize
- 作用：控制Row在主轴上的尺寸大小。
- 可选值：MainAxisSize.max（默认，尽可能填充空间）、MainAxisSize.min（适应子组件尺寸）。
- 示例：
```
Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text("Small"),
    Text("Size"),
  ],
)
```
textDirection:
- 类型：TextDirection
- 作用：控制文本方向，影响水平方向的布局。
- 可选值：TextDirection.ltr（从左到右，默认）、TextDirection.rtl（从右到左）。
- 示例：
```
Row(
  textDirection: TextDirection.rtl,
  children: [
    Text("مرحبا"),
    Text("عالم"),
  ],
)
```
verticalDirection:
- 类型：VerticalDirection
- 作用：控制子组件在交叉轴上的排列顺序。
- 可选值：VerticalDirection.down（从上到下，默认）、VerticalDirection.up（从下到上）。
- 示例：
```
Row(
  verticalDirection: VerticalDirection.up,
  children: [
    Text("Top"),
    Text("Bottom"),
  ],
)
```

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)),
  ],
)

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

三、Row的使用场景

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

导航栏：在顶部导航栏中，可能包含了多个导航项，如返回按钮、标题、操作按钮等。这些导航项通常被水平排列在一行，这时可以使用Row来实现。
工具栏：类似于导航栏，工具栏也可能包含多个工具按钮，这些按钮可以使用Row在水平方向上进行排列。
底部选项卡：在底部选项卡栏中，通常会有多个选项卡按钮，这些按钮可以使用Row水平排列在底部。
表单字段：在某些表单中，可能需要在一行内放置多个表单字段，如文本输入框、复选框等。
水平列表：如果需要在一行内显示多个列表项，可以使用Row来排列这些列表项，尤其在有限的宽度内显示多个内容时很有用。
水平图标和文本组合：当需要将图标和文本水平排列在一起时，可以使用Row来实现。
水平对齐元素：如果需要在一行中进行水平对齐的元素，如多个按钮、标签等，可以使用Row来布局。

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

四、Colum

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

children:
- 类型：List<Widget>
- 作用：指定要在Column中排列的子组件列表。
mainAxisAlignment:
- 类型：MainAxisAlignment
- 作用：控制子组件在主轴上的对齐方式。
crossAxisAlignment:
- 类型：CrossAxisAlignment
- 作用：控制子组件在交叉轴上的对齐方式。
mainAxisSize:
- 类型：MainAxisSize
- 作用：控制Column在主轴上的尺寸大小。
textDirection:
- 类型：TextDirection
- 作用：控制文本方向，影响垂直方向的布局。
verticalDirection:
- 类型：VerticalDirection
- 作用：控制子组件在交叉轴上的排列顺序。
textBaseline:
- 类型：TextBaseline
- 作用：在基线对齐的情况下，控制文本的基线。

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

五、Colum的用法

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

基本垂直布局:

Column(
  children: [
    Text("Header"),
    Text("Content"),
    Text("Footer"),
  ],
)

交叉轴对齐:

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Text("Right Aligned"),
    Text("Center Aligned"),
    Text("Left Aligned"),
  ],
)

主轴对齐:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3"),
  ],
)

控制尺寸:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text("Small Text"),
    Text("Tiny Text"),
  ],
)

文本基线对齐:

Column(
  textBaseline: TextBaseline.ideographic,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textDirection: TextDirection.ltr,
  children: [
    Text("汉字", style: TextStyle(fontSize: 30)),
    Text("Alphabetic", style: TextStyle(fontSize: 20)),
  ],
)

反向排列:

Column(
  verticalDirection: VerticalDirection.up,
  children: [
    Text("Bottom"),
    Text("Top"),
  ],
)

嵌套布局:

Column(
  children: [
    Text("Header"),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Icon(Icons.star),
        Icon(Icons.star),
        Icon(Icons.star),
      ],
    ),
    Text("Footer"),
  ],
)