Aligned with the relative positioning (the Align)
Positioned by Stack and flutter, more sub-elements can specify a precise offset with respect to each side of the parent element, and may overlap. But if we simply want to adjust the position of a child element in the parent element, then, using the Align components will be easier.
1.Align
the Align component subassembly position can be adjusted, and may determine its width and height, is defined as follows according to the aspect of the sub-assembly:
Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
Properties:
1.alignment: AlignmentGeometry type requires a value representing the starting position of the subassembly in the parent assembly. AlignmentGeometry is an abstract class with two subclasses common: Alignment and FractionalOffset, will be described in detail in the following example.
2.widthFactor heightFactor and for determining the width and height of the component itself Align properties; they are two scaling factors, respectively, will be multiplied by the sub-element width, height, width and height of the final result is the Align assembly. If the value is null, the component's width and height will take up as much space.
- When widthFactor == null, the width of the Center components be as large as, android equivalent of match_parent
- When widthFactor! = Null, the assembly is equal to the width of the Center subassembly widthFactor width *
- When heightFactor == null, highly Center components to what extent, the equivalent of android in match_parent
- When heightFactor! = Null, the height of the Center component is equal to the height of the sub-assemblies heightFactor *
3.child: Align components shown inside the subassembly
Example:
Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
)
Run results shown in Figure:
FlutterLogo is a component Flutter SDK provided content is the trademark of Flutter. In the above example, we Container explicitly specified width and height are 120. If we do not explicitly specify the width and height, and by specifying widthFactor heightFactor and 2 can also achieve the same effect:
Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
Because the width and height FlutterLogo 60, the width and height are ultimately Align 2 * 60 = 120.
In addition, we will FlutterLogo by Alignment.topRight positioned in the upper right corner of the Container. Alignment.topRight What is it? We can see through the source code is defined as follows:
//右上角
static const Alignment topRight = Alignment(1.0, -1.0);
You can see an example of it is just Alignment, here we introduce Alignment.
2.Alignment
the Alignment inherited from AlignmentGeometry, represents a point in the rectangular, he has two attributes x, y, respectively, offset in the horizontal and vertical directions, the Alignment is defined as follows:
Alignment(this.x, this.y)
Alignment Widget will rectangular center point as the origin of coordinates, i.e. Alignment (0.0, 0.0). x, y values from -1 to 1 to represent the distance from the left and top of the rectangle on the right side in the end, and thus two horizontal (or vertical) unit of width of the rectangle is equal to (or higher), as Alignment (-1.0, -1.0) representative of the left side of the rectangle vertices and Alignment (1.0, 1.0) on the right represents the bottom end, and Alignment (1.0, -1.0) is the right side of the vertex, i.e. Alignment.topRight. For convenience, the origin rectangular, four vertices, and the four sides in the end Alignment classes have been defined for the static constant.
Alignment which can coordinate conversion formula which will be converted to the coordinates of the specific sub-elements offset coordinates:
(Alignment.x*childWidth/2+childWidth/2, Alignment.y*childHeight/2+childHeight/2)
Wherein the width childWidth child element, childHeight sub-element height.
Now we look at the example above, we will Alignment (1.0, -1.0) into the above equation, the actual available FlutterLogo exactly offset coordinates (60,0). A look at the following example:
Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment(2,0.0),
child: FlutterLogo(
size: 60,
),
)
We can first imagine operating results: the Alignment (2,0.0) into the coordinate conversion formula, you can get the actual offset coordinates FlutterLogo is (90,30). The actual operation shown in Figure:
3.FractionalOffset
FractionalOffset inherited from Alignment, and it is the only difference Alignment coordinate different origin! FractionalOffset rectangular coordinate origin of the left vertex, and the layout of the system is consistent, it will be easier to understand. FractionalOffset coordinate conversion formula is:
实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)
We see an example below:
Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: FractionalOffset(0.2, 0.6),
child: FlutterLogo(
size: 60,
),
),
)
Actual operating results as shown:
We FractionalOffset (0.2, 0.6) into the coordinate conversion formula is obtained FlutterLogo actual offset (12, 36), and the actual operating results coincide.
Align and Stack contrast
can be seen, Align and Stack / Positioned sub-elements may be used to specify an offset relative to the parent element, but they still have two main differences:
1. Different reference positioning system; reference frame Stack / Positioned positioning may be four vertices of a rectangle of the parent container; Align is the need to determine the origin of coordinates by the alignment parameters, alignment of different origin may correspond to different final offset It is calculated by the required alignment of the conversion formula.
2.Stack can have multiple sub-elements and sub-elements can be stacked, and Align can only have one child, there is no stacking.
4.Center components
in the previous example has been used to center the Center component sub-elements, and now we officially introduce it. By looking SDK source code, we see the Center components are defined as follows:
class Center extends Align {
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
You can see inherited from Align Center, Align it is only less than a alignment parameters; because the constructor Align the alignment is Alignment.center, so we can say that the alignment Center component is actually determined (Alignment.center) of the Align.
Above we talked about when as many widthFactor or heightFactor is null width and height of the component will take up space, this requires special attention, we work through an example:
...//省略无关代码
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Center(
child: Text("xxx"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: Text("xxx"),
),
)
Run results as shown:
Summary:
This section focuses on the components and two kinds of offset type Align Alignment and FractionalOffset, we need to understand the difference between the two classes and the respective offset coordinate conversion formula. In addition, the reader is advised in this need to develop some of the exact offset should be preferentially used FractionalOffset, because it's the same coordinate origin and distribution system, make it easier to calculate actual shift.
In the back, we introduced the Align components and Stack / Positioned, relations Center, you can understand the comparison.
Also, the students are familiar with Web development may find that characteristics Align components of Web development and relative positioning (position: relative) very much like, yes! Most of the time, we can directly use the Align Web components to achieve the effect of relative positioning, the analogy can remember.
