Linear layout
Horizontal linear layout
Row can arrange its children horizontally
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
///Indicates the layout order of horizontal subcomponents (from left to right or from right to left). The default value is the text direction of the current Locale (for example, the text direction of Chinese and English is from left to right, but the text direction of Arabic is from right to left).
textDirection: TextDirection.ltr,
///Represents the space taken up in the horizontal direction. The default is mainaxissie.max
mainAxisSize: MainAxisSize.max,
///Represents how the child components are aligned in the horizontal space occupied by the Row,
///If mainAxisSize is mainAxissize.min, this property is meaningless.
///This property only makes sense if mainAxisSize is mainAxissize.max,
///Mainaxisalignment. start indicates alignment in the initial direction of textDirection,
///For example, if textDirection is textdirection. LTR, mainaxisalignment. start indicates left alignment; if textDirection is textdirection. RTL, it indicates right alignment.
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
///box
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 200,
height: 200, color: Colors.blue, ), ], )); }}Copy the codeVertical linear layout
ColumnChildren can be arranged vertically
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
///The height of Row is equal to the height of the highest child element in the child component. The value is the same as the MainAxisAlignment (start, end, and center).
///The difference is that the reference frame of crossAxisAlignment is verticalDirection. That is, when the verticalDirection value is verticaldirection. down, crossAxisAlignment. When verticalDirection is verticaldirection. up, crossAxisAlignment. Start indicates bottom alignment.
///Crossaxisalignment. end and crosSAXisalignment. start are the opposite;
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
///box
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 200,
height: 200, color: Colors.blue, ), ], )); }}Copy the codeElastic layout
An elastic layout allows child components to allocate parent container space proportionally. The elastic layout of the Flutter is implemented through Flex and Expanded.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Flex(
// The direction must be specified
direction: Axis.vertical,
children: [
Expanded(
/ / share
flex: 1,
child: Container(
color: Colors.red,
)),
// Use with Flex
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
)),
Expanded(
flex: 1, child: Container( color: Colors.yellow, )), ], )); }}Copy the codepositioning
Similar to the FrameLayout layout in Android, child components can position themselves based on the position of four corners from the parent container. The Flutter uses two components, Stack and jam, to provide absolute positioning. The Stack allows the suds to Stack, and the position of the suds is Positioned according to the four corners of the Stack.
Stack properties
alignmentThis parameter determines how to position the child which has no positioning (without using the toy) or partial positioning. The so-called partial positioning, here specifically refers to no positioning on a certain axis: left, right for the horizontal axis, top, bottom for the vertical axis, as long as it contains a positioning attribute on the axis even if there is positioning on the axis.textDirection:, like the textDirection function of Row and Wrap, is used to determine the reference frame of alignment, that is: LTR. The start and end alignments indicate the left and right respectively. TextDirection is textdirection. RTL. In this case, start indicates the right and end indicates the left.fit: This parameter determines how unpositioned child components fit into the Stack size. Loose indicates the size to use the child components, and stackfit. expand indicates the size to expand into the Stack.overflow: This property determines how to display child components that exceed the Stack display space; With overflow. clip, the excess is clipped (hidden), but not with overflow. visible.
Positioned properties
Left, top, right, and bottom indicate the distances from the left, top, right, and bottom edges of the Stack
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SizedBox(
width: 400,
height: 400,
child: Stack(
children: [
Positioned(
right: 50,
bottom: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
)),
Positioned(
left: 100,
top: 100,
child: Container(
width: 200,
height: 200, color: Colors.blue, )) ], ), )); }}Copy the codeFluid layout
When using Row and Colum, an overflow error is reported if the child widget is outside the screen. Flutter supports streaming layouts with Wrap and Flow, and overflows fold automatically.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Wrap(
// Horizontal spacing
spacing: 20.// Vertical spacing
runSpacing: 10.// Alignment
alignment: WrapAlignment.center,
children: [
Container(
width: 150,
height: 150,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.blue,
),
Container(
width: 150,
height: 150, color: Colors.yellow, ) ], )); }}Copy the codeSince Flow is troublesome to use, it is generally not used, so I will not introduce it