flutter 毛玻璃

代码:

import 'package:flutter/material.dart';
import 'dart:ui';//过滤器组件

class MaoBaoLi extends StatelessWidget {
const MaoBaoLi({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ConstrainedBox(
//约束条件
constraints: const BoxConstraints.expand(),//随着里面的东西扩展
child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578312966654&di=09a975b6c05a1447fc6f8aeae463cf41&imgtype=0&src=http%3A%2F%2Fp2.qhimgs4.com%2Ft0128307802c64fd817.jpg'),
),//约束性盒子,添加额外的约束条件 约束在child 上
Center(
//可裁切的矩形
child: ClipRect(
//背景过滤器
child: BackdropFilter(
//图片过滤器
filter: ImageFilter.blur(sigmaX:5.0 ,sigmaY: 5.0),
//透明度
child: Opacity(opacity: 0.5,child: Container(
width: 500.0,
height: 700.0,
decoration: BoxDecoration(color: Colors.orange.shade200),//盒子修饰器
child: Center(
child: Text('嵌套真多',style: Theme.of(context).textTheme.display2,),//字体皮肤---就是字号的区别
 
),
),),
),


),
)
],
 

),//层叠组件
);
}
}
总结:

毛玻璃

 

图片过滤器

filter:ImageFilter.blur//模糊效果

stack()//层叠组件

猜你喜欢

转载自www.cnblogs.com/pp-pping/p/12180379.html