gpt4 book ai didi

Flutter Web Dashboard Content - 最佳实践?

转载 作者:行者123 更新时间:2023-12-04 02:38:24 26 4
gpt4 key购买 nike

我正在创建一个管理仪表板,我目前连续有两个 View 小部件:

  • 一个侧边栏 - 300 像素(不是抽屉,因为我希望它永久显示) - 有一个列表。
  • 内容小部件 - 展开。

Admin Dashboard View

这是页面的代码:

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 是否为此正确布局,还是我需要更改它?

最佳答案

所以我找到了一个解决方案,我需要使用 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;
});
});
}

然后我修改了我的菜单以动画到正确的页面 onTap 并且如果我所在的页面是真的也被选中。

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 仪表板的人来说,这就是方法:)

关于Flutter Web Dashboard Content - 最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60586004/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com