The display and hiding of widgets for flutter learning

在IOS的开发中,We hide and show controls, 只需要设置hidden属性, 因为是View的一个基本属性,但是在flutterThere is indeed no direct attribute for you to set during development, flutterIn all thingswidget的原则.所以flutterwant to achievewidget显示和隐藏,也需要通过widget来实现.

1、Visbility组件

Widget getWidget(bool show) {
    
    return Visibility(
        child: const Text('VisibilityControls showing and hiding of controls'),
        // 设置是否可见：true:可见 false:不可见
        visible: show,
    );
  }

在需要隐藏的wdiget外层包裹Visbility组件, Then pass the properties in itvisibleto control the showing and hiding of components,true：可见, flase： 不可见
注意： VisbilityComponents are hidden and do not preserve spatial positions, Its corresponding event will also not respond

• Introduction of other properties：
  

2、Offstage组件

Widget getWidget2(bool show) {
    
    return Offstage(
      // 设置是否可见：true:不可见 false:可见
      offstage: !show,
      child: Text('offstageControls showing and hiding of controls'),
    );
  }

Offstage通过其中offstage属性来控制,Whether the contents of its package are visible, true：不可见, false： 可见刚好与Visbility组件中的visible效果相反

**注意：OffstageThe control component is hidden and does not preserve the spatial position,Its corresponding event will also not respond.如果Offstage 和 Positioned 一起使用,要把 Offstage 放Positioned里面,包裹 Positioned 会出现问题 **

3、Opacity组件

Widget getWidget3(bool show) {
    
    return Opacity(
      opacity: show ? 1 : 0,
      child: Text('OpacityControls showing and hiding of controls'),);
  }

OpacityComponent he passes its propertiesopacity来控制,This property is notbool类型而是 double类型,类似IOSTransparency property in , when you set the value to 1时,表示完全显示, 值为0时,表示隐藏, [0-1]中间的某个值, 那么widgetThe display level corresponds to the value you set.

注意： opacity设置0时,本质上把widgetThe transparency is set to fully transparent,看不见,But the space didn't disappear,And also occupy the corresponding position,The corresponding click event will also respond

4、 通过组件的size控制

Widget getWidget4(bool show) {
    
    return Container(
      color: Colors.red,
      height: show ? 50 : 0,
      child: Text('sizeControls showing and hiding of controls'),
    );
  }

通过外层widget的sizeproperties to hide and show controls

5、Empty component placeholder method

Widget getWidget5(bool show) {
    
    return show ? Text("Empty component placeholder method"): Container();
  }

Placed by an empty component,To achieve the purpose of showing and hiding