flutter布局-垂直布局Column

Column組件即垂直布局控件，能夠將子組件垂直排列。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'flutter demo',
            home: Scaffold(
                appBar: new AppBar(
                    title: new Text('垂直布局Column'),
                ),
                body: new Column(
                    children: [
                        new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.red,
                            child: new Text('紅色按鈕'),
                        ),
                        new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.green,
                            child: new Text('綠色按鈕綠色按鈕'),
                        ),
                        new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.blue,
                            child: new Text('藍色按鈕'),
                        )
                    ]
                )
            )
        );
    }
}

 

默認是以最長的內容部分居中對齊的。如果想以左邊開始對齊，只需要副軸加入一個對齊屬性。

如何區分主軸和副軸：

mainAxisAlignment：主軸對齊屬性，如果是垂直布局Column，那垂直方向就是主軸，如果是水平布局Row，那水平方向就是主軸；

crossAxisAlignment：副軸對齊屬性，cross軸是和主軸垂直的方向。比如Row布局，垂直方向就是副軸，Column布局，水平方向就是副軸；

 屏幕內水平垂直方向居中：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'flutter demo',
            home: Scaffold(
                appBar: new AppBar(
                    title: new Text('垂直布局Column'),
                ),
                body: Center(
                    child: new Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                            new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.red,
                                child: new Text('紅色按鈕'),
                            ),
                            new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.green,
                                child: new Text('綠色按鈕綠色按鈕'),
                            ),
                            new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.blue,
                                child: new Text('藍色按鈕'),
                            )
                        ]
                    )
                ),
            )
        );
    }
}

靈活性：中間部分變大

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'flutter demo',
            home: Scaffold(
                appBar: new AppBar(
                    title: new Text('垂直布局Column'),
                ),
                body: Center(
                    child: new Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                            new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.red,
                                child: new Text('紅色按鈕'),
                            ),
                            Expanded(child: new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.green,
                                child: new Text('綠色按鈕綠色按鈕'),
                            )),
                            new RaisedButton(
                                onPressed: (){

                                },
                                color: Colors.blue,
                                child: new Text('藍色按鈕'),
                            )
                        ]
                    )
                ),
            )
        );
    }
}