如何在Flutter中使用Row和Column组件解决对应布局问题

先对目标布局做层级拆分，按照以下结构嵌套Row和Column即可实现：

• 最外层使用Column作为容器，垂直排列所有模块：顶部导航/标题区、中间内容模块、底部操作按钮组
• 内部子模块按水平排列需求嵌套Row：
  • 头像+用户信息行：Row内部左侧放图片组件，右侧套Column垂直放置用户名、简介两个文本组件
  • 功能卡片行：Row内部放3个等宽卡片，每个卡片外层套Expanded实现等分宽度，卡片内部用Column垂直排列图标、功能名称、描述文本
  • 操作说明行：Row内部左侧放提示文本，右侧放功能按钮
• 所有间距通过Padding或SizedBox控制，对齐需求通过Row/Column的mainAxisAlignment、crossAxisAlignment属性调整

示例参考代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 顶部用户信息行
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 左侧头像
              Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              const SizedBox(width: 12),
              // 右侧文本列
              const Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("用户名", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                  SizedBox(height: 4),
                  Text("个人简介信息", style: TextStyle(fontSize: 14, color: Colors.grey)),
                ],
              )
            ],
          ),
          const SizedBox(height: 24),
          // 中间功能卡片行
          Row(
            children: [
              Expanded(
                child: _buildFunctionCard(Icons.star, "功能1", "描述1"),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _buildFunctionCard(Icons.favorite, "功能2", "描述2"),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _buildFunctionCard(Icons.share, "功能3", "描述3"),
              ),
            ],
          ),
          const SizedBox(height: 24),
          // 底部操作行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text("操作提示文本", style: TextStyle(fontSize: 14)),
              ElevatedButton(
                onPressed: () {},
                child: const Text("操作按钮"),
              )
            ],
          )
        ],
      ),
    ),
  );
}

// 封装功能卡片组件
Widget _buildFunctionCard(IconData icon, String title, String desc) {
  return Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.1),
          blurRadius: 4,
          offset: const Offset(0, 2),
        )
      ]
    ),
    child: Column(
      children: [
        Icon(icon, size: 32, color: Colors.blue),
        const SizedBox(height: 8),
        Text(title, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
        const SizedBox(height: 4),
        Text(desc, style: const TextStyle(fontSize: 12, color: Colors.grey)),
      ],
    ),
  );
}

注意事项 #

• 需要等分Row内的宽度时，必须给对应子组件套Expanded组件，否则子组件会按自身尺寸撑开，出现溢出问题
• 长文本要设置overflow: TextOverflow.ellipsis属性，避免文本长度超出容器导致布局错乱
• 嵌套布局层级不要过深，可将重复的模块封装成独立组件，降低代码复杂度

内容的提问来源于stack exchange，提问作者Mehedi Hasan