如何通过AppBar图标实现ListView的显示与隐藏（仿Simplenote宽屏UI）

核心思路是通过状态变量控制侧边栏的显示/隐藏，结合屏幕宽度判断切换布局逻辑，具体实现如下：

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<NoteApp> createState() => _NoteAppState();
}

class _NoteAppState extends State<NoteApp> {
  // 控制侧边栏显示状态，宽屏初始为可见
  bool _isSidebarVisible = true;
  // 自定义宽屏阈值，可根据需求调整
  final double _wideScreenThreshold = 600;

  // 切换侧边栏显示状态
  void _toggleSidebar() {
    setState(() {
      _isSidebarVisible = !_isSidebarVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isWideScreen = screenWidth > _wideScreenThreshold;

    return Scaffold(
      body: isWideScreen
          ? Row(
              children: [
                // 宽屏时根据状态条件渲染侧边栏
                if (_isSidebarVisible)
                  SizedBox(
                    width: 280, // 侧边栏固定宽度，可调整
                    child: _buildNoteList(),
                  ),
                // 编辑区域自动占满剩余宽度
                Expanded(
                  child: _buildNoteEditor(onToggleSidebar: _toggleSidebar),
                ),
              ],
            )
          : // 窄屏逻辑：显示列表页，点击跳转编辑页
            _buildNoteList(),
    );
  }

  // 笔记列表组件（复用你已实现的逻辑）
  Widget _buildNoteList() {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('笔记 $index'),
          onTap: () {
            final screenWidth = MediaQuery.of(context).size.width;
            if (screenWidth <= _wideScreenThreshold) {
              // 窄屏跳转到独立编辑页
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => NoteEditorScreen(
                    onToggleSidebar: () {}, // 窄屏不需要此回调
                  ),
                ),
              );
            }
            // 宽屏下可添加选中笔记的状态更新逻辑
          },
        );
      },
    );
  }
}

// 笔记编辑组件（宽屏嵌入主页面，窄屏作为独立页面）
class NoteEditorScreen extends StatelessWidget {
  final VoidCallback onToggleSidebar;

  const NoteEditorScreen({super.key, required this.onToggleSidebar});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isWideScreen = screenWidth > 600;

    return Scaffold(
      appBar: AppBar(
        leading: isWideScreen
            ? IconButton(
                icon: const Icon(Icons.menu),
                onPressed: onToggleSidebar, // 宽屏点击切换侧边栏
              )
            : IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => Navigator.pop(context), // 窄屏返回列表页
              ),
        title: const Text('编辑笔记'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          maxLines: null,
          expands: true,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: '开始写笔记...',
          ),
        ),
      ),
    );
  }
}

关键实现细节 #

• 状态控制：用_isSidebarVisible布尔变量记录侧边栏状态，点击AppBar图标时调用setState更新状态，触发布局重建。
• 宽屏布局逻辑：宽屏时用Row组合侧边栏和编辑区域，通过if (_isSidebarVisible)条件渲染侧边栏；隐藏后Expanded的编辑区域会自动占满整个屏幕宽度。
• AppBar适配：编辑页的leading图标根据屏幕宽度动态切换——宽屏显示菜单图标（控制侧边栏），窄屏显示返回按钮（回到列表页）。
• 窄屏兼容：保留你原有的跳转逻辑，窄屏时点击列表项跳转到独立编辑页面。

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