flutter - ListView 在抖动中显示空白屏幕

Question

我想要一个背景图片，在该图片上方会有一些内容应该可以垂直滚动，这样它就不会超出图片范围。

代码如下所示

我正在使用 satck，一个 child 是 Image，另一个是 listview 来实现这一点，但仍然无法找到正确的解决方案..

 ListView(
    children: <Widget>[
               new Stack(
                  children: <Widget>[
                    Container(
                        child: background.Row3
                    ),

                      Stack(
                        children: <Widget>[
                          Center(child: SvgPicture.asset('assets/Receipt.svg',height: 350,width: 200,),),/*************this is the main background image****************/

                          Padding(padding: EdgeInsets.only(top:100),
                          child: Column(
                            mainAxisAlignment:MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              ListView(
                                padding: const EdgeInsets.all(8),
                                children: <Widget>[  /********text above background image *******************/

                                  Center(
                                      child:Text('Beneficiary Details',style: TextStyle(fontSize: 14,color: Colors.black),)
                                  ),


                                  Center(
                                      child:Text('Sushita sen',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                  ),
                                  Center(
                                      child:Text('Reference Number',style: TextStyle(fontSize: 14,color: Colors.black),)
                                  ),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),
                                ],
                              )


                            ],
                          )

                            ,)


                        ],
                      )

                    ],
                  )

              ]
          ),
        ),
      ),
    ],
  ),
   );
  }
 }

Answer 1

@kriti sharma 对于 Stack 小部件内的背景图片，请使用 Positoned Stack 小部件之上的小部件。

例子:-

    children: <Widget>[
      Positioned(
        top: 0,
        right: 0,
        child: Image.asset(
          "assets/icons/categories/map.jpg",
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
        ),
      ),
      // _buildGoogleMap(context),
      // _zoomminusfunction(),
      // _zoomplusfunction(),
      // _buildContainer(),
    ],
  ),