如何以编程方式在 Flutter 中用 Empty Container() 小部件替换 Text() 小部件？

Posted 2023-02-23

【中文标题】如何以编程方式在 Flutter 中用 Empty Container() 小部件替换 Text() 小部件？

【英文标题】：How to replace a Text() widget by an Empty Container() widget in Flutter programatically?

【发布时间】：2021-05-07 12:19:55

【问题描述】：

我正在寻找 Android Visibility.GONE Equivalent 选项。

Show/hide widgets in Flutter programmatically

将 Opacity 设置为 0 后，以上链接批准的解决方案将占用空间。因为没有像 android 那样占用任何空间该解决方案说

为使其不占空间，请将其替换为空的Container()。

有人请告诉我如何实现这一点。我需要在不以编程方式占用任何空间的情况下完全擦除 Widget。

注意：我需要类似安卓原生代码view.setVisibility(View.GONE)的解决方案

【参考方案1】：

尝试台下：

Offstage(offstage: isHide, child:Text('test'),);

【参考方案2】：

在您的statefullwidget 中使用条件显示执行此操作： 请看下面的例子：

class _MyHomePageState extends State<MyHomePage> 
  bool _isShowing = true;

  void _toggle() 
    setState(() 
      _isShowing =!_isShowing ;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Visibility Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(color: Colors.red, height: 50),
            if(_isShowing )
            Container(color: Colors.green, height: 50),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Toggle',
        child: Icon(Icons.add),
      ),
    );
  

【参考方案3】：

有状态小部件是执行此操作的方法之一。

所以，一旦你按下按钮，它就会触发 _toggle() 函数。该函数将布尔值切换为 false。

SetState() 函数调用重建。

当isShowing为false时，会显示容器...

下面的例子：

import 'package:flutter/material.dart';

class HomePageScreen extends StatefulWidget 
  @override
  _HomePageScreenState createState() => _HomePageScreenState();


class _HomePageScreenState extends State<HomePageScreen> 
  bool _isShowing = true;

  void _toggle() 
    setState(() 
      _isShowing = !_isShowing;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Remove Text for Empty Container"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _isShowing
                ? Text("Remove Text")
                : Container(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Toggle',
        child: Icon(Icons.add),
      ),
    );
  

【讨论】：

这个解决方案非常棒，它有一个 isShowing 标志并在渲染之前对其进行比较。感谢您的解决方案