Flutter中带有导航栏的永久视图
问题内容:
我有一个场景,其中有2个视图:
- 查看1
- 查看2
从视图1按下按钮时,将调用Navigator.of(context).pushnamed(’/ view2’),将View
2推到屏幕上。在这种情况下,整个视图将从视图1过渡到视图2。
从视图1切换到视图2时,是否有可能会在屏幕上保留一个永久视图?类似于Soundclould在底部具有播放控件的方式。无论您浏览到哪个屏幕,它始终始终显示在哪里。下图描述了我要实现的目标:
在iOS上,我可以通过在ViewController的ContainerView中有一个导航控制器来实现此目的,然后使永久视图占据ContainerView下方的屏幕底部
问题答案:
您可以在此处使用相同的方法。父窗口小部件可以包含两个部分:Navigator和PermanentView。通过推送路线,您将仅更改导航器小部件。演示:
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
Route _onRoute(RouteSettings settings) {
final str = settings.name.split("/")[1];
final index = int.parse(str, onError: (s) => 0);
return new MaterialPageRoute(
builder: (BuildContext context) => new Home(index: index));
}
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Expanded(
child: new MaterialApp(
title: 'Flutter Demo',
onGenerateRoute: _onRoute,
),
),
new Container(
height: 44.0,
color: Colors.blueAccent,
child: new Center(
child: new Text("permanent view"),
),
)
],
);
}
}
class Home extends StatelessWidget {
Home({Key key, this.index}) : super(key: key);
final int index;
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
title: new Text("View ${index}"),
),
body: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text("View ${index}"),
new FlatButton(
onPressed: () =>
Navigator.of(context).pushNamed("/${index + 1}"),
child: new Text("Push"))
],
),
),
);
}
void main() {
runApp(
new MyApp(),
);
}