Opacity Widget

一个可以让子控件透明度发生变化的控件.

构造函数说明

const Opacity({Key? key,required this.opacity,//透明度,this.alwaysIncludeSemantics = false,Widget? child,})

opacity:设置透明度,当设置为0时,子控件不可见,在屏幕上不占用空间,但是仍然在Widget Tree中.
当opacity的值不在[0,1]之间,子控件先会绘制到缓冲区,然后在绘制到屏幕.
alwaysIncludeSemantics:当该值设置为true,并且opacity=0时,虽然子控件不可见,但是在屏幕上会占用子控件大小的空间.

当[Image]、[Color]使用Opacity设置透明度在[0,1]之间时,使用Image\Color更高效.

 //方案一Opacity(opacity: 0.5,child: Container(color: Color.fromRGBO(0, 0, 255, 1),width: 60,height: 60,),)//方案二 更高效,切效果和方案一一样Container(color: Color.fromRGBO(0, 0, 255, 0.5),width: 60,height: 60,)

Offstage Widget

可以控制子控件是否显示

构造函数

const Offstage({ Key? key, this.offstage = true, Widget? child })

offstage: 当offstage=false,子控件(child)可见;
当offstaged=true是,子控件不可见;子控件在Widget Tree,不进行绘制,不会命中测试;也不占用空间;子控件仍处于active状态;子控件动画仍在进行,所以子控件有动画时,需要手动停止掉动画;

Offstage(offstage: false,child: GestureDetector(onTap: () {print("**** on pressed ***");},child: Container(width: 60,height: 60,color: Colors.deepPurple,),),)

Visibility Widget

控制子控件是否可见

构造函数

  const Visibility({Key? key,required this.child,this.replacement = const SizedBox.shrink(),this.visible = true,this.maintainState = false,this.maintainAnimation = false,this.maintainSize = false,this.maintainSemantics = false,this.maintainInteractivity = false,})

visible:,true:子控件可见,绘制到屏幕上; false时,子控件不可见,并且不在屏幕上占用一定的空间,此时会使用replacement替换child,实际绘制的Widget就是replacement,默认replasement时宽高为0的SizedBox.
maintainState:当visible=false时,是否保存子控件的状态.当为true时,子空间会在Widget Tree中存在,不占用屏幕的空间,其实际在子child增加了Offstage等一些父控件.
maintainSize:是否为子控件所在的位置保留空间.当maintainSize=true[maintainState、maintainAnimation]时,[]子控件不可见,但是其所在位置占用的空间存在.在Visibility和子控件之间增加了Opacity.

其他隐藏控件的方式

当一个控件在状态改变时,不需要进行绘制,可以一动态的方式决定是否将控件添加到Widget Tree中.
比如当一个控件在需要时,才添加到控件,否则不添加;

///按需将控件添加到Widget Tree
@overrideWidget build(BuildContext context) {Widget child1 = Container(width: 100,height: 100,color: Colors.green,);Widget child2 = Container(width: 100,height: 100,color: Colors.blue,);return Row(children: [if(newer)child2,newer ? child2 : child1,],);}

Flutter Visibility Widget相关推荐

Flutter 多子 Widget 布之Stack、Positioned
文章目录层叠 Widget 布局 Stack alignment fit overflow Positioned 上文 Flutter 多子 Widget 布局之Flex.Expanded.Wrap ...
Flutter学习 Widget简介
目录 1. Widget 概述 1.1 Widget概念 1.2 Widget 分类 2. Widget 接口 3. StatelessWidget 和 StatefulWidget 3.1 Flut ...
Flutter 学习 - Widget 之对话框
前言本篇我们介绍Flutter中常用的对话框,先看下效果图正文 Flutter 中对话框也是Widget,有两种显示对话框的方法,对于对画框对使用还有特殊要求,我们后面介绍,先来看下这两种方法 1 ...
Android学习Flutter的Widget
在Android中,View是屏幕上显示的所有内容的基础, 按钮.工具栏.输入框等一切都是View. 在Flutter中,View相当于是Widget.以下的一些常见的Widget以及我们常用到的属性 ...
Flutter之Widget、Element、renderObject
Widget Widget用来保存Element的配置信息,本身为不可变,Element根据Widget内保存的配置信息来管理渲染树,可以多次插入Widget树中,每次Element都要重新装载Wid ...
ios 从assets加载图片_Flutter图片添加水印功能，Flutter保存Widget为图片
添加水印,两种实现思路,一种是将图片与水印解码,然后混编再编码,另一种是通过Widget的方式合成. 在这里采用的实现思路是使用层叠布局Stack加载图片以及水印部分,水印部分可能是一个现成的图片也可 ...
Flutter与JS的双向调用、Flutter中Widget与Html混合加载
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
Flutter中Widget 、Element、RenderObject角色深入分析
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章本文章将讲述 Widg ...
Flutter图片添加水印功能，Flutter保存Widget为图片
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章添加水印,两种实现思路 ...

Flutter Visibility Widget

Visibility Widget介绍

Opacity Widget

构造函数说明

Offstage Widget

构造函数

Visibility Widget

构造函数

其他隐藏控件的方式

Flutter Visibility Widget相关推荐

最新文章

热门文章