Flutter：maxXIndex为0的TwoDimensionalGridView中行无法横向滚动求解

要在固定300×300的TwoDimensionalGridView中实现超出尺寸的Row横向滚动，核心思路是将Row包裹在横向的SingleChildScrollView中，再作为网格的单元格子项。因为TwoDimensionalGridView的单元格会对子项施加尺寸约束，直接放置超出尺寸的Row会被截断，嵌套SingleChildScrollView可以让单元格内容突破横向约束实现滚动。

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: TwoDimensionalGridView(
              // 配置网格为单行布局
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 1,
                childAspectRatio: 3,
              ),
              childrenDelegate: SliverChildBuilderDelegate(
                (context, index) {
                  return SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      // 生成超出300宽度的子项列表
                      children: List.generate(15, (i) {
                        return Container(
                          width: 80,
                          height: 80,
                          margin: const EdgeInsets.symmetric(horizontal: 4),
                          color: Colors.primaries[i % Colors.primaries.length],
                          child: Center(
                            child: Text(
                              'Item $i',
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                        );
                      }),
                    ),
                  );
                },
                childCount: 1,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 固定尺寸容器：用Container限定TwoDimensionalGridView的300×300尺寸，避免其自适应父组件大小。
• 横向SingleChildScrollView：将超出宽度的Row包裹其中，设置scrollDirection: Axis.horizontal开启横向滚动。
• 网格配置：示例中用SliverGridDelegateWithFixedCrossAxisCount设置单行布局，你可以根据需求调整网格的行列数、子项比例等参数。

如果你的场景是让整个TwoDimensionalGridView横向滚动（而非单元格内的Row），可以调整gridDelegate的参数（比如设置crossAxisCount为更大的值，让网格内容超出容器宽度），此时TwoDimensionalGridView会自动触发横向滚动，无需额外嵌套SingleChildScrollView。

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