Flutter布局：Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth

Baseline(基准线布局)

• Baseline基准线是指将所有的元素都统一的放在一条水平线上。
• Baseline是根据child的baseline定位的child的小部件，即使在不同的child都处在规定的基准线位置，特别是多用文字排版中的时候，就算是不同大小的文字处于同一水平线上。
  文字排版中的baseline
  

属性

• baseline基准线位置，是以像素为基本的单位
• baselineType 定位child的基准线类型，分为两种：alphabetic对齐字符底部的水平线，ideographic对齐表意字符的水平线

import 'package:flutter/material.dart';

void main() => runApp(
      new MaterialApp(home: new MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text(
              'AaBbCc',
              style: new TextStyle(
                fontSize: 18.0,
                textBaseline: TextBaseline.alphabetic,
              ),
            ),
          ),
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Container(
              width: 40.0,
              height: 40.0,
              color: Colors.green,
            ),
          ),
          new Baseline(
            baseline: 80.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text(
              'DdEeFf',
              style: new TextStyle(
                fontSize: 26.0,
                textBaseline: TextBaseline.alphabetic,
              ),
            ),
          )
        ],
      ),
    );
  }
}

FractionallySizedBox

FractionallySizedBox控件会根据现有空间，来调整child的尺寸，所以说child就算设置了具体的尺寸数值，也不起作用。

属性

const FractionallySizedBox({
    Key key,
    this.alignment = Alignment.center,//对齐方式
    this.widthFactor,//宽度因子。 子view的宽度=父view宽*widthFactor
    this.heightFactor,//高度因子。子view的高度=父view高*heightFactor
    Widget child,
  })

例子

void main() => runApp(new MaterialApp(home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: Center(
        child: FractionallySizedBox(
          widthFactor: 0.8,
          heightFactor: 0.8,
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

IntrinsicHeight（固定高度）

它将它的子元素的高度调整其本身实际的高度。
同下

IntrinsicWidth（固定宽度）

它将它的子元素的宽度调整其本身实际的宽度。

属性

const IntrinsicWidth({ 
		Key key, 
		this.stepWidth, 
		this.stepHeight, 
		Widget child 
})

当stepWidth不是null的时候，child的宽度将会是stepWidth的倍数，当stepWidth值比child最小宽度小的时候，这个值不起作用；
当stepWidth为null的时候，child的宽度是child的最小宽度；
当stepHeight不为null的时候，效果跟stepWidth相同；
当stepHeight为null的时候，高度取最大高度。

void main() => runApp(new MaterialApp(home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          child: IntrinsicWidth(
            child: Text(
              'color: IntrinsicHeight IntrinsicHeight IntrinsicHeight IntrinsicHeight',
              style: TextStyle(
                  fontSize: 28,
                  color: Colors.white,
                  backgroundColor: Colors.green),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}