Question

我正在尝试为主页设置背景图片。我从屏幕的开始处获取图像位置并填充宽度而不是高度。我在代码中遗漏了什么吗？是否有颤振的图像标准？图像是否根据每部手机的屏幕分辨率进行缩放？

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

Answer 1

我不确定我理解你的问题，但如果你想让图片填满整个屏幕，你可以使用DecorationImage BoxFit.cover。{/ p>

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

关于第二个问题，这里有documentation指向如何将依赖于分辨率的资产图片嵌入到您的应用中的链接。

Answer 2

如果您使用Container作为Scaffold的正文，则其大小将相应于其子级的大小，通常这不是您在尝试添加背景图片时所需的大小到你的应用程序。

关注this other问题，@ collin-jackson还建议使用Stack代替Container作为Scaffold的正文，它肯定会做你想要的实现。

这就是我的代码的样子

@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"),
        )
      ],
    )
  );
}

Answer 3

我们可以使用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',
        ),
      ),
    ));

输出：

Answer 4

body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),
);

Answer 5

您可以使用Stack将图像拉伸到全屏。

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

注意：（可选）如果使用的是Scaffold，则可以根据需要将Stack放在有或没有Scaffold的{{1}}内。

Answer 6

您可以使用DecoratedBox。

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

输出：

Answer 7

要在添加子项后设置背景图像而不会缩小，请使用此代码。

  body: Container(
    constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/aaa.jpg"),
        fit: BoxFit.cover,
        )
      ),

    //You can use any widget
    child: Column(
      children: <Widget>[],
    ),
    ),

Answer 8

您可以使用FractionallySizedBox

有时decoratedBox不能覆盖全屏尺寸。我们可以通过使用FractionallySizedBox Widget包装它来修复它。在此小部件中，我们给出widthfactor和heightfactor。

widthfactor显示[FractionallySizedBox]小部件应占应用程序宽度的_____百分比。

heightfactor显示[FractionallySizedBox]小部件应占应用程序高度的_____百分比。

示例：heightfactor = 0.3表示应用程序高度的30％。 widthfactor = 0.4表示应用程序宽度的40％。

        Hence, for full screen set heightfactor = 1.0 and widthfactor = 1.0

Tip：FractionallySizedBox与stack小部件配合得很好。这样一来，您就可以轻松地在堆栈小部件中的背景图像上方添加按钮，头像，文本，而在行和列中则无法这样做。

有关更多信息，请查看该项目的存储库 github repository link for this project

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Container(
                child: FractionallySizedBox(
                  heightFactor: 1.0,
                  widthFactor: 1.0,
                  //for full screen set heightFactor: 1.0,widthFactor: 1.0,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/1.jpg"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

Answer 9

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
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出：

Answer 10

通过将import pyglet from gym.envs.classic_control import rendering screen_width = 600 screen_height = 400 table_radius = 200 viewer = rendering.Viewer(screen_width, screen_height + 20) table = rendering.make_circle(radius=table_radius, filled=False) table_trans = rendering.Transform() table.add_attr(table_trans) table_trans.set_translation(screen_width / 2, screen_height / 2) viewer.add_geom(table) text = 'This is a test but it is not visible' label = pyglet.text.Label(text, font_size=36, x=10, y=10, anchor_x='left', anchor_y='bottom', color=(255, 123, 255, 255)) label.draw() viewer.render(return_rgb_array=False) input()放在Scaffold下并设置AppBar，我能够在Scaffold（甚至是Stack）之下应用背景设置了背景图片并具有Container属性的第一个“图层”中。

fit: BoxFit.cover和Scaffold都必须将AppBar设置为backgroundColor，而Color.transparent的{{1}}必须为0（零）。

Voilà！现在您在整个Scaffold和AppBar下方都有一个漂亮的背景！：）

elevation

Answer 11

decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("images/background.png"),
        fit: BoxFit.cover
      ),
    ),

这在容器内也可以使用。

Answer 12

您可以使用以下代码为您的应用设置背景图片：

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
      ),
    );
  }

如果您的 Container 的子项是 Column 小部件，您可以使用 crossAxisAlignment: CrossAxisAlignment.stretch 使您的背景图像填满屏幕。

Answer 13

其他答案很棒。这是另一种方式。

在这里，我使用 SizedBox.expand() 来填充可用空间并为其子项（容器）传递严格的约束。
BoxFit.cover 枚举以缩放图像并覆盖整个屏幕

 Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand( // -> 01
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,    // -> 02
            ),
          ),
        ),
      ),
    );
  }

Flutter SDK设置背景图像

13 个答案: