首页 文章

当我按下图标按钮时，如何打开容器？

提问于
浏览 次
0

我想要一个可以在按下按钮时打开彩色容器的应用程序 .

这是主页：

class MainPage extends StatefulWidget {

  @override
    MainPageState createState() => MainPageState();

}

class MainPageState extends State<MainPage> {

  @override
    Widget build(BuildContext context) {
      return MaterialApp (
        debugShowCheckedModeBanner: false,
        home: Scaffold (
          body: Material (
            color: Colors.black
            child: Center (
              child: IconButton (
                onPressed: () {},
                icon: Icon (
                  Icons.add,
                  color: Colors.white, 
                ),
                iconSize: 40.0,
              )
            ),
          ),
        ),
      );
    }

}

这就是容器：

class ColoredContainer extends StatelessWidget {

  @override
    Widget build(BuildContext context) {
      return Center (
        child: Container (
          color: Colors.white,
          height: 500.0,
          width: 300.0
        )
      );
    }

}

按下按钮有没有办法打开容器？当容器弹出时，还可以制作动画吗？如果可以，那么如何添加动画呢？

dart flutter

1 回答

  • 1

    你可以尝试这样的事情 . 对于动画 - 尝试使用 AnimatedContainer 而不是 Container

    class MainPageState extends State<MainPage> {
  bool _isContainerVisible = false;

  @override
    Widget build(BuildContext context) {
      return MaterialApp (
        debugShowCheckedModeBanner: false,
        home: Scaffold (
          body: Material (
            color: Colors.black,
            child: Column(
              children: <Widget>[
                IconButton(
                  onPressed: () {
                    setState(() {
                      _isContainerVisible = !_isContainerVisible;
                    });
                  },
                  icon: Icon(
                    Icons.add,
                    color: Colors.white,
                  ),
                  iconSize: 40.0,
                ),
                ColoredContainer(_isContainerVisible)
              ],
            ),
          ),
        ),
      );
    }

}

class ColoredContainer extends StatelessWidget {
  ColoredContainer(this._isContainerVisible);
  final bool _isContainerVisible;

  @override
    Widget build(BuildContext context) {
      return Center (
        child: AnimatedContainer (
          duration: Duration(seconds: 1),
          color: Colors.white,
          height: _isContainerVisible ? 500.0 : 0.0,
          width: _isContainerVisible ? 300.0 : 0.0
        )
      );
    }

}
    回复于

相关问题