Flutter 控制是否显示组件

Flutter 控制是否显示组件(Offstage)，Offstage的作用很简单，通过一个参数来控制child是否显示，也是比较常用的组件。Offstage组件的主要属性如下所示：

这里编写一个控制文本显示/隐藏的小示例，需要添加一个控制状态的变量offstage。示例里点击右下角按钮可以显示或隐藏文本内容。完整的示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

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

class MyHomePage extends StatefulWidget {
  final String title;

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 状态控制是否显示文本组件
  bool offstage = true;

  @override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Offstage(
      offstage: offstage,//控制是否显示
      child: Text(
          '我出来啦！',
          style: TextStyle(
            fontSize: 36.0,
          ),
      ),
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
      // 设置是否显示文本组件
      setState(() {
          offstage = !offstage;
      });
    },
    tooltip: "显示隐藏",
    child: Icon(Icons.flip),
  ),
);
  }
}

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 基准线布局
• Flutter 矩阵转换
• Flutter Table
• Flutter GridView