在Flutter中的平板电脑上制作固定的应用程序级菜单,而不是在抽屉上 [英] Making fixed app-wide menu instead of Drawer on tablets in Flutter
问题描述
我的应用程序有很多路线,几乎每条路线都使用具有相同Drawer菜单的Scaffold在应用程序内部导航(我自己的CustomDrawer小部件).对于具有大屏幕的设备,我希望始终在布局的左侧显示菜单,而不要使用抽屉"(在Gmail应用中,它的工作方式与此相同.我附上了图片).换句话说,我需要使用固定菜单进行响应式布局.
My application has a lot of routes and almost every route uses Scaffold with the same Drawer menu to navigate inside the app (my own CustomDrawer widget). As for devices with big screen, I want to always show the menu on the left side in layout, instead of using Drawer (it works like this in Gmail app. I attached a pic). In other words, I need to make a responsive layout with fixed menu.
我尝试过的事情:
- 我知道您可以使用LayoutBuilder来学习约束大小;
- 在每条路径内进行相同的布局都可以,但是这是一个不好的解决方案,因为每条路径都会为自己建立菜单(滚动位置会有所不同,许多菜单会有许多状态,等等).我需要一个适用于整个不同路线的应用程序级菜单,但无法在顶部路线上进行布局;
- 将所有路由压缩为一条路由,同时更改主要内容的状态将需要大量的重构,而且听起来一点也不好.
在React中,应用布局看起来像这样:
In React the app layout would look something like this:
<App>
<Menu />
<main className="content">
<Switch>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/" component={Home} />
</Switch>
</main>
</App>
但是我不知道如何在Flutter中制作这样的东西.
But I have no idea how to make something like this in Flutter.
tl; dr:要使UI对大屏幕响应,我想显示固定菜单而不是抽屉.一个菜单可用于整个应用程序,而不是每个路线.
tl;dr: To make UI responsive for big screens, I want to show fixed menu instead of Drawer. One menu for whole app, not for every route.
推荐答案
诀窍是使用嵌套的导航器.如果视口的宽度很大,则将菜单与内容放在一起,否则将菜单作为 drawer
参数传递给 Scaffold
.
The trick was to use a nested navigator. If viewport's width is big, I put a menu in a row with content, otherwise pass a menu to Scaffold
as drawer
parameter.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final routes = List.generate(20, (i) => 'test $i');
final navigatorKey = GlobalKey<NavigatorState>();
bool isMenuFixed(BuildContext context) {
return MediaQuery.of(context).size.width > 500;
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final menu = Container(
color: theme.canvasColor,
child: SafeArea(
right: false,
child: Drawer(
elevation: 0,
child: ListView(
children: <Widget>[
for (final s in routes)
ListTile(
title: Text(s),
onTap: () {
// Using navigator key, because the widget is above nested navigator
navigatorKey.currentState.pushNamedAndRemoveUntil(s, (r) => false);
// navigatorKey.currentState.pushNamed(s);
},
),
],
),
)
)
);
return Row(
children: <Widget>[
if (isMenuFixed(context))
menu,
Expanded(
child: Navigator(
key: navigatorKey,
initialRoute: '/',
onGenerateRoute: (settings) {
return MaterialPageRoute(
builder: (context) {
return Scaffold(
appBar: AppBar(
title: Text(settings.name),
),
body: SafeArea(
child: Text(settings.name),
),
drawer: isMenuFixed(context) ? null : menu,
);
},
settings: settings
);
},
),
),
],
);
}
}
这篇关于在Flutter中的平板电脑上制作固定的应用程序级菜单,而不是在抽屉上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!