投稿日: 投稿者: userno2

2020/10/18 Flutter : Axis size and alignmentの訳

Contents

Axis size and alignment

これまでのところ、GreenBoxウィジェットは（UI出力の左側または上部に）一緒に押しつぶされています。 mainAxisSizeプロパティとalignmentプロパティを使用して、GreenBoxウィジェットの間隔を変更できます。

mainAxisSize property

RowとColumnは異なるmain axis(主軸)を使用します。

軸の方向が異なる、ということ。

Rowウィジェットのmain axesは水平方向です。

Columnウィジェットのmain axisは垂直方向です。

mainAxisSizeプロパティを設定することにより、main axis方向(主軸方向)でどれだけのスペースを使用するかを決定します。

mainAxisSizeプロパティは

MainAxisSize.max

MainAxisSize.min

の二つの値をとります。

MainAxesSize.max

RowとColumnはmain axis方向の、使用することができる全てのスペースを使用します。

子の合計幅が主軸の合計スペースよりも小さい場合、子は余分なスペースで配置されます。

MainAxisSize.min

工事中🏗

 

 

mainAxisAlignment property

mainAxisSizeがMainAxisSize.maxに設定されている場合、行と列は余分なスペースで子をレイアウトする可能性があります。

mainAxisAlignmentプロパティを設定することで、RowやColumnが、余分なスペースをどのように使用して子ウィジェットを配置するかを決定します。

mainAxisAlignmentプロパティは6つの値をとります。

MainAxisAlignment.start

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

MainAxisAlignment.end

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

MainAxisAlignment.center

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

MainAxisAlignment.spaceBetween

余分なスペースをそれぞれの子ウィジェットが均等に使用するように配置します。(「最初の子ウィジェットの前」と「最後の子ウィジェットの後ろ」は含まない。)

MainAxisAlignment.spaceEvenly

余分なスペースをそれぞれの子ウィジェットが均等に使用するように配置します。(「最初の子ウィジェットの前」と「最後の子ウィジェットの後ろ」を含む。)

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceEvenlyと似ていますが、最初の子ウィジェットの前」と「最後の子ウィジェットの後ろ」のスペースを、子ウィジェット間のスペースの半分にします。

sample1-1(MainAxisAlignment.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 Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-1(result)

sample1-2(MainAxisAlignment.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 Column(
      mainAxisAlignment: MainAxisAlignment.end,  //←ここを変更
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-2(result)

sample1-3(MainAxisAlignment.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 Column(
      mainAxisAlignment: MainAxisAlignment.center,  //←ここを変更
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-3(result)

sample1-4(MainAxisAlignment.spaceBetween)

//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 Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,  //←ここを変更
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-4(result)

sample1-5(MainAxisAlignment.spaceEvenly)

//sample1-5
//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 Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //←ここを変更
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-5(result)

sample1-6(MainAxisAlignment.spaceAround)

//sample1-6
//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 Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,  //←ここを変更
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

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

sample1-6(result)

 

 

参考

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

https://flutter.dev/docs/codelabs/layout-basics#axis-size-and-alignment

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です