flutter web 中的路由有意想不到的行为
Routes in flutter web have unexpected behavior
在 flutter for flutter web 中使用内置脚手架/应用栏时,使用导航器推送新路由时,应用栏上仍会显示后退按钮,浏览器中的 url 保持不变。这意味着浏览器的后退按钮不起作用,这是一个非常奇怪的用户体验。有办法解决这个问题吗?
我已经尝试过多种方式推送路由(pushReplacement 摆脱了后退按钮,但浏览器后退按钮仍然不起作用)
HomeScreen.dart
@override
State<StatefulWidget> createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: Navbar.buildDrawer(context),
appBar: Navbar.buldNavbar(context),
body: _buildBody(),
);
}
Widget _buildBody(){
return Text('Home');
}
}
Navbar.dart
static Drawer buildDrawer(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text('Home'),
leading: Icon(Icons.home),
onTap: (){
Navigator.of(context).pushReplacementNamed('/');
},
),
ListTile(
title: Text('About Us'),
leading: Icon(Icons.people),
onTap: (){
Navigator.of(context).pushReplacementNamed('/about');
},
),
ListTile(
title: Text('Contact'),
leading: Icon(Icons.contact_mail),
onTap: (){
Navigator.of(context).pushReplacementNamed('/contact');
},
)
],
),
);
}
static AppBar buldNavbar(BuildContext context) {
return AppBar(
title: FlatButton(
child: Padding(
padding: EdgeInsets.all(8),
child: Image.asset('assets/whiteLogo.png'),
),
onPressed: () {
Navigator.of(context).pushNamed('/');
},
),
);
}
}
我希望路由会在浏览器中更改 url,使我们能够使用后退按钮和正常路由的其他功能,但实际结果是在浏览器中显示相同的路由并且不得不使用自动 AppBar 后退按钮
看来 flutter 的更新现在解决了这个问题。使用导航器时,现在会发生预期的行为。
在 flutter for flutter web 中使用内置脚手架/应用栏时,使用导航器推送新路由时,应用栏上仍会显示后退按钮,浏览器中的 url 保持不变。这意味着浏览器的后退按钮不起作用,这是一个非常奇怪的用户体验。有办法解决这个问题吗?
我已经尝试过多种方式推送路由(pushReplacement 摆脱了后退按钮,但浏览器后退按钮仍然不起作用)
HomeScreen.dart
@override
State<StatefulWidget> createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: Navbar.buildDrawer(context),
appBar: Navbar.buldNavbar(context),
body: _buildBody(),
);
}
Widget _buildBody(){
return Text('Home');
}
}
Navbar.dart
static Drawer buildDrawer(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text('Home'),
leading: Icon(Icons.home),
onTap: (){
Navigator.of(context).pushReplacementNamed('/');
},
),
ListTile(
title: Text('About Us'),
leading: Icon(Icons.people),
onTap: (){
Navigator.of(context).pushReplacementNamed('/about');
},
),
ListTile(
title: Text('Contact'),
leading: Icon(Icons.contact_mail),
onTap: (){
Navigator.of(context).pushReplacementNamed('/contact');
},
)
],
),
);
}
static AppBar buldNavbar(BuildContext context) {
return AppBar(
title: FlatButton(
child: Padding(
padding: EdgeInsets.all(8),
child: Image.asset('assets/whiteLogo.png'),
),
onPressed: () {
Navigator.of(context).pushNamed('/');
},
),
);
}
}
我希望路由会在浏览器中更改 url,使我们能够使用后退按钮和正常路由的其他功能,但实际结果是在浏览器中显示相同的路由并且不得不使用自动 AppBar 后退按钮
看来 flutter 的更新现在解决了这个问题。使用导航器时,现在会发生预期的行为。