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')，将View 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时，是否有可能会在屏幕上保留一个永久视图?类似于Soundclould在底部具有播放控件的方式.无论您浏览到哪个屏幕，它始终始终显示在哪里.下图描述了我要实现的目标:

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屋！