Flutter——AspectRatio組件

AspectRatio 的作用是根據設置調整子元素 child 的寬高比。

AspectRatio 首先會在布局限制條件允許的范圍內盡可能的擴展，widget 的高度是由寬度和比率決定的，類似於 BoxFit 中的 contain，按照固定比率去盡量占滿區域。

如果在滿足所有限制條件過后無法找到一個可行的尺寸，AspectRatio 最終將會去優先適應布局限制條件，而忽略所設置的比率。

 

AspectRatio組件常用的屬性：

屬性	說明
aspectRatio	寬高比，最終可能不會根據這個值去布局，具體則要看綜合因素，外層是否允許按照這種比率進行布局，這只是一個參考值。
child	子組件

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "AspectRatioWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        color: Colors.redAccent,
        child: AspectRatio(
          aspectRatio: 2.0/1.0,
          child: Container(
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}