Question

在我的应用中，我有两个页面Page1和Page2。我还有一个标签栏，显示在屏幕底部。问题是，当我从其中一个页面使用Navigator.push时，TabBar消失了。查看以下动画：

这是我所有的代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use PDF;
use App\Caisse;

class PrintController extends Controller
{
    public function testPdf()
    {
        $caisse = Caisse::where('type',1)->first();
        $pdf = PDF::loadView('print.test',[
            'date' => date('M-Y'),
            'caisse' => $caisse,
            ]);
        return $pdf->download('invoice.pdf');
    }
}

Answer 1

编辑

对不起，我误解了这个问题，它可能是Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator的重复项

原始答案

使用单个母版页，然后用每个子页（包含它们自己的内容）动态替换正文：

示例：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // current page index of the bottom navigation bar
  int _currentIndex = 0;

  // update the state of the index on tab tap
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // list of pages of the bottom navigation bar
    final List<Widget> _children = [
      FirstPage(title: "My page 1"),
      SecondPage(title: "My page 2"),
      ThirdPage(title: "My page 3"),
    ];

    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.shifting,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.event), title: Text("Page 1")),
          BottomNavigationBarItem(icon: Icon(Icons.group), title: Text("Page 2")),
          BottomNavigationBarItem(icon: Icon(Icons.camera_alt), title: Text("Page 3")),
        ],
      ),
    );
  }
}

然后FirstPage，SecondPage，ThirdPage只能满足自己的内容：

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: // your body content
    );
  }
}

Answer 2

按下一条路线会将Widget设置为MaterialApp的子代。每个屏幕都应包含自己的支架和自己的BottonNavigatorBar。

Answer 3

借助cupertino小部件可以轻松完成所需的操作。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MainPage());

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo App',
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.event), title: Text("Tab 1")),
            BottomNavigationBarItem(
                icon: Icon(Icons.group), title: Text("Tab 2")),
          ],
          currentIndex: _currentIndex,
          onTap: (int) {
            setState(() {
              _currentIndex = int;
            });
          },
        ),
        tabBuilder: (context, int) {
          switch (int) {
            case 0:
              {
                return CupertinoTabView(
                  builder: (context) {
                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Tab 1 Content'),
                          ),
                          CupertinoButton.filled(
                              child: Text('Goto next Page in Tab1'),
                              onPressed: () {
                                Navigator.push(context,
                                    CupertinoPageRoute(builder: (context) {
                                  return Body(int);
                                }));
                              })
                        ],
                      ),
                    );
                  },
                );
              }
              break;
            case 1:
              {
                return CupertinoTabView(
                  builder: (context) {
                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Tab 2 Content'),
                          ),
                          CupertinoButton.filled(
                              child: Text('Goto next Page in Tab2'),
                              onPressed: () {
                                Navigator.push(context,
                                    CupertinoPageRoute(builder: (context) {
                                  return Body(int);
                                }));
                              })
                        ],
                      ),
                    );
                  },
                );
              }
              break;
          }
        },
      ),
    );
  }
}

class Body extends StatefulWidget {
  final int index;

  Body(this.index);

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Page2 of Tab${widget.index}'),
        ),
        child: Center(
          child: Container(
            child: Text('Page 2'),
          ),
        ));
  }
}

在Flutter的所有页面上显示BottonNavigatorBar

3 个答案: