Flutter 使用持久的侧边菜单和顶部栏在Ffltter Web应用程序中的页面之间导航

发布于11月16日

我的Web应用程序(考勤管理系统)包含一个仪表板，登录后会打开.仪表板右侧包含一些数据，左侧包含一个菜单栏，顶部包含一个页眉容器.当用户点击每个菜单项时，相关页面应该在仪表板的右侧打开(如员工页面、部门页面等)，但保持左侧菜单和顶部栏不变.我应该如何实现这一点？是通过容器还是借助任何其他方法或小部件？

这将是我的第一个Flutter 网络应用(我已经开发了移动应用).它将是在Ffltter中开发的考勤应用程序的后端应用程序.是否建议在此类项目中使用响应式布局？

推荐答案

如果我正确理解了您的问题，一个可能的解决方案库可能是这样的.

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedSidebarItem = 'Home';

  void onSidebarItemSelected(String item) {
    setState(() {
      selectedSidebarItem = item;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fixed Sidebar Example'),
      ),
      body: Row(
        children: [
          // Sidebar
          Container(
            width: 200,
            child: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text(
                      'Sidebar',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                  ListTile(
                    title: Text('Home'),
                    onTap: () => onSidebarItemSelected('Home'),
                  ),
                  ListTile(
                    title: Text('Settings'),
                    onTap: () => onSidebarItemSelected('Settings'),
                  ),
                ],
              ),
            ),
          ),
          // Content
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Selected Sidebar Item:',
                  ),
                  Text(
                    selectedSidebarItem,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}