flutter 如何相对调整图像小部件的大小?

uqjltbpv  于 2022-11-17  发布在  Flutter
关注(0)|答案(3)|浏览(162)

我想我的图像大小相对于父Containerwidget和定义的scale: 0.8,//hereAssetImage(),但它不工作?我如何解决这个问题?

Container(
                        margin: const EdgeInsets.only(top: 30),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          children: [
                            GestureDetector(
                              onTap: () {
                                print("test");
                              },
                              child: Container(
                                width: 50,
                                height: 50,
                                // color: Colors.green,
                                decoration: const BoxDecoration(
                                  color: Colors.blue,
                                  shape: BoxShape.circle,
                                  image: 
                                  DecorationImage(
                                    fit: BoxFit.fill,
                                    image: AssetImage('images/prop/lock.png'),
                                    scale: 0.8,//here
                                  ),
                                ),
                              ),
                            ),
                            
                          ],
                        ),
                      ),

我认为LayoutBuilder()不能正常工作。

Container(
                        margin: const EdgeInsets.only(top: 30),
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          children: [
                            GestureDetector(
                              onTap: () {
                                print("test");
                              },
                              child: Container(
                                width: 50,
                                height: 50,
                                // color: Colors.green,
                                decoration: const BoxDecoration(
                                  color: Colors.blue,
                                  shape: BoxShape.circle,
                                ),
                                child: LayoutBuilder(
                                  builder: (context, constraints) {
                                    return Image.asset(
                                      'images/prop/lock.png',
                                      fit: BoxFit.none,
                                      height: constraints.maxHeight * 0.1,
                                      width: constraints.maxWidth * 0.1,
                                    );
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
zazmityj

zazmityj1#

您可以像这样使用LayoutBuilder

Container(
        margin: const EdgeInsets.only(top: 30),
        alignment: Alignment.centerLeft,
        child: Wrap(
          children: [
            GestureDetector(
              onTap: () {
                print("test");
              },
              child: Container(
                width: 50,
                height: 50,
                alignment: Alignment.center,// important part
                decoration: const BoxDecoration(
                  color: Colors.blue,
                  shape: BoxShape.circle,
                  
                ),
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return Image.asset(
                      'images/prop/lock.png',
                      fit: BoxFit.contain,
                      height: constraints.maxHeight * 0.3,
                      width: constraints.maxWidth * 0.3,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      )

gdrx4gfi

gdrx4gfi2#

您可以将AspectRatio类用于该用途,如下所示

final double size = MediaQuery.of(context).size.aspectRatio;
af7jpaap

af7jpaap3#

必须将fit类型更改为BoxFit.none,如下所示:

Container(
      margin: const EdgeInsets.only(top: 30),
      alignment: Alignment.centerLeft,
      child: Wrap(
        children: [
          GestureDetector(
            onTap: () {
              print("test");
            },
            child: Container(
              width: 100,
              height: 100,
              // color: Colors.green,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.none,    // change this line
                  image: AssetImage('images/prop/lock.png'),
                  scale: 0.8,
                ),
              ),
            ),
          ),
        ],
      ),
    )

相关问题