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,
            ),
          ),
        ),
      ),
    );
  }
}
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页