はじめに
Flutterのrowとcolumnの子要素の並び、つまりアライメントはMainAxisAlignmentとCrossAxisAlignmentにて変更できるようになっています。これらの動作ですがわりと忘れてしまうのでチートシートという形でまとめておきたいと思います。
MainAxisAligment
MainAxisAligment では次の種別でアライメントを変更できる。
Row
スクリーンショット
ソースコード
class _HomePageState_ForRowMainAxis
extends State<HomePage> {
@override
Widget build(BuildContext context) {
var style = TextStyle(fontSize: 15);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('start1', style: style)),
Container(
color: Colors.blue,
child: Text('start2', style: style)),
Container(
color: Colors.blue,
child: Text('start3', style: style)),
]),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('center1', style: style)),
Container(
color: Colors.blue,
child: Text('center2', style: style)),
Container(
color: Colors.blue,
child: Text('center3', style: style)),
]),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('end1', style: style)),
Container(
color: Colors.blue,
child: Text('end2', style: style)),
Container(
color: Colors.blue,
child: Text('end2', style: style)),
]),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceAround1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceAround2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceAround3',
style: style)),
]),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceBetween1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceBetween2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceBetween3',
style: style)),
]),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceEvenly1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceEvenly2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceEvenly3',
style: style)),
]),
],
),
),
);
}
}Column
スクリーンショット
ソースコード
class _HomePageState_ForColumnMainAxis
extends State<HomePage> {
@override
Widget build(BuildContext context) {
var style = TextStyle(fontSize: 15);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('start1', style: style)),
Container(
color: Colors.blue,
child: Text('start2', style: style)),
Container(
color: Colors.blue,
child: Text('start3', style: style)),
]),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('center1', style: style)),
Container(
color: Colors.blue,
child: Text('center2', style: style)),
Container(
color: Colors.blue,
child: Text('center3', style: style)),
]),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('end1', style: style)),
Container(
color: Colors.blue,
child: Text('end2', style: style)),
Container(
color: Colors.blue,
child: Text('end2', style: style)),
]),
Column(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceAround1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceAround2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceAround3',
style: style)),
]),
Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceBetween1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceBetween2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceBetween3',
style: style)),
]),
Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('spaceEvenly1',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceEvenly2',
style: style)),
Container(
color: Colors.blue,
child: Text('spaceEvenly3',
style: style)),
]),
],
),
),
);
}
}CrossAxisAlignment
CrossAxisAlignment では次の種別でアライメントを変更できる。
Row
スクリーンショット
ソースコード
class _HomePageState_ForRowCrossAxis
extends State<HomePage> {
@override
Widget build(BuildContext context) {
var s = TextStyle(fontSize: 15);
var m = TextStyle(fontSize: 20);
var l = TextStyle(fontSize: 40);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('center1', style: s)),
Container(
color: Colors.blue,
child: Text('center2', style: m)),
Container(
color: Colors.blue,
child: Text('center3', style: l)),
]),
flex: 1,
),
Expanded(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('start1', style: s)),
Container(
color: Colors.blue,
child: Text('start2', style: m)),
Container(
color: Colors.blue,
child: Text('start3', style: l)),
]),
flex: 1,
),
Expanded(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('end1', style: s)),
Container(
color: Colors.blue,
child: Text('end2', style: m)),
Container(
color: Colors.blue,
child: Text('end3', style: l)),
]),
flex: 1,
),
Expanded(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('stretch1', style: s)),
Container(
color: Colors.blue,
child: Text('stretch2', style: m)),
Container(
color: Colors.blue,
child: Text('stretch3', style: l)),
]),
flex: 1,
),
Expanded(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('baseline1', style: s)),
Container(
color: Colors.blue,
child: Text('baseline2', style: m)),
Container(
color: Colors.blue,
child: Text('baseline3', style: l)),
]),
flex: 1,
),
],
),
),
);
}
}Column
スクリーンショット
ソースコード
class _HomePageState_ForColumnCrossAxis
extends State<HomePage> {
@override
Widget build(BuildContext context) {
var s = TextStyle(fontSize: 15);
var m = TextStyle(fontSize: 20);
var l = TextStyle(fontSize: 40);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('center1', style: s)),
Container(
color: Colors.blue,
child: Text('center2', style: m)),
Container(
color: Colors.blue,
child: Text('center3', style: l)),
]),
flex: 1,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('start1', style: s)),
Container(
color: Colors.blue,
child: Text('start2', style: m)),
Container(
color: Colors.blue,
child: Text('start3', style: l)),
]),
flex: 1,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('end1', style: s)),
Container(
color: Colors.blue,
child: Text('end2', style: m)),
Container(
color: Colors.blue,
child: Text('end3', style: l)),
]),
flex: 1,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('stretch1', style: s)),
Container(
color: Colors.blue,
child: Text('stretch2', style: m)),
Container(
color: Colors.blue,
child: Text('stretch3', style: l)),
]),
flex: 1,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Container(
color: Colors.blue,
child: Text('baseline1', style: s)),
Container(
color: Colors.blue,
child: Text('baseline2', style: m)),
Container(
color: Colors.blue,
child: Text('baseline3', style: l)),
]),
flex: 1,
),
],
),
),
);
}
}おわりに
初めてFlutterを触ると、Axisに関してしっくりこない感じがありました。ですがこのようにしっかり噛み砕いて理解すればものすごくわかりやすいですね。
