一尘不染

Flutter中带有导航栏的永久视图

flutter

我有一个场景,其中有2个视图:

  • 查看1
  • 查看2

从视图1按下按钮时,将调用Navigator.of(context).pushnamed(’/ view2’),将View
2推到屏幕上。在这种情况下,整个视图将从视图1过渡到视图2。

从视图1切换到视图2时,是否有可能会在屏幕上保留一个永久视图?类似于Soundclould在底部具有播放控件的方式。无论您浏览到哪个屏幕,它始终始终显示在哪里。下图描述了我要实现的目标:
在此处输入图片说明

在iOS上,我可以通过在ViewController的ContainerView中有一个导航控制器来实现此目的,然后使永久视图占据ContainerView下方的屏幕底部


阅读 258

收藏
2020-08-13

共1个答案

一尘不染

您可以在此处使用相同的方法。父窗口小部件可以包含两个部分: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(),
  );
}
2020-08-13