我正在为主页设置背景图片。我正在从屏幕开始获取图像位置,并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return  Scaffold(
      body:  Container(
        child:  Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
             Image.asset("assets/images/bulb.jpg") 
          ]
        )
      )
    );
  }
}

当前回答

            Image.asset(
              "assets/images/background.png",
              fit: BoxFit.cover,
              height: double.infinity,
              width: double.infinity,
              alignment: Alignment.center,
            ),

如果仍然有problèm,似乎你的图像在高度和宽度上都不完美

其他回答

截图:


代码:

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

你可以使用下面的代码为你的应用程序设置背景图像:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/background.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        // use any child here
        child: null
      ),
    );
  }

如果你的容器的子部件是列小部件,你可以使用crossAxisAlignment: crossAxisAlignment。拉伸以使背景图像充满屏幕。

Stack(
   children: [
         SizedBox.expand(
              child: FittedBox(
                    fit: BoxFit.cover,
                    child: Image.asset(
                      Images.splashBackground,
                    ),
                 )
          ),
          your widgets
     ])

这帮助了我

我们可以使用Container并将其高度标记为无穷大

body: Container(
      height: double.infinity,
      width: double.infinity,
      child: FittedBox(
        fit: BoxFit.cover,
        child: Image.network(
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
        ),
      ),
    ));

输出:

以下是实现这一目标的方法。第一个例子是资产映像,第二个例子是网络映像。

当地的形象:

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  ),
  child: 
)

网络图片:

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage("https://picsum.photos/id/237/200/300"), 
        fit: BoxFit.cover),
  ),
  child:
)