flutter - 具有两种不同不透明度的 Flutter Container
问题描述
我想制作具有两种不同不透明度的容器,以使屏幕更加专注于某些图像,我使用了堆栈和容器,是否可以制作这样的东西?
这是我的代码示例,
Stack(
children: <Widget>[
Image(),
Container(
height: double.infinity,
width: double.infinity,
color: Colors.black.withOpacity(0.4),
),
先谢谢各位了
解决方案
我不确定这是一个好的解决方案。它会成功的。
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: FirstPage()));
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Demo")),
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.network(
"https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg",
fit: BoxFit.cover,
),
CustomPaint(
painter: MyPainter(),
)
],
),
);
}
}
class MyPainter extends CustomPainter {
final Color color;
final double opacity;
///ratio of max(height, width)
final double radius;
MyPainter({
Color color,
double radius = 0.3,
this.opacity = 0.4,
}) : assert(opacity != null && opacity >= 0.0 && opacity <= 1.0),
color = color ?? Colors.black,
radius = radius ?? 0.3;
@override
void paint(Canvas canvas, Size size) {
var rect = Offset.zero & size;
var gradient = RadialGradient(
center: Alignment.center,
radius: radius,
colors: [const Color(0x0000000), color.withOpacity(opacity)],
stops: [1.0, 1.0],
);
canvas.drawRect(
rect,
Paint()..shader = gradient.createShader(rect),
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
推荐阅读
- javascript - unity3d webgl 在选项卡或浏览器不活动时静音
- firebase - firebase 函数配置 - 删除数据
- java - 从复杂的服务器响应中提取字段
- javascript - 如何将连续数字作为字符串推送到 json 对象中?
- angular - 使用异步管道时缓存发出的值以便能够过滤掉未来的发出
- python - PyTorch Tensorboard 与文档中的描述不符
- apache-spark - Spark+Mesos Initial job 没有接受任何资源;检查您的集群 UI 以确保工作人员已注册并拥有足够的资源
- sql - SQL 查询以确定是否有任何与曲目无关的艺术家
- sql - SQL : 获取相关属性
- javascript - JQuery 表不会加载。,无法加载资源