flutter 如何在不占用任何空间的情况下从ui隐藏小部件

Question

我需要连续隐藏一个小部件。我知道它看起来是重复的。我搜索并尝试了很多方法来隐藏这个小部件，但它仍然有空间。所以这就是我用来解决它的方法 1-我使用了可见性 2-我使用了偏移 3-我使用了 If 案例，但小部件仍然在我的行中占有一席之地，我需要将其删除并且不占用任何空间我的用户界面 这是我下面的代码。非常感谢任何帮助

class _AppState extends State<App> {
  bool _hasImage ;

  @override
  Widget build(BuildContext context) {
    _hasImage = false ;
    return Material(
      child: Container(
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Wrap(
                direction: Axis.vertical,
                alignment: WrapAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.camera_alt),
                    iconSize: 40.0,
                    color: Color.fromRGBO(88, 60, 26, 1),
                    onPressed: () {
                    },
                  ),
                  Text(
                   'Camera',
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  )
                ],
              ),
              Wrap(
                direction: Axis.vertical,
                alignment: WrapAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.image),
                    iconSize: 40.0,
                    color: Color.fromRGBO(88, 60, 26, 1),
                    onPressed: () {
                    },
                  ),
                  Text(
                    'Gallery',
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  )
                ],
              ),
              Visibility(
                visible:  _hasImage,
                maintainSize: false,
                child: Wrap(
                  direction: Axis.vertical,
                  alignment: WrapAlignment.start,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.delete),
                      iconSize: 40.0,
                      color: Color.fromRGBO(88, 60, 26, 1),
                      onPressed: () {

                      },
                    ),
                    Text(
                      'Remove',
                      style: TextStyle(color: Colors.white, fontSize: 17.0),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Visibility您可以使用if条件代替使用

Row(
  children: [
    OtherWidgets(),
    if (hasImage) YourWrapWidget(...), // only takes up space if hasImage is true
  ]
)

完整解决方案：

class _AppState extends State<App> {
  bool _hasImage;

  @override
  Widget build(BuildContext context) {
    _hasImage = false;
    return Material(
      child: Container(
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Wrap(
                direction: Axis.vertical,
                alignment: WrapAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.camera_alt),
                    iconSize: 40.0,
                    color: Color.fromRGBO(88, 60, 26, 1),
                    onPressed: () {},
                  ),
                  Text(
                    'Camera',
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  )
                ],
              ),
              Wrap(
                direction: Axis.vertical,
                alignment: WrapAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.image),
                    iconSize: 40.0,
                    color: Color.fromRGBO(88, 60, 26, 1),
                    onPressed: () {},
                  ),
                  Text(
                    'Gallery',
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  )
                ],
              ),
              if (_hasImage) // this is what you need
                Wrap(
                  direction: Axis.vertical,
                  alignment: WrapAlignment.start,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.delete),
                      iconSize: 40.0,
                      color: Color.fromRGBO(88, 60, 26, 1),
                      onPressed: () {},
                    ),
                    Text(
                      'Remove',
                      style: TextStyle(color: Colors.white, fontSize: 17.0),
                    )
                  ],
                )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

bool _hasImage = true;

@override
Widget build(BuildContext context) {
  return Material(
    child: Container(
      child: Container(
        child: Row(
          children: <Widget>[
            Wrap(
              direction: Axis.vertical,
              alignment: WrapAlignment.start,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.camera_alt),
                  iconSize: 40.0,
                  color: Color.fromRGBO(88, 60, 26, 1),
                  onPressed: () {},
                ),
                Text(
                  'Camera',
                  style: TextStyle(color: Colors.white, fontSize: 17.0),
                )
              ],
            ),
            Spacer(), // add this
            Wrap(
              direction: Axis.vertical,
              alignment: WrapAlignment.start,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.image),
                  iconSize: 40.0,
                  color: Color.fromRGBO(88, 60, 26, 1),
                  onPressed: () {},
                ),
                Text(
                  'Gallery',
                  style: TextStyle(color: Colors.white, fontSize: 17.0),
                )
              ],
            ),
            Visibility( // add this
              child: Spacer(),
              visible: _hasImage,
            ),
            Visibility(
              visible: _hasImage,
              child: Wrap(
                direction: Axis.vertical,
                alignment: WrapAlignment.start,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.delete),
                    iconSize: 40.0,
                    color: Color.fromRGBO(88, 60, 26, 1),
                    onPressed: () {},
                  ),
                  Text(
                    'Remove',
                    style: TextStyle(color: Colors.white, fontSize: 17.0),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    ),
  );
}