可容纳一个子组件,通过指定宽高比aspectRatio,来限定子组件容身区域。

相关组件

FractionallySizedBox

AspectRatio基本使用

  1. <br />【child】 : 孩子组件 【Widget】<br />【aspectRatio】 : 宽高比例 【double】<br />![188.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589507865865-db388e38-a464-480a-9d51-5193977a52e5.gif#align=left&display=inline&height=202&margin=%5Bobject%20Object%5D&name=188.gif&originHeight=202&originWidth=397&size=332537&status=done&style=none&width=397)
import 'package:flutter/material.dart';
class CustomAspectRatio extends StatefulWidget {
  @override
  _CustomAspectRatioState createState() => _CustomAspectRatioState();
}

class _CustomAspectRatioState extends State<CustomAspectRatio> {
  var _ratio = 0.75;

  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 50,
      height: 50,
      child: Text("Static"),
    );

    var box = AspectRatio(
      aspectRatio: _ratio,
      child: Container(
          color: Colors.orange,
          child: Icon(
            Icons.android,
            color: Colors.white,
          )),
    );

    return Column(
      children: <Widget>[
        _buildSlider(),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: Row(
            children: <Widget>[child, box, child],
          ),
        ),
      ],
    );
  }

  Widget _buildSlider() => Slider(
      divisions: 20,
      min: 0.1,
      max: 2.0,
      label: _ratio.toStringAsFixed(2),
      value: _ratio,
      onChanged: (v) => setState(() => _ratio = v));
}