案例概述

本案例展示 AspectRatio 组件的用法，它用于强制子组件保持特定的宽高比。这对于视频、图片、卡片等需要固定宽高比的内容尤为重要。

核心概念

1. AspectRatio 的作用

AspectRatio 会根据父容器的宽度，自动计算高度，使子组件保持指定的宽高比：

• 宽高比 = 宽度 / 高度；
• 例如 16:9 的宽高比 = 16/9 ≈ 1.78。

2. 常见的宽高比

用途	宽高比	说明
视频	16:9	标准视频格式
电影	21:9	超宽电影格式
正方形	1:1	社交媒体头像、卡片
竖图	2:3	手机竖屏图片
横图	3:2	常见照片比例

代码详解

1. 16:9 视频比例

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    color: Colors.black87,
    child: const Center(child: Text('16:9 视频')),
  ),
)

说明：

• 无论父容器多宽，子容器始终保持 16:9 比例；
• 常用于视频播放器、YouTube 视频卡片等。

2. 1:1 正方形

AspectRatio(
  aspectRatio: 1,
  child: Container(
    color: Colors.blue.shade100,
    child: const Center(child: Text('1:1 正方形')),
  ),
)

说明：

• 宽度和高度始终相等；
• 常用于头像、应用图标、社交媒体卡片。

3. 网格中的宽高比

GridView.count(
  crossAxisCount: 2,
  childAspectRatio: 1.5,
  children: List.generate(4, (index) {
    return Container(
      color: Colors.purple.shade100,
      child: Center(child: Text('卡片 ${index + 1}')),
    );
  }),
)

说明：

• GridView 的 childAspectRatio 参数控制每个卡片的宽高比；
• 2 列网格，每个卡片宽高比 1.5:1（宽度是高度的 1.5 倍）。

深入理解：宽高比在响应式设计中的重要性

1. 为什么需要宽高比？

在响应式设计中，屏幕宽度不固定，但某些内容需要保持特定的宽高比：

• 视频：16:9 或 21:9，改变宽度时高度也要相应改变；
• 图片：不同的图片有不同的宽高比，需要保持原始比例；
• 卡片：设计上需要特定的宽高比，保证视觉一致性。

如果不使用 AspectRatio，需要手动计算高度，容易出错且不够灵活。

2. AspectRatio 的计算原理

AspectRatio 的工作流程：

1. 获取父容器的宽度；
2. 根据宽高比计算高度：高度 = 宽度 / 宽高比；
3. 将子组件限制在计算出的尺寸内。

例如，如果父容器宽度 300px，宽高比 16:9：

• 高度 = 300 / (16/9) = 300 × 9/16 ≈ 169px。

3. AspectRatio vs SizedBox

• AspectRatio：根据宽度自动计算高度，保持宽高比；
• SizedBox：固定宽度和高度，不考虑宽高比。

选择原则：

• 需要保持宽高比 → 用 AspectRatio；
• 需要固定尺寸 → 用 SizedBox。

4. AspectRatio 在不同场景中的应用

• 视频播放器：16:9 或 21:9 宽高比，自适应屏幕宽度；
• 图片库：保持图片原始宽高比，避免变形；
• 网格卡片：在 GridView 中使用 childAspectRatio 控制卡片比例；
• 响应式设计：在不同屏幕宽度上保持一致的视觉效果；
• 社交媒体：头像、封面图等需要特定宽高比。

5. AspectRatio 的性能考量

AspectRatio 本身性能开销很小，但需要注意：

• 避免嵌套过多：不要在多个层级都使用 AspectRatio；
• 合理的宽高比：避免极端的宽高比（如 100:1）；
• 结合其他布局：与 GridView、ListView、Row、Column 等配合使用。

6. 常见的宽高比陷阱

• 忘记计算宽高比：16:9 应该写成 16/9，不是 16:9；
• 宽高比倒反：应该是 宽度/高度，不是 高度/宽度；
• 在固定尺寸容器中使用：如果父容器高度固定，AspectRatio 可能无法正常工作。

通过正确使用 AspectRatio，你可以构建出在各种屏幕宽度上都保持一致宽高比的响应式布局。

高级话题：AspectRatio 的高级应用

1. 常见宽高比的快速参考

// 视频比例
const videoRatio = 16 / 9;        // 标准视频
const cinemaRatio = 21 / 9;       // 电影宽屏
const mobileVideoRatio = 9 / 16;  // 竖屏视频

// 图片比例
const squareRatio = 1;            // 正方形
const portraitRatio = 2 / 3;      // 竖图
const landscapeRatio = 3 / 2;     // 横图
const wideRatio = 4 / 3;          // 宽屏

// 社交媒体
const instagramRatio = 1;         // Instagram 头像
const twitterRatio = 16 / 9;      // Twitter 卡片
const facebookRatio = 1.91 / 1;   // Facebook 图片

2. 动态宽高比

根据条件改变宽高比：

AspectRatio(
  aspectRatio: isPortrait ? 9 / 16 : 16 / 9,
  child: Container(color: Colors.blue),
)

3. AspectRatio 与 Image 的完美结合

AspectRatio(
  aspectRatio: 16 / 9,
  child: Image.network(
    url,
    fit: BoxFit.cover,
    errorBuilder: (context, error, stackTrace) {
      return Container(
        color: Colors.grey.shade300,
        child: Icon(Icons.error),
      );
    },
  ),
)

4. AspectRatio 与 Video 播放器

AspectRatio(
  aspectRatio: 16 / 9,
  child: VideoPlayer(controller),
)

5. 嵌套 AspectRatio

在复杂布局中嵌套使用：

Column(
  children: [
    AspectRatio(
      aspectRatio: 16 / 9,
      child: Image.network(url),
    ),
    Expanded(
      child: Column(
        children: [
          Text('标题'),
          Text('描述'),
        ],
      ),
    ),
  ],
)

6. AspectRatio 与 GridView 的高级用法

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 1.5,  // 宽高比 1.5:1
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return AspectRatio(
      aspectRatio: 1.5,
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('Item $index')),
      ),
    );
  },
)

7. 响应式宽高比

根据屏幕宽度改变宽高比：

final aspectRatio = MediaQuery.of(context).size.width < 600 
  ? 1  // 手机上显示正方形
  : 16 / 9;  // PC 上显示宽屏

AspectRatio(
  aspectRatio: aspectRatio,
  child: Container(color: Colors.blue),
)

8. AspectRatio 与 Stack 的结合

在 Stack 中使用 AspectRatio 创建固定比例的覆盖层：

Stack(
  children: [
    AspectRatio(
      aspectRatio: 16 / 9,
      child: Image.network(url),
    ),
    AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(
        color: Colors.black.withOpacity(0.3),
        child: Center(child: Icon(Icons.play_arrow)),
      ),
    ),
  ],
)

9. 计算正确的宽高比

// 从图片尺寸计算宽高比
double calculateAspectRatio(int imageWidth, int imageHeight) {
  return imageWidth / imageHeight;
}

// 使用
final ratio = calculateAspectRatio(1920, 1080);  // 16/9
AspectRatio(
  aspectRatio: ratio,
  child: Image.network(url),
)

10. AspectRatio 与 Flexible 的结合

Row(
  children: [
    Flexible(
      child: AspectRatio(
        aspectRatio: 1,
        child: Container(color: Colors.blue),
      ),
    ),
    SizedBox(width: 16),
    Flexible(
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(color: Colors.green),
      ),
    ),
  ],
)

11. 性能优化：缓存宽高比

class CachedAspectRatio extends StatelessWidget {
  final double aspectRatio;
  final Widget child;
  
  const CachedAspectRatio({
    required this.aspectRatio,
    required this.child,
  });
  
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: aspectRatio,
      child: child,
    );
  }
}

12. 实战案例：响应式卡片网格

class ResponsiveCardGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final crossAxisCount = width < 600 ? 2 : (width < 1200 ? 3 : 4);
    final aspectRatio = width < 600 ? 1 : 1.2;
    
    return GridView.count(
      crossAxisCount: crossAxisCount,
      childAspectRatio: aspectRatio,
      children: List.generate(12, (index) {
        return Card(
          child: AspectRatio(
            aspectRatio: aspectRatio,
            child: Container(
              color: Colors.blue.shade100,
              child: Center(child: Text('Card $index')),
            ),
          ),
        );
      }),
    );
  }
}

13. AspectRatio 的常见陷阱

// 陷阱1：宽高比倒反
AspectRatio(
  aspectRatio: 9 / 16,  // 错误：应该是 16 / 9
  child: Container(),
)

// 陷阱2：在无限高度容器中使用
Column(
  children: [
    AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(),  // 错误：Column 高度不确定
    ),
  ],
)

// 解决：为 Column 指定高度
SizedBox(
  height: 300,
  child: Column(
    children: [
      AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(),  // 正确
      ),
    ],
  ),
)

14. 调试 AspectRatio

// 打印实际尺寸
AspectRatio(
  aspectRatio: 16 / 9,
  child: LayoutBuilder(
    builder: (context, constraints) {
      debugPrint('Width: ${constraints.maxWidth}, Height: ${constraints.maxHeight}');
      return Container(color: Colors.blue);
    },
  ),
)

通过掌握这些高级技巧，你可以在各种复杂场景中灵活使用 AspectRatio，构建出完美的响应式布局。