如何垂直居中一段文本?
重要属性mainAxisAlignment
设置为MainAxisAlignment.center
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("标题"),
),
body: Container(
height: 50.0,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Hello World"),
],
),
),
);
}
}
MainAxisAlignment(主轴)和CrossAxisAlignment(交叉轴)常用于Row和Column控件中,主要是用来控制子控件排列的位置,并可以配合textDirection和verticalDirection属性来控制子控件排列的方向及改变MainAxisAlignment和CrossAxisAlignment的起始位置。
简单来说
MainAxisAlignment(主轴)就是与当前控件方向一致的轴,而CrossAxisAlignment(交叉轴)就是与当前控件方向垂直的轴
在水平方向控件中,例如Row
MainAxisAlignment是水平的,默认起始位置在左边,排列方向为从左至右,此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向
CrossAxisAlignment是垂直的,默认起始位置在中间,排列方向为从上至下,此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向
在垂直方向的控件中,例如Column
MainAxisAlignment是垂直的,默认起始位置在上边,排列方向为从上至下,此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
CrossAxisAlignment是水平的,默认起始位置在中间,此时可以通过textDirection来改变CrossAxisAlignment的起始位置
网友评论