Question

我想要一个背景图像，在该图像上方，应该有一些内容，这些内容应该可以垂直滚动，以免超出图像范围。

代码如下所示

我正在使用satck，一个孩子是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小部件内的背景图像，请在Stack小部件顶部使用Positoned小部件。

示例：-

    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(),
    ],
  ),

Answer 2

实际上不是黑屏，您会遇到类似这样的错误，

渲染库捕获到异常   下列   在performResize（）期间引发了断言：

垂直视口的高度不受限制。

我刚刚在您的列表中添加了scrollDirection和rinkleWrap。

                ListView(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,

您的整个代码

home: ListView(children: <Widget>[
      new Stack(
        children: <Widget>[
          Container(child: Text("Hello")),
          Stack(
            children: <Widget>[
              Container(
                height: 100,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blue,
                    image: DecorationImage(
                        image: new NetworkImage(
                            "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                        fit: BoxFit.fill)),
              ),
              /*************this is the main background image****************/

              Padding(
                padding: EdgeInsets.only(top: 100),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    ListView(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      padding: const EdgeInsets.all(8),
                      children: <Widget>[
                        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 3

我通过将ListView放在容器中来纠正它

 home: ListView(children: <Widget>[
  new Stack(
    children: <Widget>[
      Container(child: Text("Hello")),
      Stack(
        children: <Widget>[
          Container(
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.blue,
                image: DecorationImage(
                    image: new NetworkImage(
                        "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                    fit: BoxFit.fill)),
          ),
          /*************this is the main background image****************/

          Padding(
            padding: EdgeInsets.only(top: 100),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
               Conatiner( /************This container will wrap the listview and will make it scrollable also *******/
                height:200,
                child: ListView(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  padding: const EdgeInsets.all(8),
                  children: <Widget>[
                    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),
                      ),
                    ),
                  ],
                )
                )
              ],
            ),
          )
        ],
      )
    ],
  )
]),
);

ListView在颤动中显示黑屏

3 个答案: