Flutter Column和Row组件

Column

Imagine you’re stacking books on a shelf. Each book is a different piece of information, yet they all need to fit neatly within the shelf’s space. Similarly, in Flutter, the Column widget serves as a vertical arrangement tool for your UI elements.

想象一下，你正在把书堆在书架上。每本书都是不同的信息，但它们都需要整齐地放在书架的空间里。同样，在Flutter中，“Column”小部件作为UI元素的垂直排列工具。

When you use a Column, you’re essentially creating a vertical list of widgets that are stacked on top of each other, one after the other. Just like how books have different heights, each widget in a Column can have its own size and proportions. This arrangement is particularly useful when you want to present information in a structured and readable format, such as a list of messages, user details, or navigation options.

当你使用“列”时，你实际上是在创建一个垂直的小部件列表，这些小部件一个接一个地堆叠在一起。就像书有不同的高度一样，“列”中的每个小部件也可以有自己的大小和比例。当您希望以结构化和可读的格式显示信息(例如消息列表、用户详细信息或导航选项)时，这种安排特别有用。

See Figure 3.3: Column widget Marked in rectangle:

参见图3.3:矩形标记的列部件:

在这里插入图片描述Flexible Layouts and Alignment灵活的布局和对齐

Much like adjusting the spacing between your books on a shelf, you can control the spacing between widgets within a Column. You can also align these widgets to your liking—be it at the start, center, or end of the column—using alignment properties.

就像调整书架上书籍之间的间距一样，你可以在“列”中控制小部件之间的间距。您还可以使用对齐属性将这些小部件对齐到您喜欢的位置——无论是在列的开始、中心还是末尾。

Widgets within Widgets

部件中的部件

Don’t forget that you can place any widget you like within a Column. Whether it’s text, images, buttons, or even other containers, you can stack them up for a clear and organized presentation.

别忘了，你可以在“列”中放置任何你喜欢的小部件。无论是文本、图像、按钮还是其他容器，您都可以将它们堆叠起来，以获得清晰而有组织的展示。

As you progress through this chapter, we’ll take a deeper dive into the Column widget, exploring its various properties and use cases. So, if you’re curious to learn more about how to fine-tune your vertical layouts, you’re in for a ride! Keep an eye out for upcoming sections where we’ll explore the intricacies of the Column widget and its versatile applications.

Row

Let’s take a closer look at the Row widget with a relatable illustration. Imagine you have a shoe rack where you neatly arrange your shoes in a row. Each pair of shoes occupies a designated spot, and you can easily add or remove shoes as needed. In the world of Flutter, the Row widget functions in a similar way—it allows you to arrange UI elements horizontally, just like those shoes on a rack.

让我们用一个相关的插图来仔细看看' Row '小部件。想象你有一个鞋架，你可以把鞋子整齐地排成一排。每双鞋都有一个指定的位置，你可以根据需要轻松地添加或脱掉鞋子。在Flutter的世界里，“Row”小部件的功能与此类似——它允许你水平排列UI元素，就像架子上的鞋子一样。

Here’s a comprehensive explanation of how the Row widget works:

Horizontal Arrangement: The primary purpose of theRow widget is to place its child widgets in a horizontal line.This is particularly useful when you want to display itemsside by side, such as buttons, text, or images.

Main Axis Alignment: You have the power to define howthe children are aligned along the main axis, which runs horizontally for a Row. This alignment can be set to the start, center, end, or even space evenly between the items.

Cross Axis Alignment: Similar to the main axis, the crossaxis alignment determines how the children align vertically. This ensures that your items are not only arranged side by side but also consistently aligned in a straight line vertically.

Distributing Space: When dealing with varying sizes of UI elements, you can use the Expanded or Flexible widgets to distribute available space among the children. This is akin to having adjustable shelves on your shoe rack for larger or smaller shoes.

Adding Spacing: Using the mainAxisAlignment and crossAxisAlignment properties, you can control the spacing between the children. Think of it as arranging your shoes with uniform gaps to ensure they look neat and wellorganized.

下面是对“Row”小部件工作原理的全面解释:

水平排列:' row '小部件的主要目的是将其子小部件放置在水平线上。当您想要并排显示项目(如按钮、文本或图像)时，这尤其有用。

主轴对齐:你可以定义孩子如何沿着主轴对齐，这是水平运行的“行”。这种对齐方式可以设置为开始、居中、结束，甚至是项目之间的均匀间距。

十字轴对齐:与主轴类似，十字轴对齐决定子轴如何垂直对齐。这确保你的项目不仅并排排列，而且始终在一条直线垂直对齐。

分配空间:当处理不同大小的UI元素时，您可以使用“扩展”或“灵活”小部件在子组件之间分配可用空间。这类似于在你的鞋架上有可调节的架子，可以放大鞋子或小鞋子。

添加间距:使用' mainAxisAlignment '和' crossAxisAlignment '属性，你可以控制子元素之间的间距。把它想象成把你的鞋子排列成统一的缝隙，以确保它们看起来整洁有序。

Much like the meticulous arrangement of shoes on a rack, the Row widget in Flutter allows you to create visually pleasing and responsive layouts.

就像在架子上精心安排鞋子一样，Flutter中的“Row”小部件允许您创建视觉上令人愉悦的响应式布局。

As we delve further into this chapter, we’ll take a deeper dive into the Row widget, exploring its properties, customization options, and practical examples.

随着本章的深入，我们将更深入地研究“Row”小部件，探索其属性、自定义选项和实际示例。