Flutter 垂直布局

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,)),//放大字号

修改后的示例代码如图所示:

酷客教程相关文章：

• Flutter 水平布局
• Flutter 对齐布局
• Flutter 填充布局
• Flutter 居中布局