如何实现菜单图标在右侧但从左侧展开的侧边栏？

原生的Drawer和EndDrawer分别固定对应左、右滑入逻辑，没法直接修改展开方向，你可以通过自定义布局+动画来实现需求，以下是主流框架的具体实现方案：

Flutter 实现方案 #

核心思路是用SlideTransition控制侧边栏从左侧滑入，搭配右侧的触发按钮和遮罩层完成交互：

import 'package:flutter/material.dart';

class CustomLeftSidebar extends StatefulWidget {
  const CustomLeftSidebar({super.key});

  @override
  State<CustomLeftSidebar> createState() => _CustomLeftSidebarState();
}

class _CustomLeftSidebarState extends State<CustomLeftSidebar> with SingleTickerProviderStateMixin {
  late AnimationController _animController;
  late Animation<Offset> _slideAnim;
  bool _isSidebarOpen = false;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    // 初始位置在屏幕左侧外，滑入时回到屏幕内
    _slideAnim = Tween<Offset>(
      begin: const Offset(-1, 0),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _animController,
      curve: Curves.easeInOut,
    ));
  }

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

  void _toggleSidebar() {
    setState(() => _isSidebarOpen = !_isSidebarOpen);
    _isSidebarOpen ? _animController.forward() : _animController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义侧边栏'),
        actions: [
          // 右侧的菜单触发按钮
          IconButton(
            icon: const Icon(Icons.menu),
            onPressed: _toggleSidebar,
          ),
        ],
      ),
      body: Stack(
        children: [
          // 主内容区域
          const Center(child: Text('主页面内容')),
          // 左侧滑入的侧边栏
          SlideTransition(
            position: _slideAnim,
            child: SizedBox(
              width: MediaQuery.of(context).size.width * 0.75,
              child: Drawer(
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: [
                    const DrawerHeader(
                      decoration: BoxDecoration(color: Colors.blue),
                      child: Text('侧边栏头部'),
                    ),
                    ListTile(title: const Text('菜单1'), onTap: _toggleSidebar),
                    ListTile(title: const Text('菜单2'), onTap: _toggleSidebar),
                  ],
                ),
              ),
            ),
          ),
          // 遮罩层：点击空白区域关闭侧边栏
          if (_isSidebarOpen)
            GestureDetector(
              onTap: _toggleSidebar,
              child: Container(color: Colors.black.withOpacity(0.5)),
            ),
        ],
      ),
    );
  }
}

Vue 实现方案 #

通过CSS定位和transition动画控制侧边栏的滑入滑出，逻辑更轻量化：

<template>
  <div class="page-wrap">
    <!-- 主内容区 -->
    <main class="main-content">
      <button class="toggle-btn" @click="isSidebarOpen = !isSidebarOpen">菜单</button>
      <p>主页面内容</p>
    </main>

    <!-- 左侧侧边栏 -->
    <div class="sidebar" :class="{ 'sidebar-show': isSidebarOpen }">
      <div class="sidebar-inner">
        <h3>侧边栏菜单</h3>
        <ul>
          <li>菜单选项1</li>
          <li>菜单选项2</li>
        </ul>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div v-if="isSidebarOpen" class="overlay" @click="isSidebarOpen = false"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isSidebarOpen = ref(false)
</script>

<style scoped>
.page-wrap {
  position: relative;
  min-height: 100vh;
}
.main-content {
  padding: 20px;
}
.toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 16px;
  cursor: pointer;
}
.sidebar {
  position: fixed;
  top: 0;
  left: -300px; /* 初始隐藏在屏幕左侧外 */
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15);
  transition: left 0.3s ease;
}
.sidebar-show {
  left: 0; /* 滑入屏幕 */
}
.sidebar-inner {
  padding: 24px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
</style>

内容的提问来源于stack exchange，提问作者Leo