如何在 Flutter 中设置背景图片？
我正在尝试为主页设置背景图像。我从屏幕开始获取图像位置并填充宽度而不是高度。我的代码中是否缺少某些内容？ Flutter 有图像标准吗？图像是否根据每部手机的屏幕分辨率缩放？
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")
]
)
)
);
}
}
我不确定我是否理解您的问题，但如果您希望图像填满整个屏幕，您可以使用 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 */,
),
);
}
}
对于您的第二个问题，这里有一个指向 documentation 的链接，该链接介绍了如何将依赖于分辨率的资产图像嵌入到您的应用程序中。
如果您使用 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"),
)
],
)
);
}
截屏：
https://i.stack.imgur.com/se2Co.png
代码：
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
您可以使用 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。
ShaderMask 内，因此放入 image: 名称是行不通的。
通过将 Scaffold 放在 Stack 下并在设置了背景图像的第一个“层”中设置 Container，我能够在 Scaffold（甚至是 AppBar）下应用背景6}财产。
Scaffold 和 AppBar 都必须将 backgroundColor 设置为 Color.transparent，并且 AppBar 的 elevation 必须为 0（零）。
瞧！现在您在整个 Scaffold 和 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: () => {},
),
),
],
),
),
),
],
);
}
}
我们可以使用 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',
),
),
));
输出：
https://i.stack.imgur.com/bFuVr.png
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.png'),fit:BoxFit.cover
)
),
);
其他答案很棒。这是可以做到的另一种方式。
在这里，我使用 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
),
),
),
),
);
}
https://i.stack.imgur.com/FR2I4.png
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("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>[],
),
),
您可以使用以下代码为您的应用设置背景图片：
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 使您的背景图像填满屏幕。
我知道这个问题已经有很多答案了，但是这个解决方案带有背景图像周围的颜色渐变，我想你会喜欢的
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),
),
),
),
);
}
}
Stack(
children: [
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image.asset(
Images.splashBackground,
),
)
),
your widgets
])
这对我有帮助
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
),
),
),
),
),
);
}
}
https://i.stack.imgur.com/TGNf0.png
@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:
[
//
],
),
)));
}
您可以使用 FractionallySizedBox
有时 decoratedBox 不会覆盖全屏大小。我们可以通过用 FractionallySizedBox Widget 包装它来修复它。在这个小部件中，我们给出了宽度因子和高度因子。
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,
),
),
),
),
),
],
),
),
),
);
}
}
https://i.stack.imgur.com/af1rg.png
Image.asset(
"assets/images/background.png",
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
),
如果仍然有问题，您的图像似乎在高度和宽度上并不完美
constraints: BoxConstraints.expand()width: double.infinity添加到带有图像的容器中。