bottomNavigationBar如何通过ontab在flutter中重建同一页面?

问题描述 投票:0回答:1

我像下面这样制作bottomNavigationBar

  List<Widget> pages = [
    Dashboard(),
    AllServices(),
    InformationPage(),
  ];


  int _selectedIndex = 0;

  Widget _bottomNavigationBar(int selectedIndex)  {
    return BottomNavigationBar(
      onTap: (int index) => setState(() => _selectedIndex = index),
      currentIndex: selectedIndex,
      type: BottomNavigationBarType.fixed,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title:  new Text("Dashboard"),
        ),
        BottomNavigationBarItem(
          icon: new Icon(Icons.location_on),
          title: new Text("AllServices"),
        ),
        BottomNavigationBarItem(
          icon: new Icon(Icons.person),
          title:new Text("InformationPage"),
      ],
    );

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      body: pages[_selectedIndex],
    );
  }

[如果用户在页面之间导航,每件事都是正确的,但是AllServices类具有两个条件来呈现两个不同的小部件,我希望如果AllServices页面中的用户再次打开AllServices底部导航AllServices页面,再次进行重建,但是ontap无法在同一页面上进行重建再次,我该如何解决这个问题?

flutter flutter-bottomnavigation
1个回答
0
投票

只需检查下面我编写的代码:


import 'package:flutter/material.dart';
import 'package:wrap_text/dashboard.dart';


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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Dashboard(),
      ),
    );
  }
}

以下是我制作了bootomAppbar的helper_widget文件:

import 'package:flutter/material.dart';
import 'package:wrap_text/dashboard.dart';


Widget bottomAppBar(context) {
  return BottomAppBar(
    color: Colors.black,
    child: Container(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            iconSize: 30.0,
            icon: Icon(Icons.home,color: Colors.white,),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Dashboard()),
              );
            },
          ),
          IconButton(
            iconSize: 30.0,
            icon: Icon(Icons.location_on,color: Colors.white,),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AllServices()),
              );
            },
          ),
          IconButton(
            iconSize: 30.0,
            icon: Icon(Icons.settings,color: Colors.white,),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => InformationPage()),
              );
            },
          ),
        ],
      ),
    ),
  );
}



// this are the different pages for just a sample.
 class AllServices extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(

     );
   }
 }



class InformationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text('Information PAge')),
    );
  }
}

这是DashBoard页面:

import 'package:flutter/material.dart';
import 'package:wrap_text/helper_widget.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashBoardState createState() => _DashBoardState();
}

class _DashBoardState extends State<Dashboard> {

  @override
  Widget build(BuildContext context) {
     print('fguyhg');
    return Scaffold(
      appBar: AppBar(title: Text('sample'),),
      bottomNavigationBar: bottomAppBar(context),
          body: Container(
        child: Center(child: Text('Dashboard Page')),
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.