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

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,似乎你的图像在高度和宽度上都不完美

其他回答

我不确定我是否理解你的问题,但如果你想让图像填充整个屏幕,你可以使用一个适合BoxFit.cover的DecorationImage。

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

对于你的第二个问题,这里有一个关于如何将依赖分辨率的资产图像嵌入到应用程序中的文档链接。

如果你使用一个容器作为脚手架的主体,它的大小将相应的其子元素的大小,这通常不是你想要的,当你试图添加一个背景图像到你的应用程序。

再看另一个问题,@ colin -jackson也建议使用Stack而不是Container作为脚手架的主体,它肯定能达到你想要的效果。

这就是我的代码的样子

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Hello background"),
        )
      ],
    )
  );
}

我知道这个问题已经有很多答案了,但是这个解决方案在背景图像周围有一个颜色梯度,我想你会喜欢的

import 'package:flutter/material.dart';

class BackgroundImageExample extends StatelessWidget {
  const BackgroundImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        backgroudImage(),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: SafeArea(
            child: Column(
              children: [
                // your body content here
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget backgroudImage() {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.black, Colors.black12],
        begin: Alignment.bottomCenter,
        end: Alignment.center,
      ).createShader(bounds),
      blendMode: BlendMode.darken,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('your image here'), /// change this to your  image directory 
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
          ),
        ),
      ),
    );
  }
}
    @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/bgmain.jpg'),
            //fit: BoxFit.cover 
            fit: BoxFit.fill),
      ),
      child: Column(
        children: 
        [
          //
        ],
      ),
    )));
  }
import 'package:flutter/material.dart';

void main() => runApp(DestiniApp());

class DestiniApp extends StatefulWidget {
  @override
  _DestiniAppState createState() => _DestiniAppState();
}

class _DestiniAppState extends State<DestiniApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Color.fromRGBO(245, 0, 87, 1),
            title: Text(
              "Landing Page Bankground Image",
            ),
          ),
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: ExactAssetImage("images/appBack.jpg"),
                  fit: BoxFit.cover
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出: