需要用于聊天屏幕的背景图片,用于不同的屏幕宽高比和纵向和横向模式

时间:2017-12-21 04:50:56

标签: flutter

我们想在聊天屏幕上使用背景图片。为此,我们创建了一个可图块化的图片。 Mobile支持许多宽高比和纵向和横向。 Flutter支持该用例的好方法是什么?一个想法是加入瓷砖并在运行时为背景裁剪图片。那可能吗?对此有直接的支持吗?

2 个答案:

答案 0 :(得分:1)

您需要阅读有关响应式应用的flutter文档

Creating Responsive Apps

另外,请查看捕获设备方向的MediaQueryData类。您可以通过查看这些属性来切换背景

MediaQueryData

答案 1 :(得分:1)

这适用于landscape和potrait以及不同的设备分辨率。可以直接在图片上设置不透明度,以便在运行时保存该图层。请确保您提供不同分辨率的背景。 https://flutter.io/assets-and-images/

注意:renderMessageListContent是前景中的内容!

 @override
  Widget build(BuildContext context) => new Stack(children: <Widget>[
        new Positioned.fill(
            child: new Opacity(
          opacity: 0.2,
          child: new Image.asset(
            'assets/chat_background.png',
            repeat: ImageRepeat.repeat,
            fit: BoxFit.none
          ),
        )),
        new Opacity(
            opacity: 0.15,
            child: new Container(color: Theme.of(context).primaryColor)),
        renderMessageListContent
      ]);