홈 페이지의 배경 이미지를 설정하려고합니다. 화면 시작 부분에서 이미지 위치를 얻고 너비는 채우지 만 높이는 채우지 않습니다. 내 코드에 뭔가 빠졌나요? Flutter에 대한 이미지 표준이 있습니까? 각 휴대폰의 화면 해상도에 따라 이미지 크기가 조정 되나요?
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")
]
)
)
);
}
}
답변
질문을 이해했는지 잘 모르겠지만 이미지가 전체 화면을 채우 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크기는 그에 따라 자식의 크기가되며 일반적으로 앱에 배경 이미지를 추가하려고 할 때 원하는 크기가 아닙니다.
이 다른 질문을 살펴보면 @ 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"),
)
],
)
);
}
답변
사용할 수 있습니다 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)),
);
}산출:
답변
당신이 사용할 수있는 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필요에 따라.
답변
나는 아래에 배경을 적용 할 수 있었다 Scaffold(심지어 그것의 AppBar)을 넣어 Scaffold아래에있는 A Stack와 설정 Container배경 이미지 세트와 함께 최초의 “레이어”의 fit: BoxFit.cover속성입니다.
모두 Scaffold와 AppBar가져야 backgroundColor같은 세트 Color.transparent와 elevation의은 AppBar0이어야한다.
Voilà! 이제 전체 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: () => {},
),
),
],
),
),
),
],
);
}
}답변
컨테이너를 사용하고 높이를 무한대로 표시 할 수 있습니다.
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',
),
),
));산출:
답변
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("images/background.png"),
fit: BoxFit.cover
),
),이것은 컨테이너 내부에서도 작동합니다.
