2020/10/18 Flutter : crossAxisAlignment propertyの訳

Rowウィジェット、ColumnウィジェットのcrossAxisAlignmentプロパティを設定することで、cress axis方向に子ウィジェットをどのように配置するかを決定します。crossAxisAlignmentプロパティは5つの値をとります。

---

CrossAxisAlignment.start

cress axis方向のスタートに子ウィジェットを配置します。(Rowの場合上端、Columnの場合左端)

---

CrossAxisAlignment.end

cross axis方向の終わりに子ウィジェットを配置します。(Rowの場合下端、Columnの場合右端)

---

CrossAxisAlignment.center

cress axis方向の中央(センター)に子ウィジェットを配置します。

---

CrossAxisAlignment.stretch

cress axis方向に子ウィジェットを引き伸ばします。(Rowの場合上端から下端まで引き伸ばす、Columnの場合左端から右端まで引き伸ばす。)

---

CrossAxisAlignment.baseline

キャラクターベースラインに子ウィジェットを配置します。(Textクラスのみ、textBaselineプロパティをTextBaseline.alphabeticに設定している必要がある。)

---

sample1-1(CrossAxisAlignment.start)

//sample1-1
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,  //←ここを変更
      children: [
        GreenBox(),
        BiggerGreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

class BiggerGreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-1(CrossAxisAlignment.start)(result)

---

sample1-2(CrossAxisAlignment.end)

//sample1-2
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        GreenBox(),
        BiggerGreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

class BiggerGreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-2(CrossAxisAlignment.end)(result)

---

sample1-3(CrossAxisAlignment.center)

//sample1-3
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center, //←ここを変更
      children: [
        GreenBox(),
        BiggerGreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

class BiggerGreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-3(CrossAxisAlignment.center)(result)

---

sample1-4(CrossAxisAlignment.stretch)

//sample1-4
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch, //←ここを変更
      children: [
        GreenBox(),
        BiggerGreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

class BiggerGreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-4(CrossAxisAlignment.stretch)(result)

---

 

 

 

 

 

参考

https://flutter.dev/docs/codelabs/layout-basics

https://flutter.dev/docs/codelabs/layout-basics#crossaxisalignment-property