Flutter的不透明度小部件

📌 相关文章

📜 Flutter的不透明度小部件

📅 最后修改于: 2021-09-02 05:23:20 🧑 作者: Mango

使其子项部分透明的 Opacity 小部件。此类将其子项着色为中间缓冲区，然后将子项合并回部分透明的场景中。对于 0.0 和 1.0 以外的不透明度值，此类相对昂贵，因为它需要将子级着色为中间缓冲区。对于值 0.0，孩子根本没有着色。对于值 1.0，子项被着色而没有中间缓冲区。

构造函数：

Syntax:
Opacity({Key key,
@required double opacity, 
bool alwaysIncludeSemantics: false, 
Widget child})

特性：

child：树中此小部件下方的小部件。
hashCode：此对象的哈希码。
key：控制一个小部件如何替换树中的另一个小部件。
runtimeType：对象的运行时类型的表示。
不透明度：缩放孩子的 alpha 值的分数。

例子：

下面应用程序中的图像具有 0.5 不透明度。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipOval',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
  
class _MyHomePAGEState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: Image.network(
              'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
              color: Color.fromRGBO(255, 255, 255, 0.5),
              colorBlendMode: BlendMode.modulate
          )
      ),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}
  
class MyClip extends CustomClipper {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
  
  bool shouldReclip(oldClipper) {
    return false;
  }
}

输出：

解释：

首先将主应用程序初始化为无状态小部件。
其次，根据需要设计主要小部件。
使用脚手架小部件构建Appbar 。
现在使用脚手架小部件主体内的Image.Network小部件。
最后，使用colorBlendMode设置不透明度。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?