Flutter Web 仪表板内容 - 最佳实践？

Question

我正在创建一个管理仪表板，目前在一行中有两个视图部件：

• 一个侧边栏 - 宽度为300px（不是抽屉式的，因为我想让它始终显示）- 其中包含一个列表。
• 一个内容部件 - 展开的。

管理仪表板视图

以下是页面的代码：

import 'package:flutter/material.dart';
import 'package:webenrol/widgets/dashboard_admin.dart';
import 'package:webenrol/widgets/drawer.dart';

//TODO: add flappy_search_bar package and add to appBar

class AdminDashboard extends StatelessWidget {
  //TODO: Add title
  static String id = '/admin_dashboard';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Admin Dashboard - Overview'),),
      body: Container(child: Row(
        children: <Widget>[
          //Sidebar
          DashboardSideBar(),
          //Main Dashboard Content
          DashboardAdmin(),
        ],
      )),
    );
  }
}

我将为侧栏链接创建其他内容小部件，我希望的是，当菜单被点击时，内容小部件能够更新，并且ListTile被选中而无需重新加载页面。

这是否可行，我的WebApp是否正确布局，还是需要进行改变？

- JobsyNZ

Answer 1

所以我找到了一个解决方案，我需要使用TabController和TabView。

当我设置我的TabController时，我设置了一个监听器来监听其索引的任何事件。

class _State extends State<AdminDashboard> with SingleTickerProviderStateMixin{
  int active = 0;
//TODO: Add title
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 5, vsync: this, initialIndex: 0)
    ..addListener(() {
      setState(() {
        active = tabController.index;
      });
    });
  }

然后我修改了我的菜单，使其在点击时动画到正确的页面，并且如果当前所在的页面为真，则被选中。

Widget adminMenu() {
  return ListView(
    shrinkWrap: true,
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
        selected: tabController.index == 0 ? true : false,
        onTap: () {
          tabController.animateTo(0);
        },
      ),
      ListTile(
        leading: Icon(Icons.add),
        title: Text('Add New Centre'),
        selected: tabController.index == 1 ? true : false,
        onTap: () {
          tabController.animateTo(1);
        },
      ),
      ListTile(
        leading: Icon(Icons.list),
        title: Text('List Centres'),
        selected: tabController.index == 2 ? true : false,
        onTap: () {
          tabController.animateTo(2);
        },
      ),
      ListTile(
        leading: Icon(Icons.people),
        title: Text('Users'),
        selected: tabController.index == 3 ? true : false,
        onTap: () {
          tabController.animateTo(3);
        },
      ),
      ListTile(
        leading: Icon(Icons.exit_to_app),
        title: Text('Logout'),
        selected: tabController.index == 4 ? true : false,
        onTap: () {
          tabController.animateTo(4);
        },
      ),
    ],
  );
}

然后我只需要在内容区域简单设置我的TabBarView:

return Scaffold(
      appBar: AppBar(
        //TODO: Make title dynamic to page using tabController.index turnkey operator
        title: Text('Admin Dashboard - Overview'),
      ),
      body: Container(
          child: Row(
        children: <Widget>[
          //Responsive Sidebar
          DashboardSideBar(),
          //Main Dashboard Content
          Expanded(
            child: TabBarView(controller: tabController,
            children: <Widget>[
              DashboardAdmin(),
              Container(child: Text('Hello World!'),),
              Container(child: Text('Page 3'),),
              Container(child: Text('Page 4'),),
              Container(child: Text('Page 5'),),
            ],),
          ),
        ],
      )),
    );

我仍需重构并清理我的代码，但对于任何想要创建一个干净的动态Web仪表板的人来说，这就是方法 :)

- JobsyNZ

---

我们可以同时使用路由器和选项卡控制器吗？为了实现不同的菜单项深度链接而有不同的路由。请帮帮我。我是Flutter的新手，正在尝试使用Flutter Web构建SPA Web应用程序。我的Web应用程序应该有一个固定的菜单，每个菜单项都应该有深度链接。当菜单项被点击时，它不应刷新菜单小部件，但当前菜单项必须被选中，以便根据所选菜单项加载内容视图。请给我指一些好的参考资料。 - Sabbu

可以的，你不会像路由器那样拥有一个路由器，而是更多地链接到你想要查看的选项卡。用你现有的代码提出一个问题，我今天会帮助你解决。 - Jackson Lee

如何使用默认路由器或fluro_router添加深度链接？谢谢，救了我的一命。 - Nzadibe

你是否已将它与 PageView 绑定？ - SalahAdDin

谢谢，非常有帮助。 :) - Zohaib Tariq

请问您能展示完整的实现吗？ - who-aditya-nawandar