flutter按下一个按钮，从左向右伸出来侧边栏 AnimatedPositioned

flutter按下一个按钮，从左向右伸出来侧边栏

案例1 使用AnimationController

import 'package:flutter/material.dart';

class CustomDrawer extends StatefulWidget {
  @override
  _CustomDrawerState createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isDrawerOpen = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Drawer Example'),
      ),
      body: Stack(
        children: <Widget>[
          // 主内容
          Center(
            child: Text('Main Content'),
          ),
          // 自定义抽屉
          AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              double slide = -200 + (200 * _controller.value);
              return Positioned(
                top: 0,
                bottom: 0,
                left: slide,
                child: Container(
                  width: 200,
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      UserAccountsDrawerHeader(
                        accountName: Text("John Doe"),
                        accountEmail: Text("johndoe@example.com"),
                        currentAccountPicture: CircleAvatar(
                          backgroundImage: AssetImage("assets/avatar.png"),
                        ),
                      ),
                      ListTile(
                        leading: Icon(Icons.home),
                        title: Text('Home'),
                        onTap: () {
                          // 处理抽屉选项的点击事件
                          _toggleDrawer();
                          // 在这里执行导航到主页或其他页面的操作
                        },
                      ),
                      // 添加其他抽屉选项
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleDrawer,
        child: Icon(Icons.menu),
      ),
    );
  }

  void _toggleDrawer() {
    setState(() {
      if (_isDrawerOpen) {
        _controller.reverse();
      } else {
        _controller.forward();
      }
      _isDrawerOpen = !_isDrawerOpen;
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(MaterialApp(
    home: CustomDrawer(),
  ));
}

案例2 AnimatedPositioned

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SideBarExample(),
    );
  }
}

class SideBarExample extends StatefulWidget {
  @override
  _SideBarExampleState createState() => _SideBarExampleState();
}

class _SideBarExampleState extends State<SideBarExample> {
  bool isSidebarOpen = false;

  void toggleSidebar() {
    setState(() {
      isSidebarOpen = !isSidebarOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('侧边栏示例'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: toggleSidebar,
        ),
      ),
      body: Stack(
        children: [
          // 主内容
          Center(
            child: Text(
              '主要内容',
              style: TextStyle(fontSize: 24.0),
            ),
          ),
          // 侧边栏
          AnimatedPositioned(
            duration: Duration(milliseconds: 300),
            left: isSidebarOpen ? 0 : -200,
            top: 0,
            bottom: 0,
            width: 200,
            child: Container(
              color: Colors.blueGrey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ListTile(
                    leading: Icon(Icons.home),
                    title: Text('主页'),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('设置'),
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('个人资料'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}