Flutter 垂直布局(Column),垂直布局是一种常用的布局方式,我们主要使用Column
组件来完成对子组件纵向的排列。Column
组件常见属性如下所示:
对于Column
来说,垂直方向就是主轴,水平方向就是次轴,可以完全参照Web中的Flex布局,如图所示:
第一个垂直布局的示例代码如下:
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
title: '水平布局示例',
home: LayoutDemo(),
),
);
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('垂直布局示例一'),
),
// 垂直布局
body: Column(
children: <Widget>[
Text('Flutter'),
Text('垂直布局'),
// 添加图标
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
),
],
),
);
}
}
上述示例代码的视图展现大致如图所示:
若要增加水平方向靠左对齐,主轴方向最小化处理,其中最后一行文字字号专门放大,可以将第一个示例中Column里的内容换成如下代码:
// 水平方向靠左对齐
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Flutter是谷歌的移动UI框架'),
Text('可以快速在iOS和Android上构建高质量的原生用户界面'),
Text('Flutter可以与现有的代码一起工作。在全世界'),
Text('Flutter正在被越来越多的开发者和组织使用'),
Text('并且Flutter是完全免费、开源的。'),
Text('Flutter!', style: TextStyle(fontSize: 36.0,)),//放大字号
修改后的示例代码如图所示:
酷客教程相关文章:
评论前必须登录!
注册