如何在扑动中设置背景图像?

小开

最佳答案

我不确定我是否理解了你的问题，但如果你想让图像填充整个屏幕，你可以使用DecorationImage与BoxFit.cover匹配。

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

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

小开

如果你使用Container作为Scaffold的主体，它的大小将相应地是它的子图像的大小，当你试图向应用程序添加背景图像时，这通常不是你想要的。

看看另一问题，@ colin -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"),
)
],
)
);
}

小开

你可以使用Stack来使图像伸展到全屏。

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

注意:如果你使用Scaffold，你可以根据需要将Stack放在Scaffold中，带或不带AppBar。

小开

截图:

代码:

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

小开

我能够在Scaffold(甚至是AppBar)下面应用背景，方法是将Scaffold放在Stack下面，并在第一个“层”中设置Container，设置背景图像和fit: BoxFit.cover属性。

Scaffold和AppBar都必须将backgroundColor设置为Color.transparent，并且AppBar的elevation必须为0(零)。

瞧!现在你在整个脚手架和AppBar下面有了一个漂亮的背景!：）

import 'package:flutter/material.dart';
import 'package:mynamespace/ui/shared/colors.dart';
import 'package:mynamespace/ui/shared/textstyle.dart';
import 'package:mynamespace/ui/shared/ui_helpers.dart';
import 'package:mynamespace/ui/widgets/custom_text_form_field_widget.dart';


class SignUpView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack( // <-- STACK AS THE SCAFFOLD PARENT
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"), // <-- BACKGROUND IMAGE
fit: BoxFit.cover,
),
),
),
Scaffold(
backgroundColor: Colors.transparent, // <-- SCAFFOLD WITH TRANSPARENT BG
appBar: AppBar(
title: Text('NEW USER'),
backgroundColor: Colors.transparent, // <-- APPBAR WITH TRANSPARENT BG
elevation: 0, // <-- ELEVATION ZEROED
),
body: Padding(
padding: EdgeInsets.all(spaceXS),
child: Column(
children: [
CustomTextFormFieldWidget(labelText: 'Email', hintText: 'Type your Email'),
UIHelper.verticalSpaceSM,
SizedBox(
width: double.maxFinite,
child: RaisedButton(
color: regularCyan,
child: Text('Finish Registration', style: TextStyle(color: white)),
onPressed: () => {},
),
),
],
),
),
),
],
);
}
}

小开

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

这也适用于容器内部。

小开

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

输出:

小开

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

小开

要在添加子图像后不收缩地设置背景图像，请使用此代码。

  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>[],
),
),

小开

你可以使用FractionallySizedBox

有时decoratedBox不覆盖全屏大小。我们可以通过使用FractionallySizedBox Widget包装它来修复它。在这个小部件中，我们给出宽度因子和高度因子

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

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

示例:hightfactor = 0.3表示应用高度的30%。Widthfactor = 0.4表示应用宽度的40%。

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

Tip: FractionallySizedBox与stack小部件配合得很好。所以你可以很容易地在堆栈小部件的背景图像上添加按钮，头像，文本，而在行和列中你不能这样做。

欲了解更多信息，请查看此项目的repository这个项目的Github存储库链接

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

< p >输出:

< / p >

小开

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

< p >输出:

< / p >

小开

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

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.stretch来使你的背景图像填充屏幕。

小开

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

这里我使用SizedBox.expand()来填充可用空间，并将严格的约束传递给它的子对象(Container)。
BoxFit.cover enum缩放图像并覆盖整个屏幕

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

小开

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

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:
[
//
],
),
)));
}

小开

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

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

小开

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

这帮助了我

小开

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

当地的形象:

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:
)