2024年4月24日

1. Flutter IgnorePointer & AbsorbPointer

如果您想禁用某个区域的触摸，或者换句话说，您想让触摸指针不起作用怎么办。在 Flutter 中，您可以使用 IgnorePointer 或AbsorbPointer，接下来我就会来介绍两者的区别。

使用 IgnorePointer
IgnorePointer的构造函数如下：

 const IgnorePointer({  
    Key key,  
    this.ignoring = true,  
    this.ignoringSemantics, Widget child, }

属性:

bool ignoring: 命中测试是否忽视小部件
Widget child: The widget to be rendered.

也就是说如果ignoring为true的话，所有发生在widget点击事件都将失效。

// 使用方法
IgnorePointer(ignoring: _ignoring,    child: MyWidget(),  )

使用AbsorbPointer

// `**构造函数：**`
const AbsorbPointer({    
Key key,    
this.absorbing = true,    
Widget child, 
this.ignoringSemantics,  
})

IgnorePointer和AbsorbPointer之间的区别

在上面的例子中，行为IgnorePointer和AbsorbPointer外观相似。那么，这两个小部件之间有什么区别。下面的例子使差异显而易见。

现在，我们有一个Stack由两个位置完全相同的按钮组成的。按钮 2 位于按钮 1 上方。按钮 2 被包裹在内IgnorePointer。单击按钮时，SnackBar将显示 a。

如果ignoring设置为true并且您单击按钮，您将看到SnackBar来自按钮 1。这意味着在按钮 2 上忽略指针，但在按钮 1 上检测到指针。
如果absorbing设置为true并且您单击按钮，则按钮 1 和按钮 2 都不会触发SnackBar. 这意味着指针被吸收而不是传递到下面的层AbsorbPointer。

这就是两者的区别。*ignoring忽略不影响事件响应，absorbing丢弃事件响应链直接终止*

2. Flutter中的混合模式(BlendMode)详解与实践

在Flutter中，BlendMode是一个枚举类型，它定义了当我们将一个图层叠加到另一个图层上时，两个图层之间的颜色应该如何混合。Flutter提供了多种混合模式，每种模式都有其特定的效果和用途。

混合模式的种类

Clear

Clear模式将完全透明化上层图层，结果只显示下层的颜色。

Src

Src模式仅显示上层图层的颜色，完全忽略下层图层。

Dst

Dst模式与Src相反，仅显示下层图层的颜色，完全忽略上层图层。

SrcOver

SrcOver是默认的混合模式。它将上层图层的颜色绘制到下层图层上，但会考虑下层图层的alpha值（透明度）。如果下层完全透明，则结果颜色与上层图层相同；如果下层完全不透明，则结果颜色是上下层颜色的混合。

DstOver

DstOver模式与SrcOver相反，它将下层图层的颜色绘制到上层图层上，但会考虑上层图层的alpha值。

SrcIn

SrcIn模式只在上层图层和下层图层都非透明的地方显示上层图层的颜色。如果任一图层透明，则结果颜色也是透明的。

DstIn

DstIn模式只在上层图层和下层图层都非透明的地方显示下层图层的颜色。

SrcOut

SrcOut模式只在上层图层透明而下层图层非透明的地方显示上层图层的颜色。

DstOut

DstOut模式只在上层图层非透明而下层图层透明的地方显示下层图层的颜色。

SrcATop

SrcATop模式会在上层图层和下层图层都非透明的地方显示上层图层的颜色，但如果上层图层透明，则显示下层图层的颜色。

DstATop

DstATop模式与SrcATop相反，它会在上层图层和下层图层都非透明的地方显示下层图层的颜色，但如果下层图层透明，则显示上层图层的颜色。

Xor

Xor模式会在上层图层和下层图层颜色不同的地方显示颜色，相同的地方则显示为透明。

Plus

Plus模式将上层图层和下层图层的颜色相加，不考虑alpha值。结果颜色可能会超过设备的颜色范围，因此可能需要额外的处理。

PlusDarker

PlusDarker模式与Plus类似，但结果颜色会向暗色方向调整，以避免颜色溢出。

Multiply

Multiply模式将上层图层和下层图层的颜色相乘，得到的结果颜色通常比两者都要暗。

Screen

Screen模式与Multiply相反，它将上层图层和下层图层的反色相乘，得到的结果颜色通常比两者都要亮。

Overlay

Overlay模式结合了Multiply和Screen的效果，根据上层图层的alpha值来决定使用哪种模式。

Darken

Darken模式会在上层图层和下层图层中选择较暗的颜色作为结果颜色。

Lighten

Lighten模式与Darken相反，它会在上层图层和下层图层中选择较亮的颜色作为结果颜色。

ColorDodge

ColorDodge模式会提亮下层图层的颜色，以反映上层图层的颜色。

ColorBurn

ColorBurn模式会加深下层图层的颜色，以反映上层图层的颜色。

HardLight

HardLight模式会根据上层图层的颜色来提亮或加深下层图层的颜色，取决于上层图层的亮度。

SoftLight

SoftLight模式与HardLight类似，但效果更加柔和。

Difference

Difference模式会从下层图层的颜色中减去上层图层的颜色，或从上层图层的颜色中减去下层图层的颜色，取决于哪个颜色的亮度更高。

Exclusion

Exclusion模式与Difference类似，但效果更加柔和，它会在两个颜色之间寻找一个中间值，以避免产生过于鲜艳的颜色。

3. 隐藏视图Widget的三种方式

// 例如：
Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
          
    // 方式一：if判断
            if(a=="显示")
              Text("显示"),
              
    // 方式二：Offstage组件  true时：隐藏，false时：显示
           Offstage(
             offstage: false,
             child: Text("显示"),
           ),
    // 方式三： Visibility    true时：显示，false时：隐藏
           Visibility(
               visible: true,
               child: Text("显示")
           )
          ],
        ),

Offstage和Visibility的区别：

1、Visibility 隐藏/可见，能保存组件的状态；Offstage不能保存组件的状态，组件重新加载。
2、当Offstage不可见（true）的时候，如果child有动画等，需要手动停掉，Offstage并不会停掉动画等操作。
3、当Offstage初始化不可见（true）时，子组件还是会还是会被构建和运行，只是UI不会显示出来而已，而Visibility初始化不可见（false）时,子组件会运行但是不会被构建（另外为了性能我们有时候可以直接使用if语句控制会更好,if语句为false时，组件既不会构建也不会运行）
4、Offstage隐藏时不占空间，Visibility可以设置隐藏时占据空间也可以不占据空间，默认隐藏时不占据空间

备注：Visibility隐藏时占据空间如下：

Visibility(
  visible:false,
  
  maintainAnimation: true,          ///默认false
  maintainSize: true,          ///默认false
  maintainState: true,   ///默认false
  
  child: Text("显示"),
),

强调：maintainSize就是保持大小不变，如果只设置这个属性，会报错，另外两个属性：maintainAnimation和maintainState也必须同时设置。

Flutter开发日常