Flutter控制widget可见性

Offstage

通过设置offstage来控制控件当显示和隐藏，隐藏后的控件不占据空间

属性名	类型	说明
offstage	bool	true:隐藏控件，false:展示控件

class _VisibilityViewState extends BaseState<VisibilityView> {
  bool _visible = true;

  @override
  Widget buildView(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 100),
      child: Center(
        child: Column(
          children: [
            Text("title"),
            Visibility(
              child: Text("hello"),
              visible: _visible,
              replacement: Text("replacement"),
            ),
            OutlinedButton(
                onPressed: () {
                  setState(() {
                    _visible = !_visible;
                  });
                },
                child: Text("switch"))
          ],
        ),
      ),
    );
  }
}

offstage-true offstage-false

Opacity

设置组件的不透明度

属性名	类型	说明
opacity	double	组件的不透明度0.0-1.0

不透明度为1
不透明度为0.5

class _OpacityViewState extends BaseState<OpacityView> {
  double _opacity = 1;
  TextEditingController _controller = TextEditingController(text: "1");

  @override
  Widget buildView(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 100),
      margin: EdgeInsets.symmetric(horizontal: 50),
      child: Center(
        child: Column(
          children: [
            Text("title"),
            Opacity(
              child: Text("opacity"),
              opacity: _opacity,
            ),
            TextField(
              controller: _controller,
            ),
            OutlinedButton(
                onPressed: () {
                  setState(() {
                    _opacity = double.tryParse(_controller.text) ?? 1;
                  });
                },
                child: Text("set"))
          ],
        ),
      ),
    );
  }
}

IgnorePointer

通过设置ignoring属性，使其具备或失去接收触摸事件的能力

属性名	类型	说明
ignoring	bool	true:无法接收触摸事件

class _IgnoreViewState extends BaseState<IgnoreView> {
  bool _ignore = true;

  @override
  Widget buildView(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 100),
      child: Center(
        child: Column(
          children: [
            Text("title"),
            IgnorePointer(
              child: OutlinedButton(
                  onPressed: () {
                    print('_IgnoreViewState.buildView_click');
                  },
                  child: Text("click")),
              ignoring: _ignore,
            ),
            OutlinedButton(
                onPressed: () {
                  setState(() {
                    _ignore = !_ignore;
                  });
                },
                child: Text("switch"))
          ],
        ),
      ),
    );
  }
}

Visibility

通过设置visible来展示或者隐藏子控件，并且可以设置在隐藏子控件时展示占位控件
常用属性

属性名	类型	说明
child	widget	子控件
visible	bool	展示还是隐藏子控件
replacement	widget	隐藏子控件时展示当占位控件

class _VisibilityViewState extends BaseState<VisibilityView> {
  bool _visible = true;

  @override
  Widget buildView(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 100),
      child: Center(
        child: Column(
          children: [
            Text("title"),
            Visibility(
              child: Text("hello"),
              visible: _visible,
              replacement: Text("replacement"),
            ),
            OutlinedButton(
                onPressed: () {
                  setState(() {
                    _visible = !_visible;
                  });
                },
                child: Text("switch"))
          ],
        ),
      ),
    );
  }
}

visible-true visible-false