Question

早上好社区我有以下带有底部导航选项卡的界面浮动代码，我有两个问题，应用程序如何在用户每次单击时两次无法导航状态，我的另一个问题是如何在不丢失底部导航的情况下转到详细信息页面该应用程序每个屏幕上的标签

我已经在这个问题上停留了几天，却不知道如何处理详细页面的导航主题

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:app/helpers/static-tabs.dart';
import 'package:app/pages/first-tab.dart' as first;
import 'package:app/pages/account-tab.dart' as second;
import 'package:app/pages/camara-tab.dart' as third;
import 'package:app/pages/fundaciones-tab.dart' as four;
import 'package:app/pages/noticias-tab.dart' as five;
import 'package:app/helpers/static-tabs.dart';

class MyTabs extends StatefulWidget{
@override
MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin{



TabController controller;
  int _currentIndex = 0;

  GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');
  final List<Widget>  _children =
   [
   first.FirstPage(),
   second.SecondPage(),
   third.Third(),
   four.FourPage(),
   five.Five()
  ];

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 5);
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }

  void onTappedBar(int index){
     setState(() {
      _currentIndex = index; 
     print (index);


   final BottomNavigationBar navigationBar = globalKey.currentWidget;
       if (_currentIndex == 2 ){
         print ("entra");

       navigationBar.onTap(index);
      //return;
     }

    });
  }

    //Use the navigator like you usually do with .of(context) method
  _openDetailsPage(BuildContext context) => Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => StaticTabsPage()));


  @override
  Widget build(BuildContext context){
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
    return new Scaffold(
      backgroundColor: Color(0xFFEDF0F6),
      appBar: new AppBar(title: new Text("Adoptame"), centerTitle: true, backgroundColor: Colors.green,

      ),

         bottomNavigationBar: ClipRRect(

        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomNavigationBar(
          onTap: onTappedBar,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.dashboard,
                size: 30.0,
                color: Colors.black,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.search,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
                child: FlatButton(
                  padding: EdgeInsets.symmetric(vertical: 10.0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                  color: Color(0xFF23B66F),
                  onPressed: () =>   _openDetailsPage(context),
                  child: Icon(
                    Icons.add,
                    size: 35.0,
                    color: Colors.white,
                  ),
                ),
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.favorite_border,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.person_outline,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
          ],
        ),
      ),
      body: _children [_currentIndex] ,

    );
  }
}

非常感谢您的回答，

致谢

Answer 1

这是在抖动中添加底部导航的方法

 import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = ' Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    ScreenOne(),
    ScreenTwo(),
    ScreenThree()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
//handle your selection here
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],

        onTap: _onItemTapped,
      ),
    );
  }
}

底部导航栏抖动详细信息页面

1 个答案: