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),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

运转成果如下:

Flutter 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: 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),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

运转成果如下:

Flutter Opacity 详解

完成淡入淡出作用

假如想要让子组件在可见和不行见之间切换,能够运用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,
        ),
      ),
    );
  }
}

运转成果如下:

Flutter Opacity 详解

能够看到,每次点击图片,它就会在彻底可见和彻底不行见之间切换,完成了淡入淡出的作用。

完成突变作用

假如想要让子组件在不同的通明度之间改动,能够运用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),
      ),
    );
  }
}

运转成果如下:

Flutter Opacity 详解

能够看到,文字会在不通明和通明之间不断地改动,完成了突变的作用。

完成遮罩作用

假如想要让子组件在某些情况下被遮挡,能够运用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),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

运转成果如下:

Flutter Opacity 详解

能够看到,当按钮被点击时,它会被一个半通明的灰色容器遮挡,并显现“Disabled”的文字,完成了遮罩的作用。

总结

Opacity是一个十分有用的小部件,能够让咱们轻松地完成子组件的通明度改动。它有两个参数,分别是opacity和alwaysIncludeSemantics,分别用于操控子组件的通明度和语义信息。 Opacity小部件能够用于完成淡入淡出、突变、遮罩等作用,只需要将它包裹在想要操控通明度的子组件外面,然后传入一个通明度的值即可。希望这篇文章对你有所协助。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。