Flutter 中带有导航栏的永久视图 [英] Permanent view with navigation bar in Flutter

问题描述

我有一个场景，我有 2 个视图:

I have a scenario where I have 2 views:

• 查看 1
• 查看 2

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

On a button press from View 1, Navigator.of(context).pushnamed('/view2') is invoked, which pushes View 2 to the screen. In this case, the entire view is transitioned from View 1 to View 2.

是否有可能在从视图 1 转换到视图 2 时仍保留在屏幕上的永久视图?类似于 Soundcloud 在底部的播放控件是如何做到的.无论您导航到哪个屏幕，它始终永久显示的位置.这张图描绘了我想要实现的目标:

Is it possible to have a permanent view that will still stay on screen when transitioning from View 1 to View 2? Similar to how Soundclould does it with its play controls at the bottom. Where it's always permanently displayed no matter which screens you navigate to. This diagram depicts what I'm trying to achieve:

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

On iOS, I'm able to achieve this by having a Navigation Controller in a ContainerView in a ViewController, then have the permanent view occupy the bottom of the screen right below the ContainerView

推荐答案

您可以在此处使用相同的方法.父小部件可以有两个部分:Navigator 和 PermanentView.通过推送路线，您将仅更改导航器小部件.演示:

You can use the same approach here. Parent widget can have two parts: Navigator and PermanentView. By pushing routes you will change only Navigator widget. Demo:

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(),
  );
}

这篇关于Flutter 中带有导航栏的永久视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！