Flutter - 如何使 SvgPicture.asset() 在沒有 Appbar 的主父 Scaffold 的情況下在 Slack 內全屏顯示

Question

我想讓 SvgPicture 采用全寬和全高。 這是當前的解決方案。

我目前使用double.infinity作為寬度和高度。 但是，我想讓它使用LayoutBuilder的約束來使圖像全寬和全高。

LayoutBuilder(
                builder: (layoutBuilderContext, constraints) {                  
                  return Stack(
                    children: [
                      SvgPicture.asset(
                        'assets/images/welcome/bg-welcome-screen.svg',
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: double.infinity,
                      ),
                  ]),
              })

但是，使用constraints.maxWidth和constraints.maxHeight來調整SvgPicture的大小是無法做到的。 它需要全高，但不能全寬。

如果可能的話，如何在不使用double.infinity的情況下將圖像調整為全寬。 我真的希望它采用全屏寬度和高度，因為它是應用程序的背景圖像。

Answer 1

要獲取堆棧的完整大小，請使用Positioned.fill ，並且要調整 Stack 小部件的大小，請使用SizedBox包裝Stack

  SizedBox(
   width: constraints.maxWidth,
   height:constraints.maxHeight, 
    child: Stack(
      children: [
        Positioned.fill(
          child: Text(""),
        ),
      ],
    ),
  ),

最好在腳手架的主體等頂級小部件上使用LayoutBuilder來獲取主體大小。

更多關於Stack

Answer 2

您是否嘗試過使用 BoxFit.fill？ 這將通過扭曲圖像的原始縱橫比來填充目標寬度和高度。