Flutter中点击容器时如何切换滚动方向 实现Column转Row

通过状态变量联动控制滚动方向和布局容器即可，不需要改动原有图片资源逻辑：

• 新增布尔状态值isVertical，默认值为true，记录当前是否为纵向布局
• 为滚动区域添加点击手势监听，点击时反转isVertical的值，调用setState触发界面重绘
• 根据isVertical的值动态切换：
  • SingleChildScrollView的scrollDirection参数（纵向为Axis.vertical，横向为Axis.horizontal）
  • 滚动视图的子组件（纵向用Column，横向用Row，子节点直接复用图片列表）
• 横向布局时给滚动容器添加固定高度约束，避免无界约束导致的布局报错，同时适配不同方向下的图片显示尺寸

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 布局方向控制状态：true=纵向，false=横向
  bool isVertical = true;

  @override
  Widget build(BuildContext context) {
    // 动态生成适配当前布局的图片列表
    List<Widget> imglist = List.generate(10, (index) {
      return Image.asset(
        'images/${index + 1}.jpeg',
        fit: BoxFit.cover,
        // 纵向时图片宽度撑满屏幕，横向时图片高度匹配滚动区高度
        width: isVertical ? double.infinity : null,
        height: isVertical ? null : 300,
      );
    });

    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.black,
          title: const Text(
            "GALLERY VIEWER",
            style: TextStyle(fontSize: 30, letterSpacing: 3),
          ),
          // 支持点击右上角图标触发切换
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  isVertical = !isVertical;
                });
              },
              icon: Icon(isVertical ? Icons.grid_view_sharp : Icons.view_agenda),
            )
          ],
        ),
        // 点击容器区域切换布局
        body: GestureDetector(
          onTap: () {
            setState(() {
              isVertical = !isVertical;
            });
          },
          child: isVertical
              // 纵向布局
              ? SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Column(
                    children: imglist,
                  ),
                )
              // 横向布局，必须给定高度约束避免溢出
              : SizedBox(
                  height: 300,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: imglist,
                    ),
                  ),
                ),
        ),
        backgroundColor: Colors.black);
  }
}

• 代码同时保留了点击容器、点击右上角图标两种切换触发方式，不需要可自行删除对应逻辑
• 横向滚动区高度、图片尺寸参数可以根据实际设计需求调整
• 如果需要切换动画，可以用AnimatedSwitcher包裹布局切换部分，添加淡入淡出、尺寸过渡等效果

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