Row

Row 将子组件沿水平方向排列。它与 Column 用法几乎一致，只是方向不同。

构造函数

Row({
  Key? key,                                          // 组件标识
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,  // 主轴（水平）对齐方式
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉轴（垂直）对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max,      // 主轴尺寸：max=撑满父组件，min=包裹内容
  TextDirection? textDirection,                       // 文本方向（影响 start/end 的判断）
  VerticalDirection verticalDirection = VerticalDirection.down, // 交叉轴排列方向
  TextBaseline? textBaseline,                         // 文本基线（用于对齐文本）
  List<Widget> children = const [],                   // 子组件列表
})

属性速查

属性	类型	默认值	说明
mainAxisAlignment	MainAxisAlignment	start	子组件在水平方向的分布方式
crossAxisAlignment	CrossAxisAlignment	center	子组件在垂直方向的对齐方式
mainAxisSize	MainAxisSize	max	Row 自身宽度策略
textDirection	TextDirection?	null	文本方向（影响 start/end）
verticalDirection	VerticalDirection	down	交叉轴排列方向
textBaseline	TextBaseline?	null	文本基线
children	List<Widget>	[]	子组件列表

常用值速查

mainAxisAlignment — 主轴对齐（水平方向）

值	效果
start	左对齐（默认）
center	居中
end	右对齐
spaceBetween	两端对齐，中间均匀分布
spaceAround	均匀分布，两端留半间距
spaceEvenly	完全均匀分布

start:          center:          end:
┌───────┐      ┌───────┐      ┌───────┐
│ABC    │      │  ABC  │      │    ABC│
└───────┘      └───────┘      └───────┘

spaceBetween:  spaceAround:     spaceEvenly:
┌───────┐      ┌───────┐      ┌───────┐
│A    B C│      │ A  B  C│      │ A  B  C│
└───────┘      └───────┘      └───────┘

crossAxisAlignment — 交叉轴对齐（垂直方向）

值	效果
start	顶部对齐
center	居中（默认）
end	底部对齐
stretch	垂直撑满

mainAxisSize — 主轴尺寸

值	行为
MainAxisSize.max	Row 尽可能撑满父组件的宽度（默认）
MainAxisSize.min	Row 宽度 = 所有子组件宽度之和

快速示例

以下示例都需要在文件顶部添加 import 'package:flutter/material.dart';

图标 + 文字

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row 图标+文字')),
      body: const Center(
        // ─── ★ Row 水平排列 ──────────────
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.person, color: Colors.blue),
            SizedBox(width: 8),
            Text('用户名'),
          ],
        ),
        // ─── ☆ Row 水平排列 ──────────────
      ),
    );
  }
}

两端对齐（标签 + 值）

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row 两端对齐')),
      body: const Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          // ─── ★ 两端对齐 ──────────────
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          // ─── ☆ 两端对齐 ──────────────
          children: [
            Text('年龄', style: TextStyle(color: Colors.grey)),
            Text('25 岁', style: TextStyle(fontWeight: FontWeight.w500)),
          ],
        ),
      ),
    );
  }
}

头像 + 信息

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row 头像+信息')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            const CircleAvatar(
              backgroundColor: Colors.grey,
              radius: 24,
              child: Icon(Icons.person, color: Colors.white),
            ),
            const SizedBox(width: 12),
            // ─── ★ Expanded 占剩余空间 ──────────────
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text('张三', style: TextStyle(fontWeight: FontWeight.bold)),
                  SizedBox(height: 2),
                  Text('Flutter 开发者', style: TextStyle(color: Colors.grey, fontSize: 12)),
                ],
              ),
            ),
            // ─── ☆ Expanded 占剩余空间 ──────────────
            const Icon(Icons.arrow_forward_ios, size: 16),
          ],
        ),
      ),
    );
  }
}

Row 中使用 Expanded

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row + Expanded')),
      body: Row(
        children: [
          Container(width: 100, color: Colors.red),
          // ─── ★ flex 比例分配 ──────────────
          Expanded(
            flex: 2,
            child: Container(color: Colors.blue, child: const Center(child: Text('2份', style: TextStyle(color: Colors.white)))),
          ),
          // ─── ☆ flex 比例分配 ──────────────
          // ─── ★ flex: 1 ──────────────
          Expanded(
            flex: 1,
            child: Container(color: Colors.green, child: const Center(child: Text('1份', style: TextStyle(color: Colors.white)))),
          ),
          // ─── ☆ flex: 1 ──────────────
        ],
      ),
    );
  }
}

常见错误

Row 溢出

A RenderFlex overflowed by 150 pixels on the right.

解决方案：

// 方案 1：用 Expanded 包裹文字（让它自动换行或截断）
Row(
  children: [
    const Icon(Icons.person),
    Expanded(
      child: Text(
        '一段很长很长的文字内容...',
        overflow: TextOverflow.ellipsis,  // 超出部分显示省略号
        maxLines: 1,                      // 限制为一行
      ),
    ),
  ],
)

// 方案 2：用 Flexible 允许文字换行
Row(
  children: [
    const Icon(Icons.person),
    Flexible(
      child: Text('一段很长很长的文字内容...'),
    ),
  ],
)

// 方案 3：用 Wrap 代替（自动换行）
Wrap(
  children: [
    const Icon(Icons.person),
    Text('一段很长很长的文字内容...'),
  ],
)

Row vs Column 速查

特性	Row	Column
主轴方向	水平	垂直
交叉轴方向	垂直	水平
溢出方向	右侧	底部
Expanded 效果	占水平剩余空间	占垂直剩余空间