在我的flutter应用程序中，我试图将背景图像放置在屏幕底部。我使用堆栈将背景与应用程序内容分开，并使用带有扩展容器的列将图片推到底部。
不幸的是，这种组合导致我的应用崩溃。如果我从背景中删除该列，则效果很好。所以计算布局失败。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.grey,
),
home: Scaffold(
body: Background(),
),
);
}
}
class Background extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
child: Container(),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background.png"),
fit: BoxFit.fitWidth,
),
),
),
],
),
Center(
child: Text("App content would be here"),
),
],
);
}
}
堆栈跟踪：
flutter: ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
flutter: The following assertion was thrown resolving an image codec:
flutter: Unable to load asset: assets/background.png
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
flutter: <asynchronous suspension>
flutter: #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:427:44)
flutter: <asynchronous suspension>
flutter: #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:412:14)
flutter: #3 ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:86)
flutter: #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
flutter: #5 ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:266:63)
flutter: #6 SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
flutter: #7 ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:264:30)
flutter: #8 DecorationImagePainter.paint (package:flutter/src/painting/decoration_image.dart:239:55)
flutter: #9 _BoxDecorationPainter._paintBackgroundImage (package:flutter/src/painting/box_decoration.dart:395:19)
flutter: #10 _BoxDecorationPainter.paint (package:flutter/src/painting/box_decoration.dart:413:5)
flutter: #11 RenderDecoratedBox.paint (package:flutter/src/rendering/proxy_box.dart:1876:16)
flutter: #12 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #13 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #14 _RenderFlex&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2222:15)
flutter: #15 RenderFlex.paint (package:flutter/src/rendering/flex.dart:931:7)
flutter: #16 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #17 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #18 _RenderStack&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2222:15)
flutter: #19 RenderStack.paintStack (package:flutter/src/rendering/stack.dart:604:5)
flutter: #20 RenderStack.paint (package:flutter/src/rendering/stack.dart:612:7)
flutter: #21 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #22 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #23 _RenderCustomMultiChildLayoutBox&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2222:15)
flutter: #24 RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:360:5)
flutter: #25 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #26 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #27 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:127:15)
flutter: #28 _RenderInkFeatures.paint (package:flutter/src/material/material.dart:456:11)
flutter: #29 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #30 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #31 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:127:15)
flutter: #32 RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:1644:15)
flutter: #33 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #34 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #35 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:127:15)
flutter: #36 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #37 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:131:13)
flutter: #38 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:127:15)
flutter: #39 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2024:7)
flutter: #40 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:11)
flutter: #41 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:791:29)
flutter: #42 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:272:19)
flutter: #43 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13)
flutter: #44 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
flutter: #45 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
flutter: #46 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
flutter: #47 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
flutter: #48 _invoke (dart:ui/hooks.dart:120:13)
flutter: #49 _drawFrame (dart:ui/hooks.dart:109:3)
flutter:
flutter: Image provider: AssetImage(bundle: null, name: "assets/background.png")
flutter: Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#3853b(), name: "assets/background.png",
flutter: scale: 1.0)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Error -32000 received from application: Server error
有什么建议吗？这是Flutter不可能的布局请求吗？
答案 0 :(得分：1)
您可以直接将Image.asset与alignment: Alignment.bottomCenter结合使用
Stack(
children: <Widget>[
Positioned.fill(
child: Image.asset(
"assets/background.jpg",
fit: BoxFit.fitWidth,
alignment: Alignment.bottomLeft,
),
),
Center(
child: Text("App content would be here"),
)
],
);
答案 1 :(得分：0)
如果您需要更高的精度，您也可以像这样手动使用 Alignment() 定位或对齐装饰图像。
Container(
padding: EdgeInsets.all(18),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/books.png'),
alignment: Alignment(-1, -0.5),
// This align it Center Left + a little bit up
),
),
Alignment(0.0, 0.0) 表示矩形的中心。 -1.0 到 +1.0 的距离是矩形一侧到矩形另一侧的距离。
官方文档中的更多信息 https://api.flutter.dev/flutter/painting/Alignment-class.html