Flutter Opacity:怎么操控子组件的通明度
在Flutter中,有许多小部件能够协助咱们完成各种各样的作用,其中一个十分有用的小部件就是Opacity。Opacity能够让咱们轻松地操控子组件的通明度,然后完成淡入淡出、突变、遮罩等作用。本文将介绍Opacity的基本概念、参数、作用以及运用示例。
什么是Opacity
Opacity是一个继承自SingleChildRenderObjectWidget的小部件,它的作用是给子组件增加一个通明度的属性。通明度的值是一个0到1之间的浮点数,0表明彻底不行见,1表明彻底可见,中心的值表明不同程度的通明。Opacity小部件会依据通明度的值来调整子组件的alpha通道,然后完成通明作用。
Opacity有哪些参数
Opacity小部件有两个参数,分别是opacity和alwaysIncludeSemantics。
- opacity:这个参数是有必要的,它表明子组件的通明度,取值范围是0到1之间。假如传入一个负数或许大于1的数,会抛出异常。假如传入一个null值,会被默以为0。
- alwaysIncludeSemantics:这个参数是可选的,它是一个布尔值,用于操控是否在通明度为0的时分仍然保留子组件的语义信息。默认情况下,这个参数为false,也就是说当通明度为0的时分,子组件会被彻底疏忽,不会呼应任何事情或许辅佐功用。假如设置为true,那么即便通明度为0,子组件仍然会保留其语义信息,能够被点击或许读取。这个参数的作用主要是为了提高无障碍访问的体会。
怎么运用Opacity
Opacity小部件的运用十分简略,只需要将它包裹在想要操控通明度的子组件外面,然后传入一个通明度的值即可。下面是一个简略的示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Opacity Demo'),
),
body: Center(
child: Opacity(
opacity: 0.5, // 设置通明度为0.5
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Hello Flutter',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
),
),
),
);
}
}
运转成果如下:

能够看到,蓝色的容器和白色的文字都变得半通明了。假如想要让文字不受通明度的影响,能够把Opacity小部件放在文字的外面,而不是容器的外面,如下:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Opacity Demo'),
),
body: Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue.withOpacity(0.5), // 设置容器色彩的通明度为0.5
child: Center(
child: Opacity(
opacity: 1.0, // 设置文字的通明度为1.0,即不通明
child: Text(
'Hello Flutter',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
),
),
),
);
}
}
运转成果如下:

完成淡入淡出作用
假如想要让子组件在可见和不行见之间切换,能够运用Opacity小部件来完成淡入淡出的作用。例如,下面的代码展现了怎么运用Opacity小部件来完成一个图片的淡入淡出作用:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Opacity Demo'),
),
body: Center(
child: FadeInOutImage(),
),
),
);
}
}
class FadeInOutImage extends StatefulWidget {
@override
_FadeInOutImageState createState() => _FadeInOutImageState();
}
class _FadeInOutImageState extends State<FadeInOutImage> {
double _opacity = 1.0; // 界说一个通明度的变量
@override
Widget build(BuildContext context) {
return GestureDetector( // 运用手势检测器来监听点击事情
onTap: () {
setState(() { // 点击时改动通明度的值
_opacity = _opacity == 1.0 ? 0.0 : 1.0;
});
},
child: Opacity( // 运用Opacity小部件来操控图片的通明度
opacity: _opacity,
child: FlutterLogo(
size: 300,
),
),
);
}
}
运转成果如下:

能够看到,每次点击图片,它就会在彻底可见和彻底不行见之间切换,完成了淡入淡出的作用。
完成突变作用
假如想要让子组件在不同的通明度之间改动,能够运用Opacity小部件来完成突变的作用。例如,下面的代码展现了怎么运用Opacity小部件来完成一个文字的突变作用:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Opacity Demo'),
),
body: Center(
child: GradientText(),
),
),
);
}
}
class GradientText extends StatefulWidget {
@override
_GradientTextState createState() => _GradientTextState();
}
class _GradientTextState extends State<GradientText> {
double _opacity = 0.0; // 界说一个通明度的变量
@override
void initState() {
super.initState();
_changeOpacity(); // 在初始化时调用改动通明度的方法
}
void _changeOpacity() async { // 界说一个异步的方法来改动通明度的值
while (true) { // 运用一个无限循环来不断地改动通明度的值
await Future.delayed(Duration(seconds: 1)); // 每隔一秒履行一次
setState(() { // 改动状况
_opacity = _opacity == 0.0 ? 1.0 : 0.0; // 假如通明度为0,就改为1,反之亦然
});
}
}
@override
Widget build(BuildContext context) {
return Opacity( // 运用Opacity小部件来操控文字的通明度
opacity: _opacity,
child: Text( // 运用文字作为子组件
'Hello Flutter',
style: TextStyle(color: Colors.blue, fontSize: 24),
),
);
}
}
运转成果如下:

能够看到,文字会在不通明和通明之间不断地改动,完成了突变的作用。
完成遮罩作用
假如想要让子组件在某些情况下被遮挡,能够运用Opacity小部件来完成遮罩的作用。例如,下面的代码展现了怎么运用Opacity小部件来完成一个按钮的遮罩作用:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Opacity Demo'),
),
body: Center(
child: MaskedButton(),
),
),
);
}
}
class MaskedButton extends StatefulWidget {
@override
_MaskedButtonState createState() => _MaskedButtonState();
}
class _MaskedButtonState extends State<MaskedButton> {
bool _isDisabled = false; // 界说一个布尔值来表明按钮是否被禁用
@override
Widget build(BuildContext context) {
return Stack( // 运用Stack小部件来叠加两个子组件
alignment: Alignment.center, // 设置对齐方式为居中
children: [
ElevatedButton( // 运用ElevatedButton作为底层的子组件
onPressed: _isDisabled ? null : () { // 依据_isDisabled的值来决议是否呼应点击事情
setState(() { // 改动状况
_isDisabled = !_isDisabled; // 反转_isDisabled的值
});
},
child: Text('Click Me'), // 设置按钮的文字
),
IgnorePointer(
child: Opacity( // 运用Opacity作为顶层的子组件
opacity: _isDisabled ? 0.9 : 0.0, // 依据_isDisabled的值来设置通明度,假如为true,就设置为0.9,不然设置为0
// alwaysIncludeSemantics: true,
child: Container( // 运用容器作为子组件
width: 100,
height: 50,
color: Colors.grey, // 设置容器的色彩为灰色
child: Center( // 在容器中居中显现一个文字
child: Text(
'Disabled',
style: TextStyle(color: Colors.white),
),
),
),
),
),
],
);
}
}
运转成果如下:

能够看到,当按钮被点击时,它会被一个半通明的灰色容器遮挡,并显现“Disabled”的文字,完成了遮罩的作用。
总结
Opacity是一个十分有用的小部件,能够让咱们轻松地完成子组件的通明度改动。它有两个参数,分别是opacity和alwaysIncludeSemantics,分别用于操控子组件的通明度和语义信息。 Opacity小部件能够用于完成淡入淡出、突变、遮罩等作用,只需要将它包裹在想要操控通明度的子组件外面,然后传入一个通明度的值即可。希望这篇文章对你有所协助。