Flutter开发需求：创建包含3个纵向元素的横向滚动组件

要实现包含3个纵向元素的横向滚动组件，用SingleChildScrollView搭配Row就能快速搞定，每个纵向元素用Column承载内容即可。下面是完整实现代码：

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('横向滚动纵向元素')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            // 开启横向滚动
            scrollDirection: Axis.horizontal,
            child: Row(
              children: const [
                // 第一个纵向元素
                VerticalItem(
                  icon: Icons.home,
                  title: '首页',
                  subtitle: '欢迎回来',
                ),
                SizedBox(width: 20),
                // 第二个纵向元素
                VerticalItem(
                  icon: Icons.shopping_cart,
                  title: '购物车',
                  subtitle: '有3件商品',
                ),
                SizedBox(width: 20),
                // 第三个纵向元素
                VerticalItem(
                  icon: Icons.person,
                  title: '我的',
                  subtitle: '个人中心',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 封装纵向元素组件
class VerticalItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;

  const VerticalItem({
    super.key,
    required this.icon,
    required this.title,
    required this.subtitle,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 固定每个纵向元素的宽度
      width: 120,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, size: 48, color: Colors.blue),
          const SizedBox(height: 12),
          Text(
            title,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 6),
          Text(
            subtitle,
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• SingleChildScrollView通过scrollDirection: Axis.horizontal开启横向滚动，超出屏幕宽度的内容会自动支持滑动。
• 每个纵向元素用Column组织图标、标题、副标题，通过SizedBox固定宽度避免内容互相挤压。
• 可以根据需求修改VerticalItem的样式，比如调整颜色、间距、尺寸，或者添加点击事件。

内容的提问来源于stack exchange，提问作者Nahom Ersom