Flutter学习第3章 垂直水平布局的Column使用

1、基本结构

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title: "flutter第三章学习",
      home:Scaffold(appBar: new AppBar(
        title: new Text('RowWidget组件学习')
      ),
      body: new Center(child:Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text('哈哈哈哈'),
          Expanded(child:new Text('哈哈哈哈哈哈哈哈')),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
        ],
      )
      )
      )
    );
  }
}

2、属性解释

1、new Column()基本意思就是进行垂直布局

new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text('哈哈哈哈'),
          Expanded(child:new Text('哈哈哈哈哈哈哈哈')),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
        ],
      )

（1）、CrossAxisAlignment 基于Column这个容器的对齐方式

• CrossAxisAlignment.center 居中对其（默认居中对齐）

• CrossAxisAlignment.start 居左对齐

• CrossAxisAlignment.end 居右对齐

效果：

（2）、 mainAxisAlignment 基于整个手机纵轴对齐

• MainAxisAlignment.center 纵轴居中

• MainAxisAlignment.center 纵轴居右

• MainAxisAlignment.center 纵轴居左

3、如果想要把整个内容都移到整个手机中间

代码如下：

//在Column外面套一层Center
  body: new Center(child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text('哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
        ],
      )
      )

效果如下

加上灵活水平布局

事先上下平分，中间留出来
代码如下：

 body: new Center(child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text('哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈'),
          Expanded(child:new Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈'),
          new Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
        ],
      )
      )

效果如下：可以看到一行以内有多少元素都已经平均分了，比较符合需求