Flutter中Stack内Positioned包裹的可滚动组件无法滚动问题

问题核心是Positioned未给子组件提供明确的横向宽度约束：当ScrollSample被Positioned包裹时，Positioned默认会让子组件收缩到内容最小宽度，或仅继承Stack的可用宽度（此处Stack宽度等于屏幕宽度），导致ScrollSample内部的横向滚动区域被限制，超出屏幕的内容被截断，无法触发滚动。

两种解决方法： #

方法1：给Positioned添加left/right属性，强制占据全屏宽度

修改ContainerSample中的Positioned部分，让它铺满横向空间：

Positioned(
  top: 100,
  left: 0,
  right: 0,
  child: ScrollSample(),
),

方法2：给包裹ScrollSample的SizedBox指定明确宽度

通过MediaQuery获取当前屏幕宽度，给SizedBox设置固定宽度：

Positioned(
  top: 100,
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: ScrollSample(),
  ),
),

修改后的完整代码示例（方法1）： #

import 'package:flutter/material.dart';
import 'package:trekmate_project/widgets/choice%20chips/scroll_sample.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: 300,
              color: Colors.amber,
            ),
            Positioned(
              top: 100,
              left: 0,
              right: 0,
              child: ScrollSample(),
            ),
          ],
        ),
      ),
    );
  }
}

原理：给Positioned设置left和right后，子组件会获得明确的横向宽度约束（等于Stack宽度即屏幕宽度），此时ScrollSample内部的横向SingleChildScrollView能识别到可视区域与内容宽度的差异，正常触发横向滚动。

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