Flutter框架跨平台鸿蒙开发——Row和Column对齐方式全解析

Row和Column的强大之处在于它们提供了丰富的对齐方式，通过和的组合，可以实现各种精细的布局效果。本文将深入解析这些对齐方式的使用方法和应用场景。

鸣弦artha

176人浏览 · 2026-01-26 19:11:04

鸣弦artha · 2026-01-26 19:11:04 发布

Row和Column的强大之处在于它们提供了丰富的对齐方式，通过MainAxisAlignment和CrossAxisAlignment的组合，可以实现各种精细的布局效果。本文将深入解析这些对齐方式的使用方法和应用场景。

一、MainAxisAlignment主轴对齐详解

MainAxisAlignment控制子组件在主轴方向上的排列方式。对于Row而言，主轴是水平方向；对于Column而言，主轴是垂直方向。

1.1 MainAxisAlignment.start

从主轴起始位置开始排列，这是默认的对齐方式。

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果：🔴🟢🔵

1.2 MainAxisAlignment.end

从主轴结束位置开始排列，子组件紧贴右侧。

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果： 🔴🟢🔵

1.3 MainAxisAlignment.center

子组件在主轴方向居中显示。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果： 🔴🟢🔵

1.4 MainAxisAlignment.spaceBetween

首尾子组件分别紧贴两端，其余子组件均匀分布在中间。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果：🔴 🟢 🔵

1.5 MainAxisAlignment.spaceAround

每个子组件两侧的空间相等，首尾子组件外侧的空间是中间子组件间距的一半。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果： 🔴 🟢 🔵

1.6 MainAxisAlignment.spaceEvenly

所有子组件之间的间距完全相等，包括首尾子组件与父组件边缘的距离。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

视觉效果： 🔴 🟢 🔵

二、CrossAxisAlignment交叉轴对齐详解

CrossAxisAlignment控制子组件在交叉轴方向上的对齐方式。对于Row而言，交叉轴是垂直方向；对于Column而言，交叉轴是水平方向。

2.1 CrossAxisAlignment.start

子组件在交叉轴起始位置对齐。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(width: 60, height: 40, color: Colors.red),
    Container(width: 60, height: 80, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

2.2 CrossAxisAlignment.end

子组件在交叉轴结束位置对齐。

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(width: 60, height: 40, color: Colors.red),
    Container(width: 60, height: 80, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

2.3 CrossAxisAlignment.center

子组件在交叉轴方向居中对齐，这是默认值。

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 60, height: 40, color: Colors.red),
    Container(width: 60, height: 80, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

2.4 CrossAxisAlignment.stretch

子组件在交叉轴方向拉伸，填满父组件。

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(width: 60, color: Colors.red),
    Container(width: 60, color: Colors.green),
    Container(width: 60, color: Colors.blue),
  ],
)

2.5 CrossAxisAlignment.baseline

子组件按照文字基线对齐，需要配合textBaseline使用。

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: const [
    Text('小字体', style: TextStyle(fontSize: 14)),
    Text('中字体', style: TextStyle(fontSize: 24)),
    Text('大字体', style: TextStyle(fontSize: 36)),
  ],
)

三、对齐方式对比表

下面表格总结了所有对齐方式的特点和适用场景：

对齐类型	属性	说明	适用场景
主轴	`start`	从起始位置排列	列表项、标签页
主轴	`end`	从结束位置排列	操作按钮组
主轴	`center`	居中排列	标题、居中内容
主轴	`spaceBetween`	两端对齐，中间等分	导航栏、工具栏
主轴	`spaceAround`	间距相等，外侧减半	按钮组、图标行
主轴	`spaceEvenly`	所有间距相等	卡片内部布局
交叉轴	`start`	起始位置对齐	列表项左对齐
交叉轴	`end`	结束位置对齐	列表项右对齐
交叉轴	`center`	居中对齐	卡片内容
交叉轴	`stretch`	拉伸填满	表单行、分割线
交叉轴	`baseline`	基线对齐	文字混合排版

四、对齐方式组合示例

通过主轴和交叉轴对齐方式的组合，可以实现各种布局效果。

4.1 卡片标题居中，内容左对齐

Card(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 标题行：居中
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '产品详情',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ],
      ),
      SizedBox(height: 16),
      // 内容行：左对齐
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('价格：¥199'),
          Text('库存：100件'),
          Text('销量：5000+'),
        ],
      ),
    ],
  ),
)

4.2 按钮组居中，图标和文字基线对齐

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Icon(Icons.star, size: 32),
    SizedBox(width: 8),
    Text(
      '4.8',
      style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    ),
    SizedBox(width: 4),
    Text(
      '分',
      style: TextStyle(fontSize: 14),
    ),
  ],
)

五、实战案例：评分组件

下面通过一个完整的评分组件示例，展示对齐方式的综合应用：

class RatingWidget extends StatelessWidget {
  final double rating;
  final int reviewCount;

  RatingWidget({required this.rating, required this.reviewCount});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          // 评分行：居中显示
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: [
              Icon(Icons.star, color: Colors.amber, size: 48),
              SizedBox(width: 12),
              Text(
                rating.toStringAsFixed(1),
                style: TextStyle(
                  fontSize: 48,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
          SizedBox(height: 8),
          // 评论数行：居中显示
          Text(
            '$reviewCount 条评价',
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[600],
            ),
          ),
          SizedBox(height: 16),
          // 星级评分条：均匀分布
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(5, (index) {
              return Icon(
                index < rating.round() ? Icons.star : Icons.star_border,
                color: Colors.amber,
                size: 32,
              );
            }),
          ),
          SizedBox(height: 16),
          // 分割线：拉伸填满
          Divider(),
          SizedBox(height: 16),
          // 评分分布：左对齐
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildRatingBar('5星', 80),
              _buildRatingBar('4星', 15),
              _buildRatingBar('3星', 3),
              _buildRatingBar('2星', 1),
              _buildRatingBar('1星', 1),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildRatingBar(String label, int percentage) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 40,
            child: Text(label),
          ),
          SizedBox(width: 8),
          Expanded(
            child: Container(
              height: 8,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(4),
              ),
              child: FractionallySizedBox(
                widthFactor: percentage / 100,
                alignment: Alignment.centerLeft,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(width: 8),
          SizedBox(
            width: 40,
            child: Text('$percentage%'),
          ),
        ],
      ),
    );
  }
}

5.1 评分组件对齐分析

评分显示行：
- MainAxisAlignment.center：评分居中显示
- CrossAxisAlignment.baseline：图标和数字基线对齐
星级评分条：
- MainAxisAlignment.spaceEvenly：星星均匀分布
评分分布条：
- CrossAxisAlignment.start：左侧标签和百分比对齐
- 使用Expanded让进度条占据剩余空间

六、Column主轴对齐示例

Column的主轴对齐方式与Row相同，但方向为垂直方向。

6.1 垂直居中布局

Container(
  height: 300,
  color: Colors.grey[200],
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.check_circle, size: 64, color: Colors.green),
      SizedBox(height: 16),
      Text('操作成功', style: TextStyle(fontSize: 24)),
      SizedBox(height: 8),
      Text('您的操作已成功完成', style: TextStyle(color: Colors.grey)),
    ],
  ),
)

6.2 上下分布布局

Container(
  height: 300,
  color: Colors.grey[200],
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text('顶部内容'),
      Text('中间内容'),
      Text('底部内容'),
    ],
  ),
)

七、实战案例：商品卡片

下面展示一个完整的商品卡片，综合运用各种对齐方式：

class ProductCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 商品图片
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue[100],
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(8),
              ),
            ),
            child: Center(
              child: Icon(Icons.image, size: 80, color: Colors.blue),
            ),
          ),
          // 商品信息
          Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题和收藏按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text(
                        '高品质无线耳机',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Icon(Icons.favorite_border),
                  ],
                ),
                SizedBox(height: 8),
                // 评分
                Row(
                  children: [
                    Icon(Icons.star, color: Colors.amber, size: 16),
                    SizedBox(width: 4),
                    Text('4.8'),
                    SizedBox(width: 8),
                    Text(
                      '销量 5000+',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ],
                ),
                SizedBox(height: 16),
                // 价格和购买按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '¥299',
                          style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          '原价 ¥599',
                          style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        padding: EdgeInsets.symmetric(
                          horizontal: 24,
                          vertical: 12,
                        ),
                      ),
                      child: Text('立即购买'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

八、对齐方式选择指南

根据不同的布局需求，选择合适的对齐方式：

8.1 导航栏布局

AppBar(
  title: Text('应用标题'),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
  ],
)
// 内部使用 MainAxisAlignment.spaceBetween

8.2 卡片内容布局

Card(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('标题'),
      Text('描述内容'),
    ],
  ),
)
// 使用 CrossAxisAlignment.start 实现左对齐

8.3 按钮组布局

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(child: Text('按钮1'), onPressed: () {}),
    ElevatedButton(child: Text('按钮2'), onPressed: () {}),
    ElevatedButton(child: Text('按钮3'), onPressed: () {}),
  ],
)
// 使用 spaceEvenly 实现均匀分布

九、完整可运行示例

下面是一个完整的可运行示例，展示了所有对齐方式的效果：

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: '对齐方式示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AlignmentDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('对齐方式全解析'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildSectionTitle('MainAxisAlignment 主轴对齐'),
          const SizedBox(height: 16),
          _buildMainAxisAlignmentDemos(),
          const SizedBox(height: 24),
          _buildSectionTitle('CrossAxisAlignment 交叉轴对齐'),
          const SizedBox(height: 16),
          _buildCrossAxisAlignmentDemos(),
          const SizedBox(height: 24),
          _buildSectionTitle('评分组件示例'),
          const SizedBox(height: 16),
          RatingWidget(rating: 4.8, reviewCount: 5000),
          const SizedBox(height: 24),
          _buildSectionTitle('商品卡片示例'),
          const SizedBox(height: 16),
          ProductCard(),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  Widget _buildMainAxisAlignmentDemos() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildAlignmentDemo('Start', MainAxisAlignment.start),
        const SizedBox(height: 12),
        _buildAlignmentDemo('Center', MainAxisAlignment.center),
        const SizedBox(height: 12),
        _buildAlignmentDemo('End', MainAxisAlignment.end),
        const SizedBox(height: 12),
        _buildAlignmentDemo('SpaceBetween', MainAxisAlignment.spaceBetween),
        const SizedBox(height: 12),
        _buildAlignmentDemo('SpaceAround', MainAxisAlignment.spaceAround),
        const SizedBox(height: 12),
        _buildAlignmentDemo('SpaceEvenly', MainAxisAlignment.spaceEvenly),
      ],
    );
  }

  Widget _buildAlignmentDemo(String label, MainAxisAlignment alignment) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: const TextStyle(fontSize: 14, color: Colors.grey)),
        const SizedBox(height: 4),
        Container(
          height: 60,
          color: Colors.grey[200],
          child: Row(
            mainAxisAlignment: alignment,
            children: [
              Container(width: 50, height: 50, color: Colors.red),
              Container(width: 50, height: 50, color: Colors.green),
              Container(width: 50, height: 50, color: Colors.blue),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildCrossAxisAlignmentDemos() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildCrossAlignmentDemo('Start', CrossAxisAlignment.start),
        const SizedBox(height: 12),
        _buildCrossAlignmentDemo('Center', CrossAxisAlignment.center),
        const SizedBox(height: 12),
        _buildCrossAlignmentDemo('End', CrossAxisAlignment.end),
        const SizedBox(height: 12),
        _buildCrossAlignmentDemo('Stretch', CrossAxisAlignment.stretch),
      ],
    );
  }

  Widget _buildCrossAlignmentDemo(String label, CrossAxisAlignment alignment) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: const TextStyle(fontSize: 14, color: Colors.grey)),
        const SizedBox(height: 4),
        SizedBox(
          height: 100,
          child: Row(
            crossAxisAlignment: alignment,
            children: [
              Container(width: 60, height: 40, color: Colors.red),
              Container(width: 60, height: 80, color: Colors.green),
              Container(width: 60, height: 60, color: Colors.blue),
            ],
          ),
        ),
      ],
    );
  }
}

class RatingWidget extends StatelessWidget {
  final double rating;
  final int reviewCount;

  RatingWidget({required this.rating, required this.reviewCount});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: [
              const Icon(Icons.star, color: Colors.amber, size: 48),
              const SizedBox(width: 12),
              Text(
                rating.toStringAsFixed(1),
                style: const TextStyle(
                  fontSize: 48,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Text(
            '$reviewCount 条评价',
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[600],
            ),
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(5, (index) {
              return Icon(
                index < rating.round() ? Icons.star : Icons.star_border,
                color: Colors.amber,
                size: 32,
              );
            }),
          ),
        ],
      ),
    );
  }
}

class ProductCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue[100],
              borderRadius: const BorderRadius.vertical(
                top: Radius.circular(8),
              ),
            ),
            child: const Center(
              child: Icon(Icons.image, size: 80, color: Colors.blue),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Expanded(
                      child: Text(
                        '高品质无线耳机',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.favorite_border),
                      onPressed: () {},
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Row(
                  children: const [
                    Icon(Icons.star, color: Colors.amber, size: 16),
                    SizedBox(width: 4),
                    Text('4.8'),
                    SizedBox(width: 8),
                    Text(
                      '销量 5000+',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '¥299',
                          style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          '原价 ¥599',
                          style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 24,
                          vertical: 12,
                        ),
                      ),
                      child: const Text('立即购买'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

十、常见问题与解决方案

10.1 CrossAxisAlignment.stretch不生效

问题：设置CrossAxisAlignment.stretch后，子组件没有拉伸

原因：子组件固定了交叉轴尺寸

解决方案：移除子组件的固定尺寸

// 错误
Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(height: 50, width: 60, color: Colors.red),  // 固定高度
  ],
)

// 正确
Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(width: 60, color: Colors.red),  // 不设置高度
  ],
)

10.2 mainAxisAlignment没有效果

问题：设置MainAxisAlignment.center，但子组件没有居中

原因：Row的mainAxisSize为max，且子组件总宽度超过可用空间

解决方案：使用Expanded或Flexible包装子组件

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
)

掌握MainAxisAlignment和CrossAxisAlignment的使用方法，可以让我们精确控制Row和Column中子组件的位置，实现各种精美的布局效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter框架跨平台鸿蒙开发——家具风水指南APP的开发流程

Flutter跨平台鸿蒙开发家居风水指南APP 本文介绍了使用Flutter框架开发跨平台家居风水指南APP的全流程。该APP包含六大功能区（客厅、卧室等）的风水建议、热门推荐、知识科普和收藏功能，采用响应式布局适配不同设备。开发环境配置了Flutter SDK、Dart SDK、Android Studio及鸿蒙开发工具。核心功能通过数据模型设计（分类、建议、知识三类模型）、服务层实现（数据获

人工智能6S服务平台

Flutter框架跨平台鸿蒙开发——育儿知识APP的开发流程

本文介绍了使用Flutter框架开发跨平台育儿知识APP的流程，支持鸿蒙系统运行。该APP提供孕期到青少年期的全面育儿知识，核心功能包括知识浏览、智能搜索、阶段筛选、收藏和详情阅读。开发采用分层架构设计，包含UI层、业务逻辑层和数据服务层。技术栈使用Flutter 3.0+、Dart 3.0+和HarmonyOS 2.0+。开发流程包括项目初始化、架构设计、模型定义（如育儿知识模型和阶段枚举）、服

人工智能6S服务平台

Flutter框架跨平台鸿蒙开发——儿歌学习APP的开发流程

本文介绍了使用Flutter框架开发跨平台儿歌大全APP的全过程。该APP专为0-6岁儿童设计，提供儿歌播放、收藏、分类浏览等功能，采用Flutter 3.x框架开发，适配鸿蒙、Android和iOS平台。文章详细阐述了项目架构设计，包括数据模型层、业务逻辑层和用户界面层的分层结构，并重点展示了音频播放服务的核心代码实现。通过Flutter的跨平台特性，开发者可以高效构建同时兼容鸿蒙系统的移动应用