Flutter中如何实现多滚动效果？含4个独立滚动区域需求问询

要实现图中4个独立的滚动区域，核心是通过布局组件嵌套独立滚动组件，让每个区域拥有专属的滚动逻辑。以下是具体实现方案：

实现思路 #

1. 用Row将界面拆分为左右两部分，每部分再通过Column分为上下两个滚动区域；
2. 借助Expanded让每个滚动区域占满对应空间，避免布局溢出；
3. 每个区域内部使用SingleChildScrollView或ListView实现独立滚动。

完整代码示例 #

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('4个独立滚动区域')),
        body: Row(
          children: [
            // 左侧上下滚动区域
            Expanded(
              child: Column(
                children: [
                  // 左上滚动区
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: List.generate(50, (index) {
                          return ListTile(title: Text('左上区域 条目 $index'));
                        }),
                      ),
                    ),
                  ),
                  // 左下滚动区
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: List.generate(50, (index) {
                          return ListTile(title: Text('左下区域 条目 $index'));
                        }),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            // 右侧上下滚动区域
            Expanded(
              child: Column(
                children: [
                  // 右上滚动区
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: List.generate(50, (index) {
                          return ListTile(title: Text('右上区域 条目 $index'));
                        }),
                      ),
                    ),
                  ),
                  // 右下滚动区
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: List.generate(50, (index) {
                          return ListTile(title: Text('右下区域 条目 $index'));
                        }),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• Expanded：保证每个滚动区域在父布局中平分空间，适配不同屏幕尺寸；
• SingleChildScrollView：基础滚动容器，默认垂直滚动，如需水平滚动可设置scrollDirection: Axis.horizontal；
• 若需要更高效的列表滚动，可直接用ListView替代SingleChildScrollView + Column，效果完全一致。

内容的提问来源于stack exchange，提问作者Rian Pratama