Flutter 中的容器和列小部件有什么区别？答案

【问题标题】：What is the difference between a container and column widget in Flutter?Flutter 中的容器和列小部件有什么区别？
【发布时间】：2020-02-04 08:19:27
【问题描述】：

我最近开始学习 Flutter。在布局小部件的概念下，我遇到了 container 和 column 小部件。我发现类似的是，这两个小部件都按列顺序对齐其他小部件。但我无法区分它们。

简而言之，它们两者有什么区别，在什么场景下，使用这两个小部件中的任何一个？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您只能在Container 中放置一个子小部件。对齐属性只会影响那个孩子。

您可以在Column 中放置任意数量的子小部件。对齐将影响所有孩子。此外，孩子们可以在两个轴上对齐，水平轴和垂直轴。

编辑：

很好的备忘单供进一步阅读https://pusher.com/tutorials/flutter-building-layouts 和https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

【讨论】：

非常感谢。我怀疑如果我在水平轴上对齐 Column 子项，它会类似于 Row 小部件吗？或者你说的是根据主轴和交叉轴对齐元素，类似于 CSS 中的 FlexBox，以便 Column 小部件仍然保持其方向？
yes 栏目仍然是主要方向；只有孩子使用使用的对齐方式对齐到特定的一侧。所以，在任何情况下，一列都不会变成一行。
查看 dit 以获取有关该主题的有用链接

【解决方案2】：

容器

这是每个 Flutter 应用中最常用的小部件。它主要用于为其子小部件设置样式。它只需要一个孩子。一些颤振小部件只关注其核心功能，不包含太多样式选项。容器小部件来救援，并为您提供各种常见的绘画、定位和调整大小的小部件。

Container(
   child: Widget  //Another flutter widget
)

行/列

这些是可以包含多个子小部件的小部件。行是可以水平显示各种子widget的widget。该列以垂直方式显示子小部件。默认情况下，这些小部件不支持滚动。它可以通过与其他小部件包装来启用。但是，如果有很多子窗口小部件，最好使用 ListView。

Row(
  children: [
    Container(), // First Widget
    Text(),      // Second Widget
    ----,
    ----,    // Multiple Widgets
  ])
Column(
  children: [
    Container(), // First Widget
    Text(),      // Second Widget
    ----,
    ----,    // Multiple Widgets
  ])

比较

|-------------------------------|------------------------------------|
|      CONTAINER                |    COLUMN/ROW                      |
|-------------------------------|------------------------------------|
|*Takes exactly one child widget| *Takes multiple (unlimited)        |
|                               |  child widgets.                    |
|                               |                                    |
|*Rich alignment and styling    | *Alignment options available, but  |
| options are available         |  there are no styling options.     | 
|                               |                                    |
|                               |                                    |
|                               |                                    |
|*Flexible width                |*Always takes full available        |
|  (e.g. child width,           |  height (column) /width (row)      |
|     available width, …)       |                                    |
|                               |                                    |
|                               |                                    |
|*Perfect for custom styling    |*Must-use if widgets sit next       |
|    and alignment              | to/above each other                |
|-------------------------------|------------------------------------|

【讨论】：

【解决方案3】：

1) 容器主要用于设置小部件的样式。色谱柱用途垂直显示小部件。

2) 容器只有一个子部件。列有多个孩子小部件

【讨论】：

【解决方案4】：

一列实际上是一列。小部件（可以带孩子，而不仅仅是孩子）放在单个文件中。

容器仅是 1 个小部件的父级。通过添加行或列来解决此问题。如果您需要为列设置样式，请使用包装在容器中的列或行。

Container(
  //styling
  Column(
    //content
  )
)

【讨论】：