Flutter 应用程序屏幕底部的背景图像答案

【问题标题】：Background image at bottom of screen in Flutter appFlutter 应用程序屏幕底部的背景图像
【发布时间】：2018-07-08 08:19:21
【问题描述】：

在我的颤振应用程序中，我试图在屏幕底部放置一个背景图像。我使用了一个堆栈来将背景与我的应用内容分开，并使用一个带有扩展容器的列来将我的图像推到底部。

不幸的是，这种组合会导致我的应用崩溃。如果我从背景中删除该列，它可以正常工作。所以一些关于计算布局的事情失败了。

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 来说是不可能的布局请求吗？

【问题讨论】：

标签： layout dart flutter

【解决方案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"),
    )
  ],
);

【讨论】：

alignment: Alignment.bottomLeft，解决了我的图像上/下位置问题。谢谢。

【解决方案2】：

如果您需要更高的精度，也可以像这样手动将装饰图像与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

【讨论】：