如何在颤动中隐藏堆栈小部件中的特定子项

Question

如何在 Stack 小部件中隐藏特定的孩子。 我尝试了 Visibility 小部件来隐藏孩子，但这会影响整个堆栈小部件隐藏。

我的代码

Visibility(
                      visible: visibleControl == ScreenControls.RECORDING ? true:false,
                      child: Stack(
                        alignment: AlignmentDirectional.center,
                        children: <Widget>[
                        Visibility(
                          visible: false,  
                          child: SpinKitRipple(
                          color: kConvertLoadingDotsColor,
                          size: 100,
                      ),
                        ),
                       Positioned(
                        bottom:6,
                        child:Text("Hello Mongolia"),),
                        ],
                      )

Answer 1

更新： Visibility有一个名为maintainSize的参数，它将保持小部件的大小，因此也保持堆栈大小

老的：

Visibility不会隐藏小部件，而是将其替换为一个大小为零的框。 因此，如果 `Stack 大小是从他们的孩子继承的，并且唯一赋予它大小的孩子的可见性为 false，则堆栈的大小将为 0。

有几种解决方案

1. 使用fit: StackFit.expand将堆栈大小扩展到父级

   1.1 如果需要固定高度，在Stack上方添加一个固定高度的SizedBox

2. 用Opacity小部件替换Visibility小部件，这将隐藏小部件但不会将其删除。 这里要考虑的是

   • 不透明度表现

     对于 0.0 和 1.0 以外的不透明度值，此类相对昂贵，因为它需要将子级绘制到中间缓冲区中。

   • 触摸输入仍然有效。 您可以添加一个 IgnorePointer 与参数忽略沿不透明度变化

Answer 2

这只是一个例子！ 根据您的要求修改...！

List<bool> visibilityValues = [];

  @override
  void initState() {
    super.initState();
    visibilityValues = List.generate(5, (ind) => true).toList();
    //change 5 with your num of widgets
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(15),
        child: Stack(children: [
          Positioned(
            top: 1,
            left: 1,
            child: Visibility(
              visible: visibilityValues[0],
              child:
                  InkWell(
                    //similarly wrap all widgets with inkwell or any othe listener and change widget visibility value
                    onTap:(){
                      setState((){
                        visibilityValues[0] = false;
                      });
                    },
                    child: Container(width: 100, height: 100, color: Colors.greenAccent)),
            ),
          ),
          Positioned(
            top: 1,
            right: 1,
            child: Visibility(
              visible: visibilityValues[1],
              child:
                  Container(width: 100, height: 100, color: Colors.blueAccent),
            ),
          ),
          Positioned(
            bottom: 1,
            left: 1,
            child: Visibility(
              visible: visibilityValues[2],
              child:
                  Container(width: 100, height: 100, color: Colors.redAccent),
            ),
          ),
          Positioned(
            bottom: 1,
            right: 1,
            child: Visibility(
              visible: visibilityValues[3],
              child:
                  Container(width: 100, height: 100, color: Colors.yellowAccent),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Visibility(
              visible: visibilityValues[4],
              child:
                  Container(width: 100, height: 100, color: Colors.tealAccent),
            ),
          )
        ]));
  }