This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge

Note: This article is republished from the personal official account (the island tip)

The Flutter is Google’s mobile UI framework that allows you to quickly build high quality native user interfaces and applications from a single code base for mobile (iOS & Android), the Web, desktop, and embedded devices.

  • Front Reading: [Flutter Foundation] View layout – Preface

Row, Column, ListBody, ListView, Wrap, and Flow are all widgets that are used to lay out the entire page, because they all support multiple child elements. It specifies which widgets can have multiple child elements and which widgets can have only a single child element.

In the actual use of Flutter, Row, Column, and ListView are frequently used layout widgets.

There are a few other concepts to understand before you can understand the layout.

The concept of “axis”

Row and Column in The Flutter are different from other languages in that they use the concept of Axis.

The Row and Column implementations also inherit from Flex and are somewhat similar to CSS Flex.



(Row, Column)

What do you mean by axis?

We’re going to think of Row as a Row and Column as a Column, and there’s no objection to that. But the concepts of Main Axis and Cross Axis are added here.

What does that mean? This means that if the current Widget is rendered in landscape, then its main axis is in landscape and its cross axis is in portrait. If the Render Widget is rendered in portrait, then its main axis is in portrait and its cross axis is in landscape.

At first glance, this description may make you look…

That’s ok, let’s use the traditional x and y:

Render Row is Row, it is horizontal, so its main axis is x axis, cross axis is y axis.

Render Column is Column, it is vertical, so its main axis is y axis, cross axis is x axis.

That makes sense, right?

What? You don’t get it? Oh, my God. How could someone like that be? In that case, don’t blame me for magnifying! Come! Give me the picture!



(Row, Column)

Although Cross Axis is translated as “Cross Axis”, I personally prefer to call it “sub-axis” because it is much clearer to understand. Of course, this is a matter of personal habit, you shaoxia can also be interpreted by the translation.

attribute

After understanding the concept of an axis, we can take a look at its properties.

Not much force, directly on the source code!



(Row attribute composition)



(Column attribute composition)

In the source code, you can see that Row and Column have the above attributes, which are inherited from Flex. Most of these properties are of the enum enum type. The call to get the value of a limited list of unchangeable data is Ok, eliminating the problem of input strings that may cause character mismatches or magic strings.

// The alignment of the main axis
MainAxisAlignment mainAxisAlignment
// Cross (sub) axis alignment
CrossAxisAlignment crossAxisAlignment
// The size of the main axis direction, namely occupies space
MainAxisSize mainAxisSize
// Vertical - Down by default
VerticalDirection verticalDirection
// Text orientation - default
TextDirection textDirection
// Text baseline
TextBaseline textBaseline
// A list of child elements of type Widget
List<Widget> children
Copy the code

The layout properties

Once you have a brief look at the basic properties, let’s talk about the three main properties that affect the layout structure:

  • mainAxisAlignment
  • crossAxisAlignment
  • mainAxisSize

mainAxisAlignment

MainAxisAlignment is the alignment of the main axis, where the main axis of Row is the X-axis and the main axis of Column is the Y-axis.

As I explored the final render of mainAxisAlignment, I realized that it would be better to split it into two alignments. One is axis alignment and the other is space allocation alignment.

Axis alignment is translational alignment based on the main axis.

Space allocation alignment is the alignment of space allocation on the axis based on the main axis.

Axis alignment

  • Start defaults, Row left-aligned on the main axis and Column top-aligned on the main axis
  • End, Row, right on the main axis, Column, bottom on the main axis
  • Center aligns Row with the horizontal center axis and Column with the vertical center axis



(Axis alignment)

Space allocation alignment

  • spaceBetween Around the polesAlignment,The remaining elementsAt the same intervalAllocate the remaining space equally
  • SpaceAround each elementAt the same left and right spacingAllocate the remaining space equally
  • spaceEvenly All the elementsAt the same intervalAllocate the remaining space equally



(Space allocation alignment)

crossAxisAlignment

CrossAxisAlignment is the alignment of cross-axes, which I call sub-axes, where the cross axis of a Row is the Y-axis and the cross axis of a Column is the X-axis.

  • Start is the top alignment of the Row crosstalk, and Column is the left alignment of the Column crosstalk
  • End is the bottom alignment of the Row crosstalk and Column is the right alignment of the Column crosstalk
  • Center is the default value, which is the vertical center alignment of the Row cross axis and the horizontal center alignment of the Column cross axis
  • Stretch is a Row childThe tensiletoThe cross axes are the same height, Column child elementThe tensiletoThe cross axes are of the same width
  • baseline Need to beTextBaselineTogether with

Not surprisingly, start, end, and Center render as expected on the cross axis.



(Alignment of cross axes)

stretch

Stretch is to stretch the child elements on the cross axis to the same space as the cross axis, but without affecting the direction of the main axis.

These are the main properties that affect the main axis, cross axis and final render view.

mainAxisSize

MainAxisSize is also a relatively simple property, and the name gives you a rough idea of the result. This property controls the size of a Row or Column in the direction of the main axis.

It has two values, Max and min, and the default is Max. Max is 100% on the main axis, and min is the minimum space required for a child element, so the alignment on the main axis is no longer visible.

verticalDirection

Next comes the property verticalDirection, which affects verticalDirection behavior. The verticalDirection section is described in the source code

(The picture is lost, find time to fill the picture)

VerticalDirection: The verticalDirection property affects vertical rendering behavior. It changes vertical alignment.

VerticalDirection indicates the verticalDirection. It has two values: up and down. The default value is down.

Using the code as a reference:



(verticalDirection affects behavior)

It only affects vertical behavior, not horizontal, i.e. the cross axis of a Row and the main axis of a Column.

textDirection

I don’t need to specify the textDirection.

textBaseline

Sorry about the textBaseline property! After trying various ways to work with the text Settings, there was no difference between alphabetic and ideographic values in the final rendered view.

Case implementation

After getting the basic information, we still need to move our hands, so let’s implement the example given in The Chinese version of the Flutter:

As you can see, it breaks the design into its basic elements. It is divided into four parts: an image, a title + button, a function button group, and a text block.

So we have to think about finding its largest wrapping element, so we have one column and four rows. Since we’re going from top to bottom, we use Column to identify the Column, and then we use four child elements to implement the row content.

Since the code for Flutter is available on the Chinese website, the implementation steps will not be detailed here. For specific code, see building layouts in Flutter.

The problem

Given that rows and columns were used to complete the following layout without regard to functionality, how would you think and design?

Look forward to your thinking results and action results

conclusion

At the heart of the layout mechanism of Flutter are widgets. In Flutter, almost everything is a Widget – even the layout model is a widget. In fact, the use of the tag logic is mostly similar to HTML, but the widget design is more detailed, with each widget responsible for a fixed rendering result or behavior pattern. View layout is relatively easy to implement as long as you understand the widgets.

The last

  • The difficulty with layouts is not how complex they are, but how you understand how to break them down.
  • Think about how a new language is similar or different from the ones you’ve already learned. The similarities can be quickly understood and the differences targeted.

The code for this article has been updated to Github at github.com/linxsbox/my…

Front Reading: [Flutter Foundation] View layout – Preface