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

Baseline概述

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

Baseline构造函数

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

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

Baseline示例代码

// 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: <Widget>[
          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),
            )
          ),
        ],
      )
    );
  }
}

Baseline示例效果

AspectRatio概述

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

AspectRatio构造函数

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

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

AspectRatio示例代码

//  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,
            )
          ),
      ),
      )
    );
  }
}

AspectRatio示例效果