Flutter实现左侧滑入动画按钮并打开侧边抽屉（WebView应用）

一、布局结构设计 #

用DrawerLayout作为根布局，左侧放置图标抽屉，主内容区放你的WebView，再叠加一个初始隐藏在屏幕左侧的按钮：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主内容：WebView容器 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <!-- 左侧图标抽屉 -->
    <LinearLayout
        android:id="@+id/icon_drawer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff"
        android:orientation="vertical"
        android:padding="16dp">
        <!-- 这里添加你的图标项，比如多个ImageView/Button -->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_icon1"/>
        <!-- 更多图标... -->
    </LinearLayout>

    <!-- 可滑入的触发按钮 -->
    <ImageView
        android:id="@+id/slide_trigger_btn"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_gravity="center_vertical|start"
        android:src="@drawable/ic_menu"
        android:background="@drawable/circle_background"
        android:translationX="-56dp"/> <!-- 初始完全隐藏在屏幕左侧外 -->
</androidx.drawerlayout.widget.DrawerLayout>

二、实现按钮滑入动画 #

在页面初始化时，用属性动画让按钮从左侧滑入屏幕：

val triggerBtn = findViewById<ImageView>(R.id.slide_trigger_btn)
// 从左侧外滑入到显示位置，translationX从-56dp（按钮宽度）变为0
val slideInAnim = ObjectAnimator.ofFloat(triggerBtn, "translationX", -56f, 0f)
slideInAnim.duration = 500 // 动画时长500ms
slideInAnim.start()

如果需要和WebView加载同步，可在WebViewClient的onPageFinished方法中启动动画。

三、按钮点击打开抽屉 #

给按钮绑定点击事件，直接调用DrawerLayout的打开方法：

val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)
triggerBtn.setOnClickListener {
    drawerLayout.openDrawer(GravityCompat.START)
}

// 可选：抽屉关闭时的按钮联动效果
drawerLayout.addDrawerListener(object : DrawerLayout.DrawerListener {
    override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
        // 抽屉滑动时，让按钮同步移动到抽屉右侧
        triggerBtn.translationX = -56f + (280f * slideOffset) // 280为抽屉宽度
    }
    override fun onDrawerOpened(drawerView: View) {}
    override fun onDrawerClosed(drawerView: View) {
        // 抽屉关闭后，按钮回到初始显示位置
        triggerBtn.translationX = 0f
    }
    override fun onDrawerStateChanged(newState: Int) {}
})

四、无DrawerLayout的替代方案 #

如果不想用系统DrawerLayout，可自定义抽屉：

1. 用FrameLayout作为根布局，抽屉布局初始translationX设为负的自身宽度；
2. 按钮点击时，用属性动画让抽屉滑入屏幕，同时调整按钮位置；
3. 抽屉关闭时反向执行动画，按钮回到初始位置。

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