我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?
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")
]
)
)
);
}
}
当前回答
根据您的需求，可以采用以下两种方式:
背景图像跨越应用程序栏
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
背景图像没有跨越应用程序栏
Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
额外的:
要只向appBar添加背景图像，请参考此答案
其他回答
根据您的需求，可以采用以下两种方式:
背景图像跨越应用程序栏
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
背景图像没有跨越应用程序栏
Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
额外的:
要只向appBar添加背景图像，请参考此答案
@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:
[
//
],
),
)));
}
我可以在脚手架下面应用背景(甚至是AppBar)，把脚手架放在堆栈下面，并在第一个“层”中设置一个容器，背景图像设置和适合:BoxFit。封面的财产。
脚手架和AppBar都必须将backgroundColor设置为Color。透明的，AppBar的海拔必须为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: () => {},
),
),
],
),
),
),
],
);
}
}
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)),
);
}
