Flutter进阶：构建酷炫App抽屉菜单和水纹效果

2023-11-29 05:00:33

Flutter——助力构建美观且交互丰富的移动应用程序的UI工具包，为开发者带来广泛而令人兴奋的功能。在这一章中，我们将学习如何创建抽屉菜单和水纹效果，为应用程序添加实用的导航功能和美观的用户界面。

一、抽屉菜单——便捷导航体验

抽屉菜单是一种广泛应用于移动应用程序的导航元素，它通常以滑动的方式从屏幕一侧打开，提供便捷的访问应用程序各个页面和功能的途径。在Flutter中，我们可以使用Drawer小部件轻松创建抽屉菜单。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('Flutter Tutorial'),
            ),
            ListTile(
              title: Text('Home'),
              onTap: () {
                //跳转到主页
              },
            ),
            ListTile(
              title: Text('Settings'),
              onTap: () {
                //跳转到设置页
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text('Flutter Tutorial'),
      ),
      body: Center(
        child: Text('Welcome to Flutter Tutorial'),
      ),
    );
  }
}

通过这种方式，你便能够在你的Flutter应用程序中创建抽屉菜单了。

二、水纹效果——美观且响应迅速

水纹效果是一种常见且深受欢迎的用户界面元素，它通常在按钮或图标被按压时出现。它不仅美观，而且可以提供用户交互时的响应和反馈。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me'),
          onPressed: () {
            //做一些事情
          },
          splashColor: Colors.blue, //水波纹颜色
        ),
      ),
    );
  }
}