如何使 Stack 可水平滚动？答案

【问题标题】：How to make Stack scrollable horizontally?如何使 Stack 可水平滚动？
【发布时间】：2021-09-02 00:35:27
【问题描述】：

我正在构建一个图表，我希望图表的侧面标题（Y 轴）保持固定在屏幕左侧，并允许图表水平滚动。我已经构建了图表，但无法使其可滚动：

Container(
          width: MediaQuery.of(context).size.width,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                  height: MediaQuery.of(context).size.height /2,
                  width: MediaQuery.of(context).size.width / 10,
                  child: SideTitles()),
              Container(
                //needs to be scrollable

                width: MediaQuery.of(context).size.width * 0.9,
                height: MediaQuery.of(context).size.height /2,
                child: Stack(
                  children: graph,
                ),
              ),
            ],
          ),
        )

我尝试使用 SingleChildScrollView 包装 Stack，但随后图形消失了。我还尝试使用 SingleChildScrollView 包装 Container，但随后出现溢出错误，因为父级是 Flex 小部件的 Row。

有什么想法可以实现吗？

【问题讨论】：

标签： flutter dart

【解决方案1】：

您是否尝试过使用滚动方向的 ListView：Axis.horizontal。

【讨论】：

【解决方案2】：

好的，我通过在 Stack 中添加 clipBehavior: Clip.none 来修复它，然后用与图形宽度相同的 Container 包装它，最后用 SingleChildScrollView() 包装该容器

return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              height: graph.yHeight,
              width: MediaQuery.of(context).size.width / 10,
              child: SideTitles()),
          Container(
            width: MediaQuery.of(context).size.width * 0.9,
            height: MediaQuery.of(context).size.height / 2,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Container(
                width: graph.xWidth,
                child: Stack(
                  children: graph.graphList,
                  clipBehavior: Clip.none,
                ),
              ),
            ),
          ),
        ],
      )

【讨论】：