flutter - Overalyed 图像不会在颤动中出现在左下角

Question

我正在使用堆栈将图像覆盖在另一个图像上。

以下是我的代码：

Stack(
                      alignment: Alignment.topCenter,
                      children: <Widget>[
                        Container(
                          //color: kBluePrimaryColor,
                          width: MediaQuery.of(context).size.width,
                          //height: MediaQuery.of(context).size.height * 0.23,
                          child: bannerimage == '' || bannerimage == null
                              ? Image.asset('images/user.jpg')
                              : Image.network(
                                  'image from api call'
                                  fit: BoxFit.cover,
                                ),
                        ),
                        Align(
                          alignment: Alignment.bottomLeft,
                          child: Container(
                            //alignment: Alignment(0, -0.5),
                            width: 100,
                            height: 65,
                            decoration: ShapeDecoration(
                                shape: CircleBorder(), color: Colors.white),
                            child: DecoratedBox(
                              decoration: ShapeDecoration(
                                  shape: CircleBorder(),
                                  image: DecorationImage(
                                      fit: BoxFit.cover,
                                      image: thumbnailimage == '' ||
                                              thumbnailimage == null
                                          ? AssetImage('images/user.jpg')
                                          : NetworkImage(
                                              'image called using api'
                                            ))),
                            ),
                          ),
                        )
                      ],
                    ),

使用此代码，我得到以下输出：

我想要的是：

有人可以帮我吗？

标签： flutterdart

Answer 1

Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(bottom: 50),   // this will give extra space below the image
              //color: kBluePrimaryColor,
              width: MediaQuery.of(context).size.width,
              //height: MediaQuery.of(context).size.height * 0.23,
              child: bannerimage == '' || bannerimage == null
                  ? Image.asset('images/user.jpg')
                  : Image.network(
                'image from api call'
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              bottom: 0,     // how far you want image to be from bottom of the screen
              left: 10,     // how far you want image to be from left of the screen
              child: Container(
                //alignment: Alignment(0, -0.5),
                width: 100,
                height: 65,
                decoration: ShapeDecoration(
                    shape: CircleBorder(), color: Colors.white),
                child: DecoratedBox(
                  decoration: ShapeDecoration(
                      shape: CircleBorder(),
                      image: DecorationImage(
                          fit: BoxFit.cover,
                          image: thumbnailimage == '' ||
                              thumbnailimage == null
                              ? AssetImage('images/user.jpg')
                              : NetworkImage(
                              'image called using api'
                          ))),
                ),
              ),
            )
          ],
        ),