flutter 尝试使图像适合堆栈时BoxFit出现问题

brgchamk  于 2023-03-31  发布在  Flutter
关注(0)|答案(2)|浏览(158)

我目前在Flutter中尝试将Image资产放入Stack小部件时遇到了一个问题。我使用BoxFit.cover属性使图像适合Stack的尺寸,但不幸的是,它无法按预期工作。
下面是我使用的代码片段:

Stack(
    alignment: AlignmentDirectional.bottomCenter,
    children: [
      Image.asset(
        onboardingContents[index].image,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(32.0),
        child: GestureDetector(
          onTap: () => controller.nextPage(
              duration: Duration(milliseconds: 500),
              curve: Curves.easeIn),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50), color: Colors.white),
            height: sizeV * 6,
            width: sizeH * 60,
            child: const Center(
              child: Text(
                'Next',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      )
    ],
  );
2uluyalo

2uluyalo1#

你在堆栈中设置了alignment。这意味着如果图像比屏幕小,它应该居中对齐。删除alignment。如果你需要对齐容器,单独做。

roejwanj

roejwanj2#

首先你的图像是在容器的后面,要把它放在前面,你应该把它写在容器的下面,然后为了使图像适合容器,你应该使用positioned.fill()

Stack(
    children:[
    //container(),
    Positioned.fill(child:Image()),
])

相关问题