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 {@overrideWidget 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宽*widthFactorthis.heightFactor,//高度因子。子view的高度=父view高*heightFactorWidget child,})


例子

void main() => runApp(new MaterialApp(home: new MyApp()));class MyApp extends StatelessWidget {@overrideWidget 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 {@overrideWidget 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,),),),),);}
}