Flutter ②《线性布局-Column》

垂直布局：Column

在之前的开发中我们用的最多的或许是Linearlayout ,而Flutter中 垂直的线性布局是。
Column：是一个能将子Widgets组 垂直排列的组件。
注意：Column 是不可滑动的组件，如果想要一组组件可以滑动那么就要使用ListView。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
          appBar: AppBar(
            title: Text("HelloWord"),
          ),
          body: Column(
            children: <Widget>[
              Text('我是个简单文本'),
              Text('就问你厉不厉害'),
              Expanded(
                child: FittedBox(
                  fit: BoxFit.none, // otherwise the logo will be tiny
                  child: const FlutterLogo(),
                ),
              ),
            ],
          )),
    );
  }
}

这里我们直接将body节点对应的组件替换成Column即可，Column 中children对应的是一个组件集合“ <Widget>[]”

如果要修改子布局的间距等属性可以用Expanded组件
如果子布局仅有一个可以用Align和Center组件调整位置
跟LinearLayout类似，我们也可以为Column 加一些属性组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
          appBar: AppBar(
            title: Text("HelloWord"),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Text('我是个简单文本'),
              Text('我是个简单文本'),
              Text('我是个简单文本'),
              Text('我是个简单文本'),
              Text('我是个简单文本'),
              Text('我是个简单文本'),
              Text('我是个简单文本'),
            ],
          )),
    );
  }
}

这里面的几个属性值我们后面遇到还会讲。
运行效果：

Screenshot_1563521481.png