Question

我正在使用Flutter制作网站。我想让用户像普通网站一样向下滚动时滚动网页。

我尝试使用Stack，以便可以将自定义背景放在小部件后面。用户滚动时，背景必须滚动（必须粘贴在前面的小部件上，这样背景才会改变）。

（我无法使用Scaffold设置背景颜色，因为我的背景是使用CustomPainter）

但是我想将小部件放在网页的中心，因此我将SingleChildScrollView包装在Center小部件中。但是现在在大的水平屏幕上，CustomPaintWidget()尚未填充屏幕（存在空白）。我尝试将CustomPaintWidget()替换为Container进行测试，但是还是同样的问题。

这是我的代码：

Center(
     child: SingleChildScrollView(
     child:Stack(children: <Widget>[
           CustomPaintWidget(),
           Widgets(),
     ],),

有人知道解决方案吗？

如何使小部件居中但又使背景伸展？

谢谢！

Answer 1

我认为您可以尝试以下方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        CustomPaintWidget(),
        Center(
          child: SingleChildScrollView(
            child: Widgets(),
          ),
        )
      ],
    ));
  }

Answer 2

SingleChildScrollView根据定义shriknwraps是它的孩子。

您应该尝试的是

return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
     child: ConstrainedBox(
       //Use MediaQuery.of(context).size.height for max Height
       constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),
       child: Center(
         child: //Widget,
      ),
     ),
   );

Answer 3

阅读该帖子，我认为您只需要https://medium.com/@swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32

如何居中SingleChildScrollView但使背景拉伸以填充屏幕？

3 个答案: