前言:Column组件即垂直布局控件,能够将子组件垂直排列。其实前边学了Row组件就基本掌握了Column组件,里边的大部分属性都一样,我们还是以文字为例子,来看看Column布局。
一、Column基本用法
写一段代码,在column里加入三行文字,然后看一下效果。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
),
);
}
}
这时候你会发现文字是以最长的一段文字居中对齐的,看起来很别扭。那如果想让文字以左边开始对齐,只需要加入一个对齐属性。
左对齐只要在column组件下加入下面的代码,就可以让文字左对齐。
crossAxisAlignment: CrossAxisAlignment.start,
- CrossAxisAlignment.star:居左对齐。
- CrossAxisAlignment.end:居右对齐。
- CrossAxisAlignment.center:居中对齐。
二、主轴和副轴的辨识
在设置对齐方式的时候你会发现右mainAxisAlignment属性,意思就是主轴对齐方式,那什么是主轴,什么又是幅轴那。
-
main轴:如果你用column组件,那垂直就是主轴,如果你用Row组件,那水平就是主轴。
-
cross轴:cross轴我们称为幅轴,是和主轴垂直的方向。比如Row组件,那垂直就是幅轴,Column组件的幅轴就是水平方向的。
主轴和幅轴我们搞清楚,才能在实际工作中随心所欲的进行布局。
比如现在我们要把上面的代码,改成垂直方向居中。因为用的是Column组件,所以就是主轴方向,这时候你要用的就是主轴对齐了。
mainAxisAlignment: MainAxisAlignment.center,
现在全部的代码如下:
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
),
);
}
}
运行结果如下:
三、水平方向相对屏幕居中
让文字相对于水平方向居中,我们如何处理?其实只要加入Center组件就可以轻松解决。
其实在学习水平布局的时候我们对Expanded有了深刻的理解,它就是灵活布局。比如我们想让中间区域变大,而头部区域和底部根据文字所占空间进行显示。
import 'package:flutter/material.dart';
//主函数(入口函数)
void main() {
runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget:具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
//返回一个material风格的组件
return MaterialApp(
title: 'Welcome to Flutter',
//Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
home: Scaffold( //home : 应用默认所显示的界面 Widget
appBar: AppBar(
title: Text('垂直布局'),
),
body:new Column(
//crossAxisAlignment: CrossAxisAlignment.start,//水平方向左对齐
mainAxisAlignment: MainAxisAlignment.center,//垂直方向上居中对齐
children: <Widget>[
new Center(child:new Text('水平布局')),//让文字相对于水平方向居中
new Expanded(
child:new Center(
child: new Text('垂直布局居中对齐'),
),),
new Center(child:new Text('垂直布局'))
],
),
),
theme: new ThemeData(primaryColor: Colors.red), // 设置主题颜色
);
}
}
运行结果如下: