调整图像大小以避免溢出

问题描述 投票:0回答:1

我正在尝试在我的窗口中显示此图像。但图像尺寸很大。我希望图像的大小在窗口大小减小时缩小,在窗口大小增大时扩展。使用目前的代码,增加的部分运行良好。但它不会减少,而是会引发渲染溢出错误。

import "package:flutter/material.dart";

class Default extends StatefulWidget {
  const Default({super.key});

  @override
  State<Default> createState() => _DefaultState();
}

class _DefaultState extends State<Default> {
  Map articles = {};
  @override
  Widget build(BuildContext context) {
    ColorScheme colors = Theme.of(context).colorScheme;
    return Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AspectRatio(
              aspectRatio: 2,
              child: ColorFiltered(
                  colorFilter: ColorFilter.mode(
                        colors.background, BlendMode.darken),
                  child: Stack(
                    children: [Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Expanded(
                            child: Image.asset(
                              fit: BoxFit.fill,
                              "assets/images/shelf.png"),
                          ),
                          Expanded(
                            child: Image.asset(
                              fit: BoxFit.fill,
                              "assets/images/shelf.png"),
                          ),
                        ],
                      )],
                  ),
                ),
            ),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(items: const [
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
        ],),
        );
  }
}

图片: enter image description here 我尝试过固定盒、盒装,但都不起作用。

flutter image responsiveness
1个回答
0
投票

尝试用给定的代码替换正文...希望有帮助

body: ColorFiltered(
        colorFilter: ColorFilter.mode(colors.background, BlendMode.darken),
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Image.asset(width: MediaQuery.of(context).size.width, fit: BoxFit.fill, "images/a.jpg"),
                ),
                Expanded(
                  child: Image.asset(width: MediaQuery.of(context).size.width, fit: BoxFit.fill, "images/b.jpg"),
                ),
                Expanded(
                  child: Image.asset(width: MediaQuery.of(context).size.width, fit: BoxFit.fill, "images/a.jpg"),
                ),
                Expanded(
                  child: Image.asset(width: MediaQuery.of(context).size.width, fit: BoxFit.fill, "images/b.jpg"),
                ),
              ],
            )
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: "hello"),
        ],
      ),
© www.soinside.com 2019 - 2024. All rights reserved.