十种widget显示和隐藏的方式

1.使用条件语句

2.使用空占位widget

3.调整size为0

4.修改widget颜色

5.使用透明度变化

6.使用缩放

7.使用专用组件Visibility

8.使用专用组件Offstage

9.使用AnimatedCrossFade

10.使用AnimatedSwitcher

废话不多说直接上代码 粗糙我又来了

import 'package:flutter/material.dart';

class VisibleTestWidget extends StatefulWidget {
  const VisibleTestWidget({Key? key}) : super(key: key);

  @override
  State<VisibleTestWidget> createState() => _VisibleTestWidgetState();
}

class _VisibleTestWidgetState extends State<VisibleTestWidget> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    var size = 50.0;
    return SafeArea(
      child: Container(
        color: Colors.white,
        child: Column(
          children: [
            //1.使用条件语句
            if (_visible) FlutterLogo(size: size),
            //2.使用空占位widget
            _visible ? FlutterLogo(size: size) : const SizedBox(),
            //3.调整size为0
            FlutterLogo(size: _visible ? size : 0),
            //4.修改widget颜色
            Container(
                width: size,
                height: size,
                color: _visible ? Colors.red : Colors.transparent),
            //5.使用透明度变化
            Opacity(
                opacity: _visible ? 1.0 : 0.0, child: FlutterLogo(size: size)),
            //6.使用缩放

            Transform.scale(
              scale: _visible ? 1.0 : 0.0,
              child: FlutterLogo(size: size),
            ),
            //7.使用专用组件Visibility
            Visibility(visible: _visible, child: FlutterLogo(size: size)),
            //8.使用专用组件Offstage
            Offstage(offstage: !_visible, child: FlutterLogo(size: size)),
            //9.使用AnimatedCrossFade
            AnimatedCrossFade(
                firstChild: FlutterLogo(size: size),
                secondChild: const SizedBox(),
                crossFadeState: _visible
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: const Duration(seconds: 0)),
            //10.使用AnimatedSwitcher
            AnimatedSwitcher(
                duration: const Duration(seconds: 0),
                child: _visible ? FlutterLogo(size: size) : const SizedBox()),
            ElevatedButton(
                onPressed: () {
                  _visible = !_visible;
                  setState(() {});
                },
                child: Text(_visible ? "隐藏" : "显示"))
          ],
        ),
      ),
    );
  }
}

...其实还有很多隐式动画和显示动画也可以做隐藏 并且会加上好看动画的效果 有一些情况组件隐藏后还占据着空间比如Opacity，具体选用哪种visible方式，自行决定哈

学习更多flutter 加V:sunyan414361110 本文来自小孙的flutter学习之路