FLutter中可滚动列中的4个水平列表视图

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal ListViews in Scrollable Column')),
        body: ScrollableColumnWithHorizontalLists(),
      ),
    );
  }
}

class ScrollableColumnWithHorizontalLists extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          HorizontalListView(title: 'Category 1'),
          HorizontalListView(title: 'Category 2'),
          HorizontalListView(title: 'Category 3'),
          HorizontalListView(title: 'Category 4'),
        ],
      ),
    );
  }
}

class HorizontalListView extends StatelessWidget {
  final String title;

  HorizontalListView({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Card(
            child: Container(
              width: 100,
              child: Center(child: Text('$title Item $index')),
            ),
          );
        },
      ),
    );
  }
}