第7章页面布局-Offstage控制是否显示组件

最新推荐文章于 2025-07-24 09:53:37 发布

亢少军

最新推荐文章于 2025-07-24 09:53:37 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/kangshaojun888/article/details/86637020

Flutter 专栏收录该内容

97 篇文章

订阅专栏

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';



void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final appTitle = "Offstage控制是否显示组件示例";
    return new MaterialApp(
      title: appTitle,
      home: new MyHomePage(title:appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key,this.title}):super(key:key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State {

  //状态控制是否显示文本组件
  bool offstage = true;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Center(
        child: new Offstage(
          offstage: offstage,//控制是否显示
          child: new Text(
            '我出来啦！',
            style: TextStyle(
              fontSize: 36.0,
            ),
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: (){

          //设置是否显示文本组件
          setState(() {
            offstage = !offstage;
          });

        },
        tooltip: "显示隐藏",
        child: new Icon(Icons.flip),
      ),

    );
  }

}