flutter - 如何在覆盖全屏的背景图像上创建一列小部件？
问题描述
我正在尝试创建以下内容：
我已经设法让背景图像工作，并且还让图像在顶部工作，使用：
Scaffold(
appBar: AppBar(..),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: MemoryImage(
_selectedImage
),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
color: Colors.black.withOpacity(0.4),
// height: 450,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: MemoryImage(
_finalImage == null ? _selectedImage: img.encodePng(_finalImage)
),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.symmetric(
horizontal: 30,
vertical: 80 - 80 * 0.6,
),
),
Center(
child: _working ? _Image2Widget() : Container(),
),
Center(
child: _working2 ? _Image3Widget() : Container(),
),
],
),
),
),
),
);
上面的代码产生以下内容：
但是，当我将图像包装Container()在 a 中时Column()：
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
color: Colors.black.withOpacity(0.4),
// height: 450,
child: Stack(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: MemoryImage(
_finalImage == null ? _selectedImage: img.encodePng(_finalImage)
),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.symmetric(
horizontal: 30,
vertical: 80 - 80 * 0.6,
),
),
],
),
Center(
child: _working ? _Image2Widget() : Container(),
),
Center(
child: _working2 ? _Image3Widget() : Container(),
),
],
),
),
),
),
顶部的图像消失，只留下背景
为什么当我将它包装在列中时它现在可以工作？
如何获得我想要的外观？
解决方案
您应该为具有非模糊图像的容器指定大小。
你可以通过指定它的高度来做到这一点：
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.black.withOpacity(0.4),
child: Column(
children: [
Container(
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 30.0),
AspectRatio(
aspectRatio: 3,
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.4),
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text('Spiders are cool...',
style: TextStyle(
color: Colors.white, fontSize: 24.0)),
),
),
),
],
),
),
),
),
],
),
);
}
}
或者通过将其封装在一个Expanded小部件中：
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.black.withOpacity(0.4),
child: Column(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
),
),
const SizedBox(height: 30.0),
AspectRatio(
aspectRatio: 3,
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.4),
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text('Spiders are cool...',
style: TextStyle(
color: Colors.white, fontSize: 24.0)),
),
),
),
],
),
),
),
),
],
),
);
}
}
在这种情况下，我的偏好是将其封装在一个AspectRatio小部件中：
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
padding: EdgeInsets.all(30.0),
color: Colors.black.withOpacity(0.4),
child: Column(
children: [
AspectRatio(
aspectRatio: 1,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage('spiders/6.jpg'),
fit: BoxFit.cover,
),
),
),
),
const SizedBox(height: 30.0),
AspectRatio(
aspectRatio: 3,
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.4),
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text('Spiders are cool...',
style: TextStyle(
color: Colors.white, fontSize: 24.0)),
),
),
),
],
),
),
),
),
],
),
);
}
}
推荐阅读
- design-patterns - 直接将消息代理与最终用户客户端一起使用
- java - 是否可以调用在 1 个服务中返回 2 个不同类型列表的 2 个服务？
- python - 如何使用 `construct_change_message` 在我自己的视图中创建一个 `change_message` 以在内置的 `LogEntry` 模型中记录我的操作？在 django
- rest - TJSON.JsonToObject 不通过设置器
- android - 如何在一个 Recycler 视图中显示两个不同的独立对象/类？
- python-3.x - 使用 pyro 的深度生成模型中的小批量概念
- express - socket.io 的快速代理
- c# - 为什么重试提示只显示一次？
- java - 我们可以在单个标签上链接两个 java 文件吗
- c# - 显示列表中的重复项 c#