flutter笔记（十二）Row & Column线性布局、Flex & Expanded弹性布局

flutter笔记汇总

Row & Column

这两个属性都一样，用法也一样，一个横向一个竖向，放一起，这里以Row为例。

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,  //对齐方式
    MainAxisSize mainAxisSize: MainAxisSize.max,    //主轴方向占用的空间
    CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,   //交叉轴上的对齐方式
    TextDirection textDirection,    //主轴方向上的排列顺序
    VerticalDirection verticalDirection: VerticalDirection.down,    交叉轴上排列的开始和结束
    TextBaseline textBaseline,  //文本基线
    List<>Widget children: const []     //子组件
})

mainAxisAlignment

子组件在主轴上的对齐方式。
MainAxisAlignment.start：正序
MainAxisAlignment.end：反序
MainAxisAlignment.center：居中
MainAxisAlignment.spaceAround：分散对齐，第一个组件和最后一个组件和父组件之间存在间距，为子组件之间间距的一半
MainAxisAlignment.spaceBetween：分散对齐，第一个和最后一个子组件和父组件之间没有间距
MainAxisAlignment.spaceEvenly：分散对齐，子组件以及父组件之间的间距相等

mainAxisSize

Row在主轴方向上所占用的空间，MainAxisSize.max在父组件内占用最大空间，MainAxisSize.min最小，占用空间为子组件撑开的大小。
前边两个属性看demo。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                width: 50,
                height: 100,
                color: Colors.green
              ),
              Container(
                width: 80,
                height: 50,
                color: Colors.red
              ),
              Container(
                  width: 50,
                  height: 50,
                  color: Colors.pinkAccent
              ),
              Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue
              ),
            ],
          )
        )
      )
    );
  }
}

crossAxisAlignment

自组件在交叉轴上的对齐方式。
CrossAxisAlignment.center：居中（默认）
CrossAxisAlignment.start：正序
CrossAxisAlignment.end：倒序
CrossAxisAlignment.center：子组件拉伸为父组件的高度
CrossAxisAlignment.baseline：基线对齐，要配合textBaseline同时使用

textDirection

TextDirection.ltr：从左到右（默认值）
TextDirection.ltr：从右到左

verticalDirection

交叉轴上排列的开始和结束，配合crossAxisAlignment使用。
VerticalDirection.up：竖直方向从下往上排列
VerticalDirection.down：竖直方向从上往下排列

textBaseline

文本基线，没看出来效果。

children

子组件。

Flex

Row和Column都是继承自Flex。

Flex({
    Key key,
    @required Axis direction,
    MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,  //对齐方式
    MainAxisSize mainAxisSize: MainAxisSize.max,    //主轴方向占用的空间
    CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,   //交叉轴上的对齐方式
    TextDirection textDirection,    //主轴方向上的排列顺序
    VerticalDirection verticalDirection: VerticalDirection.down,    交叉轴上排列的开始和结束
    TextBaseline textBaseline,  //文本基线
    List<>Widget children: const []     //子组件
})

Flex只多了一个direction属性。

direction

排列方式，两个值
Axis.horizontal：水平排列
Axis.vertical：竖直排列

Expanded

Expanded({
    Key key,
    int flex: 1,
    @required Widget child
})

这个很简单，只有一个flex和child。
Flex和Expanded与css里的display: flex、flex: 1效果是一样的，看一下demo。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: Container(
          child: Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  height: 50,
                  color: Colors.red
                )
              ),
              Expanded(
                flex: 2,
                child: Container(
                  height: 50,
                  color: Colors.blue
                )
              )
            ],
          )
        )
      )
    );
  }
}