[TOC] ## 概述 * [`AspectRatio`](https://api.flutter-io.cn/flutter/widgets/AspectRatio-class.html) * [`CustomSingleChildLayout`](https://api.flutter-io.cn/flutter/widgets/CustomSingleChildLayout-class.html) * [`CustomMultiChildLayout`](https://api.flutter-io.cn/flutter/widgets/CustomMultiChildLayout-class.html) * [`FittedBox`](https://api.flutter-io.cn/flutter/widgets/FittedBox-class.html) * [`FractionallySizedBox`](https://api.flutter-io.cn/flutter/widgets/FractionallySizedBox-class.html) * [`LayoutBuilder`](https://api.flutter-io.cn/flutter/widgets/LayoutBuilder-class.html) * [`MediaQuery`](https://api.flutter-io.cn/flutter/widgets/MediaQuery-class.html) * [`MediaQueryData`](https://api.flutter-io.cn/flutter/widgets/MediaQueryData-class.html) * [`OrientationBuilder`](https://api.flutter-io.cn/flutter/widgets/OrientationBuilder-class.html) ## FittedBox 一個box 放在另是個box上 時,設置如何顯示上面的box ``` Container( height: 400, width: 300, color: Colors.red, child: FittedBox( fit: BoxFit.fill, child: Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'), ), ); ``` > 說明:https://api.flutter-io.cn/flutter/painting/BoxFit.html ## ractionallySizedBox 用百分比的形式顯示元素 ``` Container( alignment: Alignment.center, child: FractionallySizedBox( widthFactor: 0.5,// 寬占50% heightFactor: 1, // 高占100% child: DecoratedBox( decoration: BoxDecoration( border: Border.all( color: Colors.blue, width: 4, ), ), ), ), ); } ```  > 教程 https://api.flutter-io.cn/flutter/widgets/FractionallySizedBox-class.html ## LayoutBuilder 根據不同的條件顯示不同的布局 ``` return Scaffold( appBar: AppBar(title: const Text('LayoutBuilder Example')), body: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { if (constraints.maxWidth > 600) { return _buildWideContainers(); } else { return _buildNormalContainer(); } }, ), ); ``` ## MediaQuery 查看尺寸 ``` Widget build(BuildContext context) { var size = MediaQuery.of(context).size; print(size); // Size(629.0, 681.0) ``` 檢查設備的方向 ``` var orientation = MediaQuery.of(context).orientation; print(orientation); // Orientation.portrait ``` 系統UI遮蓋的屏幕部門 ``` var padding = MediaQuery.of(context).padding; print(padding); // EdgeInsets.zero ```