基础入门 Flutter for OpenHarmony：AspectRatio 宽高比组件详解

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
🎯 欢迎来到 Flutter for OpenHarmony 社区！本文将深入讲解 Flutter 中 AspectRatio 宽高比组件的使用方法，带你从基础到精通，掌握这一重要的布局组件。

---

一、AspectRatio 组件概述

在用户界面设计中，保持组件的宽高比是非常重要的需求。无论是图片展示、视频播放器还是卡片布局，都需要确保组件始终保持特定的宽高比例。Flutter 提供了 AspectRatio 组件，让开发者能够轻松控制子组件的宽高比。

📋 AspectRatio 组件特点

特点	说明
自动计算尺寸	根据父容器约束自动计算宽高
保持比例不变	无论容器大小如何变化，比例始终不变
灵活的约束处理	能够处理各种约束情况
嵌套支持	可以与其他布局组件嵌套使用

什么是宽高比？

宽高比（Aspect Ratio）是指组件宽度与高度的比例关系。常见的宽高比包括：

1. 16:9：标准高清视频比例，广泛用于视频和现代显示器
2. 4:3：传统电视屏幕比例，经典的照片比例
3. 1:1：正方形比例，常用于头像和社交媒体
4. 3:2：摄影常用比例，35mm 胶片的标准比例
5. 4:5：竖向照片比例，Instagram 竖向帖子常用

为什么需要 AspectRatio？

在某些场景下，我们需要组件保持特定的宽高比：

• 图片展示：确保图片不被拉伸变形
• 视频播放器：保持视频的原始比例
• 卡片布局：创建统一比例的卡片
• 响应式设计：适配不同屏幕尺寸

💡 使用场景：AspectRatio 广泛应用于图片卡片、视频播放器、轮播图、网格图片等需要保持固定宽高比的场景。

---

二、AspectRatio 基础用法

AspectRatio 的使用非常简单，只需要提供 aspectRatio 参数和子组件。让我们从最基础的用法开始学习。

2.1 最简单的 AspectRatio

最基础的 AspectRatio 只需要设置 aspectRatio 参数和 child 子组件：

AspectRatio(
  aspectRatio: 16 / 9,  // 宽高比为 16:9
  child: Container(
    color: Colors.blue,
    child: const Center(child: Text('16:9')),
  ),
)

代码解析：

• aspectRatio: 16 / 9：设置宽高比为 16:9
• child：要应用宽高比的子组件
• 子组件会自动按照 16:9 的比例调整大小

2.2 aspectRatio 参数详解

aspectRatio 参数是一个 double 值，表示宽度与高度的比例：

aspectRatio: 16 / 9   // 约等于 1.78，标准高清
aspectRatio: 4 / 3    // 约等于 1.33，传统比例
aspectRatio: 1        // 正方形
aspectRatio: 3 / 4    // 约等于 0.75，竖向照片

常见宽高比值：

比例	数值	说明
16 / 9	1.78	标准高清视频
4 / 3	1.33	传统电视/照片
1 / 1	1.00	正方形
3 / 2	1.50	摄影常用
4 / 5	0.80	竖向照片
21 / 9	2.33	超宽屏

2.3 计算规则

AspectRatio 的计算规则如下：

1. 如果父容器提供了有限宽度，AspectRatio 会根据比例计算高度
2. 如果父容器提供了有限高度，AspectRatio 会根据比例计算宽度
3. 如果两者都有限，AspectRatio 会选择较小的尺寸来保持比例

2.4 完整示例

下面是一个完整的可运行示例，展示了 AspectRatio 的基础用法：

class AspectRatioBasicExample extends StatelessWidget {
  const AspectRatioBasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AspectRatio 基础示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const Text('16:9 视频比例：'),
            const SizedBox(height: 8),
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Container(
                color: Colors.blue[300],
                child: const Center(child: Text('16:9')),
              ),
            ),
            const SizedBox(height: 24),
            const Text('1:1 正方形：'),
            const SizedBox(height: 8),
            AspectRatio(
              aspectRatio: 1,
              child: Container(
                color: Colors.green[300],
                child: const Center(child: Text('1:1')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

三、常见宽高比应用

AspectRatio 支持各种常见的宽高比，让我们看看它们的具体应用。

3.1 视频比例

视频播放器通常需要保持特定的宽高比：

// 16:9 标准高清
AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    color: Colors.blue[900],
    child: const Center(
      child: Icon(Icons.play_circle, size: 64, color: Colors.white),
    ),
  ),
)

// 4:3 传统比例
AspectRatio(
  aspectRatio: 4 / 3,
  child: Container(color: Colors.green),
)

// 21:9 超宽屏
AspectRatio(
  aspectRatio: 21 / 9,
  child: Container(color: Colors.purple),
)

3.2 图片比例

图片展示需要保持原始比例：

// 1:1 正方形
AspectRatio(
  aspectRatio: 1,
  child: Container(color: Colors.orange),
)

// 3:2 摄影常用
AspectRatio(
  aspectRatio: 3 / 2,
  child: Container(color: Colors.teal),
)

// 4:5 竖向照片
AspectRatio(
  aspectRatio: 4 / 5,
  child: Container(color: Colors.pink),
)

3.3 社交媒体比例

不同社交媒体平台有各自推荐的宽高比：

// Instagram 正方形帖子
AspectRatio(
  aspectRatio: 1,
  child: Container(color: Colors.purple[300]),
)

// Instagram 竖向帖子
AspectRatio(
  aspectRatio: 4 / 5,
  child: Container(color: Colors.pink[300]),
)

// YouTube 缩略图
AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.red[300]),
)

---

四、AspectRatio 实际应用场景

AspectRatio 在实际开发中有着广泛的应用，让我们通过具体示例来学习。

4.1 图片卡片

使用 AspectRatio 创建固定比例的图片卡片：

class ImageCardExample extends StatelessWidget {
  const ImageCardExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片卡片示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Container(
                  color: Colors.blue[100],
                  child: const Center(
                    child: Icon(Icons.image, size: 48, color: Colors.blue),
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '图片卡片标题',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8),
                    Text(
                      '这是卡片的描述内容，展示了如何使用 AspectRatio 创建固定比例的图片卡片。',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4.2 视频播放器

使用 AspectRatio 创建视频播放器占位：

class VideoPlayerExample extends StatelessWidget {
  const VideoPlayerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('视频播放器示例')),
      body: Column(
        children: [
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Container(
              color: Colors.black,
              child: const Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.play_circle, size: 64, color: Colors.white),
                    SizedBox(height: 8),
                    Text(
                      '点击播放',
                      style: TextStyle(color: Colors.white70),
                    ),
                  ],
                ),
              ),
            ),
          ),
          const Expanded(
            child: Center(child: Text('视频列表或相关信息')),
          ),
        ],
      ),
    );
  }
}

4.3 网格图片

使用 AspectRatio 创建网格图片布局：

class GridImageExample extends StatelessWidget {
  const GridImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网格图片示例')),
      body: Padding(
        padding: const EdgeInsets.all(8),
        child: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          children: List.generate(9, (index) {
            return AspectRatio(
              aspectRatio: 1,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.primaries[index % Colors.primaries.length][200],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Center(child: Text('${index + 1}')),
              ),
            );
          }),
        ),
      ),
    );
  }
}

4.4 轮播图

使用 AspectRatio 创建轮播图：

class CarouselExample extends StatelessWidget {
  const CarouselExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('轮播图示例')),
      body: SizedBox(
        height: 200,
        child: PageView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 4),
              child: AspectRatio(
                aspectRatio: 16 / 9,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.primaries[index % Colors.primaries.length][300],
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(
                    child: Text(
                      '轮播 ${index + 1}',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

4.5 头像占位

使用 AspectRatio 创建圆形头像占位：

class AvatarPlaceholderExample extends StatelessWidget {
  const AvatarPlaceholderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('头像占位示例')),
      body: Center(
        child: SizedBox(
          width: 120,
          child: AspectRatio(
            aspectRatio: 1,
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.grey[300],
              ),
              child: const Icon(Icons.person, size: 48, color: Colors.grey),
            ),
          ),
        ),
      ),
    );
  }
}

---

五、AspectRatio 与其他组件结合

AspectRatio 可以与其他组件结合使用，实现更复杂的布局效果。

5.1 与 Card 结合

Card(
  clipBehavior: Clip.antiAlias,
  child: AspectRatio(
    aspectRatio: 16 / 9,
    child: Stack(
      fit: StackFit.expand,
      children: [
        Container(color: Colors.blue[100]),
        const Center(child: Text('卡片内容')),
      ],
    ),
  ),
)

5.2 与 ListView 结合

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          color: Colors.primaries[index % Colors.primaries.length][200],
          child: Center(child: Text('项目 ${index + 1}')),
        ),
      ),
    );
  },
)

5.3 与 Stack 结合

AspectRatio(
  aspectRatio: 16 / 9,
  child: Stack(
    children: [
      Container(color: Colors.blue[200]),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          padding: const EdgeInsets.all(12),
          color: Colors.black54,
          child: const Text(
            '底部标题',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ],
  ),
)

---

六、约束处理

AspectRatio 在不同约束条件下会有不同的表现，理解这些行为对于正确使用非常重要。

6.1 宽度约束

当父容器提供宽度约束时，AspectRatio 会根据比例计算高度：

SizedBox(
  width: 300,  // 固定宽度
  child: AspectRatio(
    aspectRatio: 16 / 9,
    child: Container(color: Colors.blue),  // 高度自动计算为 168.75
  ),
)

6.2 高度约束

当父容器提供高度约束时，AspectRatio 会根据比例计算宽度：

SizedBox(
  height: 150,  // 固定高度
  child: AspectRatio(
    aspectRatio: 16 / 9,
    child: Container(color: Colors.green),  // 宽度自动计算为 266.67
  ),
)

6.3 双向约束

当父容器同时提供宽度和高度约束时，AspectRatio 会选择较小的尺寸：

SizedBox(
  width: 300,
  height: 200,
  child: AspectRatio(
    aspectRatio: 16 / 9,
    child: Container(color: Colors.orange),
  ),
)

在上面的例子中，300 / 16 * 9 = 168.75 < 200，所以高度使用 168.75。

---

七、性能考虑

AspectRatio 组件虽然简单易用，但在某些情况下需要注意性能优化。

7.1 性能优化建议

1. 避免嵌套过多：AspectRatio 应该尽量直接包裹内容组件
2. 使用 const 构造函数：对于静态子组件，使用 const 可以提高性能
3. 避免频繁重建：如果宽高比需要动态变化，考虑使用 AnimatedContainer

7.2 何时使用 AspectRatio

推荐使用：

• 需要保持固定宽高比的组件
• 图片和视频展示
• 响应式卡片布局

不推荐使用：

• 固定大小的组件（使用 SizedBox）
• 需要动态调整宽高比的场景
• 简单的居中布局（使用 Center）

---

八、完整代码示例

下面是一个完整的、可以直接运行的 main.dart 文件，展示了 AspectRatio 组件的各种用法：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AspectRatio 组件示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const AspectRatioDemoPage(),
    );
  }
}

class AspectRatioDemoPage extends StatelessWidget {
  const AspectRatioDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AspectRatio 宽高比组件详解'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSection('一、视频比例', [
              const Text('常见的视频宽高比：'),
              const SizedBox(height: 12),
              _buildAspectRatioCard(16 / 9, '16:9 标准高清', Colors.blue),
              const SizedBox(height: 12),
              _buildAspectRatioCard(4 / 3, '4:3 传统比例', Colors.green),
              const SizedBox(height: 12),
              _buildAspectRatioCard(21 / 9, '21:9 超宽屏', Colors.purple),
            ]),
            const SizedBox(height: 24),
            _buildSection('二、图片比例', [
              const Text('常见的图片宽高比：'),
              const SizedBox(height: 12),
              Row(
                children: [
                  Expanded(
                    child: _buildAspectRatioBox(1, '1:1\n正方形', Colors.orange),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: _buildAspectRatioBox(3 / 2, '3:2\n摄影', Colors.teal),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: _buildAspectRatioBox(4 / 5, '4:5\n竖向', Colors.pink),
                  ),
                ],
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('三、社交媒体比例', [
              const Text('社交媒体常用比例：'),
              const SizedBox(height: 12),
              Row(
                children: [
                  Expanded(
                    child: _buildSocialMediaCard(
                      1,
                      'Instagram\n正方形',
                      Colors.purple[300]!,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: _buildSocialMediaCard(
                      4 / 5,
                      'Instagram\n竖向',
                      Colors.pink[300]!,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: _buildSocialMediaCard(
                      16 / 9,
                      'YouTube\n缩略图',
                      Colors.red[300]!,
                    ),
                  ),
                ],
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('四、图片卡片', [
              const Text('带图片的卡片布局：'),
              const SizedBox(height: 12),
              Card(
                clipBehavior: Clip.antiAlias,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AspectRatio(
                      aspectRatio: 16 / 9,
                      child: Container(
                        color: Colors.blue[100],
                        child: const Center(
                          child: Icon(Icons.image, size: 48, color: Colors.blue),
                        ),
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.all(16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '图片卡片标题',
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(height: 8),
                          Text(
                            '这是卡片的描述内容，展示了如何使用 AspectRatio 创建固定比例的图片卡片。',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('五、视频播放器', [
              const Text('视频播放器占位：'),
              const SizedBox(height: 12),
              Container(
                color: Colors.black,
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Container(
                    color: Colors.grey[900],
                    child: const Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.play_circle, size: 64, color: Colors.white),
                          SizedBox(height: 8),
                          Text(
                            '点击播放',
                            style: TextStyle(color: Colors.white70),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('六、网格图片', [
              const Text('使用 AspectRatio 创建网格：'),
              const SizedBox(height: 12),
              GridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                children: List.generate(9, (index) {
                  return AspectRatio(
                    aspectRatio: 1,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.primaries[index % Colors.primaries.length][200],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Center(child: Text('${index + 1}')),
                    ),
                  );
                }),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('七、轮播图', [
              const Text('轮播图组件：'),
              const SizedBox(height: 12),
              SizedBox(
                height: 150,
                child: PageView.builder(
                  itemCount: 5,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 4),
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.primaries[index % Colors.primaries.length][300],
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Center(
                            child: Text(
                              '轮播 ${index + 1}',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('八、约束处理', [
              const Text('不同约束下的表现：'),
              const SizedBox(height: 12),
              Column(
                children: [
                  _buildConstraintExample(
                    '宽度约束 (300px)',
                    SizedBox(
                      width: 300,
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Container(color: Colors.blue[300]),
                      ),
                    ),
                  ),
                  const SizedBox(height: 12),
                  _buildConstraintExample(
                    '高度约束 (100px)',
                    SizedBox(
                      height: 100,
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Container(color: Colors.green[300]),
                      ),
                    ),
                  ),
                  const SizedBox(height: 12),
                  _buildConstraintExample(
                    '双向约束 (300x200)',
                    SizedBox(
                      width: 300,
                      height: 200,
                      child: AspectRatio(
                        aspectRatio: 16 / 9,
                        child: Container(color: Colors.orange[300]),
                      ),
                    ),
                  ),
                ],
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('九、带标题的图片', [
              const Text('图片底部带标题：'),
              const SizedBox(height: 12),
              AspectRatio(
                aspectRatio: 16 / 9,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: Stack(
                    children: [
                      Container(
                        color: Colors.indigo[200],
                        child: const Center(
                          child: Icon(Icons.landscape, size: 64, color: Colors.indigo),
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                          padding: const EdgeInsets.all(12),
                          color: Colors.black54,
                          child: const Text(
                            '风景图片标题',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ]),
            const SizedBox(height: 24),
            _buildSection('十、响应式卡片', [
              const Text('根据屏幕宽度自适应：'),
              const SizedBox(height: 12),
              LayoutBuilder(
                builder: (context, constraints) {
                  final isWide = constraints.maxWidth > 400;
                  return Row(
                    children: [
                      Expanded(
                        child: AspectRatio(
                          aspectRatio: isWide ? 1 : 16 / 9,
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.teal[200],
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: Center(
                              child: Text(isWide ? '正方形' : '16:9'),
                            ),
                          ),
                        ),
                      ),
                      if (isWide) ...[
                        const SizedBox(width: 12),
                        Expanded(
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Container(
                              decoration: BoxDecoration(
                                color: Colors.orange[200],
                                borderRadius: BorderRadius.circular(12),
                              ),
                              child: const Center(child: Text('正方形')),
                            ),
                          ),
                        ),
                      ],
                    ],
                  );
                },
              ),
            ]),
            const SizedBox(height: 32),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title, List<Widget> children) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 8),
        ...children,
      ],
    );
  }

  Widget _buildAspectRatioCard(double ratio, String label, MaterialColor color) {
    return AspectRatio(
      aspectRatio: ratio,
      child: Container(
        decoration: BoxDecoration(
          color: color[300],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Center(
          child: Text(
            label,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildAspectRatioBox(double ratio, String label, MaterialColor color) {
    return AspectRatio(
      aspectRatio: ratio,
      child: Container(
        decoration: BoxDecoration(
          color: color[200],
          borderRadius: BorderRadius.circular(8),
        ),
        child: Center(
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 12),
          ),
        ),
      ),
    );
  }

  Widget _buildSocialMediaCard(double ratio, String label, Color color) {
    return AspectRatio(
      aspectRatio: ratio,
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Center(
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 11,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildConstraintExample(String label, Widget child) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: const TextStyle(fontSize: 12)),
        const SizedBox(height: 4),
        Center(child: child),
      ],
    );
  }
}

---

九、总结

AspectRatio 是 Flutter 中一个简单而实用的布局组件，通过本文的学习，我们掌握了以下内容：

📝 知识点回顾

1. AspectRatio 基础：了解 AspectRatio 的基本用法和 aspectRatio 参数
2. 常见宽高比：掌握视频、图片、社交媒体等常用宽高比
3. 实际应用场景：图片卡片、视频播放器、网格图片、轮播图等
4. 与其他组件结合：与 Card、ListView、Stack 等组件配合使用
5. 约束处理：理解不同约束条件下的行为
6. 性能优化：了解 AspectRatio 的性能考虑和最佳实践

🎯 最佳实践

1. 根据内容类型选择合适的宽高比
2. 使用 AspectRatio 保持图片和视频的原始比例
3. 与 LayoutBuilder 配合实现响应式布局
4. 避免在 AspectRatio 内部使用过多嵌套

🔗 延伸阅读

• Flutter AspectRatio 官方文档
• Flutter FittedBox 官方文档
• Flutter SizedBox 官方文档
• Flutter LayoutBuilder 官方文档