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('蓝色按钮'),
                            )
                        ]
                    )
                ),
            )
        );
    }
}