Flutter 设置控件是否可见

栏目: IT技术 · 发布时间: 4年前

内容简介:共有两种实现比较简单的方式第一种比较好理解,将一个控件的透明度设置成0,打到隐藏的目的。第二种办法是使用 SDK 自带的

共有两种实现比较简单的方式

第一种比较好理解,将一个控件的透明度设置成0,打到隐藏的目的。

class _HideAndShowPageState extends State<HideAndShowPage> {
bool visible = true;

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('widget显示与隐藏'),
      centerTitle: true,
    ),
    body: new ListView(
      children: <Widget>[
        new Padding(
          padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
          child: new RaisedButton(
              textColor: Colors.black,
              child: new Text(visible ? '隐藏B    显示A' : '隐藏A   显示B'),
              onPressed: () {
                visible = !visible;
                setState(() {});
              }),
        ),
        new Padding(
          padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
          child: new Stack(
            children: <Widget>[
              new TestAWidget(
                visible: visible,
              ),
              new TestBWidget(
                visible: !visible,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
}

class TestAWidget extends StatelessWidget {
final bool visible;

const TestAWidget({Key key, this.visible}) : super(key: key);

@override
Widget build(BuildContext context) {
  return AnimatedOpacity(
    duration: Duration(milliseconds: 300),
    opacity: visible ? 1.0 : 0.0,
    child: new Container(
      color: Colors.blue,
      height: 100.0,
      child: new Center(
        child: new Text('TestAWidget'),
      ),
    ),
  );
}
}

class TestBWidget extends StatelessWidget {
final bool visible;

const TestBWidget({Key key, this.visible}) : super(key: key);

@override
Widget build(BuildContext context) {
  return AnimatedOpacity(
    duration: Duration(milliseconds: 300),
    opacity: visible ? 1.0 : 0.0,
    child: new Container(
      color: Colors.green,
      height: 100.0,
      child: new Center(
        child: new Text('TestBWidget'),
      ),
    ),
  );
}
}

第二种办法是使用 SDK 自带的 Offstage 控件包裹。

offstage的布局行为完全取决于 offstate 参数,offstage 默认为 true ,不显示;

当 offstage 为 true,child 不会绘制到屏幕上,不会响应点击事件,也不会占用空间; 当 offstage 为 false,child 绘制到屏幕上; 注意,当 offstage 不可见,如果 child 有动画,应该手动停止动画, offstage 不会停止动画;

class TestCWidget extends StatelessWidget {
 final bool visible;

 const TestCWidget({Key key, this.visible}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return new Offstage(
     offstage: visible,
     child:new Container(
       color: Colors.orange,
       height: 100.0,
       child: new Center(
         child: new Text('TestCWidget'),
       ),
     ),
   );
 }
}

了解更多有深度技术的文章,与移动端、大前端未来方向的认知, 前往订阅 开源实验室小专栏。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

组合数学教程

组合数学教程

范林特 / 刘振宏、赵振江 / 机械工业出版社 / 2007-4 / 49.00元

本书介绍组合数学中的基础理论和实际应用,讲述的内容非常广泛,讨论的问题涵盖组合数学所涉及的绝大部分领域。本书不仅包含了通常组合数学教科书中的经典内容,而且收集了若干新的内容,如Lovász筛法、范德瓦尔登积和式猜想、结合区组设计、码和设计等。 本书阐述深入浅出,简明易懂,适合作为高等院校高年级本科生与低年级研究生的组合数学课程教材,也适合作为数学和其他学科的研究人员的参考书。一起来看看 《组合数学教程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具