Flutter隐藏控件Offstage/Visibility/Opacity/ifelse

发表于 2020年09月24日
flutter

在flutter里隐藏控件可以通过多种方式实现。Visibility和Offstage的区别就是保不保留空间，比如你控件设置了宽高，使用Visibility隐藏，但还会留有一块空白在那里的，类似android的gone和visible一样的效果。另外很多人常用的也有if else判断。

属性	说明
Offstage
offstage	子组件是否可见，默认true（隐藏）
child	子组件
Visibility
child	子组件
replacement	不可见时显示的组件（当maintainState = false）
visible	子组件是否可见，默认true（可见）
maintainState	不可见时是否维持状态，默认为false
maintainAnimation	不可见时，是否维持子组件中的动画
maintainSize	不可见时是否留有空间（设置为true，会报错。如果想隐藏并保留组件空间请使用Opacity）
maintainSemantics	不可见时是否维持它的语义（我也没搞明白是什么）
maintainInteractivity	不可见时是否具有交互性

代码示例

目录表

Offstage

Offstage(
offstage:false,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),

Visibility

Visibility(
visible:_offstage,
replacement:Text('data'),
maintainState:true,
child: Container(
width: 200,
height: 200,
color: Colors.yellow,
),
),

if else

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
bool isShow=false;
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Visibility(child: null,visible:false,),
Offstage(offstage:false,child:null),
Opacity(opacity: 1,child:null),
isShow?Text("显示"):SizedBox.shrink()
],
),
);
}
}