Understanding of mainAxisAlignment and crossAxisAlignment in flutter

When I first started learning Flutter, I was confused about the two attributes mainAxisAlignment (main axis) and crossAxisAlignment (cross axis). Let’s record how to distinguish them.

The code for this learning class is as follows:

import 'package:flutter/material.dart';

class ChoicePicture2 extends StatefulWidget {
const ChoicePicture2({Key? key}) : super(key: key);

@override
_PictureState createState() {
return _PictureState();
}
}

class _PictureState extends State<ChoicePicture2> {
@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(" Image selection "),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
actions: [
IconButton(
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text(" Personal profile picture button clicked "));
},
icon: const Icon(Icons.account_circle)),
IconButton(
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text(" Set button clicked "));
},
icon: const Icon(Icons.settings))
].
),
body: Container(
// Container that can set multiple properties such as width, height and background color
width: MediaQuery.of(context).size.width, // Screen width
color: Colors.pink,
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Add button ",
style: TextStyle(backgroundColor: Colors.blue),
),
Container(
height: 70,
color: Colors.red,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.add),
iconSize: 50,
),
),
const Text(
"Set button ",
style: TextStyle(backgroundColor: Colors.blue),
),
Container(
height: 70,
color: Colors.red,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.settings),
iconSize: 50,
),
),
const Text(
"Print Button ",
style: TextStyle(backgroundColor: Colors.blue),
),
Container(
height: 70,
color: Colors.red,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.print),
iconSize: 50,
),
),
].
),
));
}
}

The main code involved in this study is the body under Scaffold in the build under the _PictureState class. The main modifications are Column and Row, as well as the following two attributes mainAxisAlignment and crossAxisAlignment.

Okay, without further ado, let’s go straight to the picture.

1. Use Column

By default it is as shown below.

It can be seen that the default sub-controls are all based onCenter horizontally, top verticallydisplayed in arrangement.

Next, we only care about MainAxisAlignment (main axis), regardless of CrossAxisAlignment (cross axis), that is to say, keep it horizontally centered in the horizontal direction, and only look at the vertical direction.

1. mainAxisAlignment: MainAxisAlignment.start is this mode by default, that isvertical top

2、mainAxisAlignment:MainAxisAlignment.center Center vertically

3、mainAxisAlignment:MainAxisAlignment.end vertical bottom

4、mainAxisAlignment:MainAxisAlignment. spaceEvenly Distribution of sub-controls at the same intervals in the vertical direction

5、mainAxisAlignment:MainAxisAlignment.spaceBetween There is no gap between the first and last sub-controls in the vertical directionChild controls are equally spaced 。

 

6、mainAxisAlignment:MainAxisAlignment.spaceAround The distance from the first sub-control to the top in the vertical direction is evenly distributed by half the distance between other sub-controls.

 

 Next, CrossAxisAlignment is added under the above premise of 1–6, which corresponds to the above 1–6 respectively.

1-1. crossAxisAlignment:CrossAxisAlignment.start Based on the above 1,horizontal top

2-2. crossAxisAlignment: CrossAxisAlignment.center Based on the above 2,Center horizontally

I found that this has the same effect as the above 2, because the crossAxisAlignment is not specified in the above 2, and the default is horizontal centering.

3-3. crossAxisAlignment:CrossAxisAlignment.end Based on the above 3,horizontal bottom

The other two stretch (the child control on the cross axis is filled) and baseline (the child control is on the cross axis and matches the baseline)

Based on the above 4, the crossAxisAlignment:CrossAxisAlignment.stretch rendering is as follows:

To be honest, I didn’t find any use for stretch and baseline, so I’ll record them here first.

2. Use Row

At this time, MainAxisAlignment refers to the horizontal direction, and CrossAxisAlignment refers to the vertical direction.

Summarize:

Column: MainAxisAlignment represents the vertical direction, and crossAxisAlignment represents the horizontal direction.

Row: MainAxisAlignment represents the horizontal direction, and crossAxisAlignment represents the vertical direction.

Related Posts

Kotlin learning path (2): control flow

Flutter Scheme is used (share the link on WeChat and open the App in the browser to jump to a specific page: such as details and event pages)

The uniapp copy function cannot be copied by ios, h5, or some browsers.

iOS hot reload (storyboard/xib control visual development)

[Solved] Direct local .aar file dependencies are not supported when building an AAR. Gradle upgrade to version 4.0 and above

Overwriting the repositories warehouse address in gradle in Flutter and Android

ciscoAP configuration

Android set background color transparency

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*