Flutter控制widget可见性

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

属性名类型说明
offstagebooltrue:隐藏控件,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

设置组件的不透明度

属性名类型说明
opacitydouble组件的不透明度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属性,使其具备或失去接收触摸事件的能力

属性名类型说明
ignoringbooltrue:无法接收触摸事件
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来展示或者隐藏子控件,并且可以设置在隐藏子控件时展示占位控件
常用属性

属性名类型说明
childwidget子控件
visiblebool展示还是隐藏子控件
replacementwidget隐藏子控件时展示当占位控件
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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值