2

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

我正在尝试使用Stack，所以我可以在小部件后面放置自定义背景。当用户滚动时，这个背景必须滚动（必须坚持前面的小部件，以便背景改变）。

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

但我想把小部件放在网页的中心，所以我把小部件包裹SingleChildScrollView起来Center。但是现在在大横屏上CustomPaintWidget()不是全屏（有空白）。我尝试用替换我CustomPaintWidget()的Container来测试，但同样的问题。

这是我的代码：

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

有谁知道解决方案？

如何使小部件居中但同时使背景拉伸？

谢谢！

4

4 回答 4

4

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,
      ),
     ),
   );
于 2019-06-07T20:29:16.457 回答
0

阅读那篇文章，我认为这就是您所需要的一切https://medium.com/@swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32

于 2019-06-13T18:07:17.453 回答
0

我知道现在回答为时已晚，但将来可能需要它你必须使用Stack

例如：

你的主类：

 class _BodyState extends State<Body> {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
        ScrollViewClass(),
        Column(
          children: [
         //YOUR ITEMS
  ]),
);

滚动视图类：

    class ScrollViewClass extends StatefulWidget {
    @override
   _ScrollViewClassState createState() => _ScrollViewClassState();
   }

   class _ScrollViewClassState extends State<ScrollViewClass> {
   @override
   Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      margin: EdgeInsets.only(top: 260, bottom: 100),
      child: ListView(
        children: [
          Container(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: ConstrainedBox(
                  //Use MediaQuery.of(context).size.height for max Height
                  constraints: BoxConstraints(
                      minHeight: MediaQuery.of(context).size.height),
                  child: Column(
                    children: [
                    
//ADD YOUR ITEMS LIKE IMAGE, TEXT, CARD ETC...

Center(child: Image.asset('assets/app_name.png')),
                              Center(child: Image.asset('assets/app_name.png')),
                              Center(child: Image.asset('assets/app_name.png')),
                              Center(child: Image.asset('assets/app_name.png')),
                              Center(child: Text('fdgdfg')),
                              Center(child: Text('fdgdfg')),
                            ],
                          )),
                    ),
                  )
                ],
              ),
            ));
          }
        }
于 2021-12-01T09:58:42.270 回答
0

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        CustomPaintWidget(),
        Center(
          child: SingleChildScrollView(
            child: Widgets(),
          ),
        )
      ],
    ));
  }
于 2019-06-07T16:17:49.250 回答