Flutter 基础布局Widgets之Baseline、AspectRatio详解

baseline即根据child的baseline定位child的小部件，即使得不同的child都处在规定的基线位置，尤其是多用在文字排版中，比如使得不同大小的文字处于同一水平线。

 const baseline({
    Key key,
    @required this.baseline,
    @required this.baselineType,
    Widget child
  })

• baseline 基准线位置，像素为基本单位
• baselineType 定位child的基线类型，分为两种：alphabetic -用于对齐字母字符的字形底部的水平线；ideographic-用来对齐表意文字的水平线

// baseline

import 'package:flutter/material.dart';

class baselineLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('baseline')
      ),
      // 根据子元素的基线定位子元素的小部件，即使得不同的child都处在规定的基线位置，尤其是多用在文字排版中，比如使得不同大小的文字处于同一水平线
      body: new Row(
 children: [
   baseline(
     baseline: 100,
     // 对齐的对象类型
     baselineType: Textbaseline.alphabetic,
     child: Text('hello', 
style: TextStyle(
  fontSize: 20,
),
     )
   ),
   baseline(
     baseline: 100,
     baselineType: Textbaseline.alphabetic,
     child: Text('world',
style: TextStyle(fontSize: 40),
     )
   ),
 ],
      )
    );
  }
}

AspectRatio即用于设置特定长宽比的组件，主要参数aspectRatio用于设置要是使用的长宽比，使用较简单。

const AspectRatio({
    Key key,
    @required this.aspectRatio,
    Widget child
  })

• aspectRatio 设置要是使用的长宽比，长宽比表示为宽高比。比如16:9宽高比的值为16.0/9.0

//  AspectRatio

import 'package:flutter/material.dart';

class AspectRatioLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('AspectRatio')
      ),
      body: Center(
 child: Container(
   width: 300,
   decoration: BoxDecoration(
     border: Border.all(),
   ),
   // 创建具有特定长宽比的小部件。
   child: AspectRatio(
     // 一个比例为 18:9 的“全面屏”比例
     aspectRatio: 9.0/18.0,
     child: Container(
color: Colors.blueAccent,
     )
   ),
      ),
      )
    );
  }
}