flutter - 如何在Flutter的弧形导航栏中更改子页面

Question

我在flutter中使用CurvedNaviagtionBar ...在这里我如何实现它。
我想更改子窗口小部件中的标签...
使用_bottomNavigationKey可以更改该小部件中的选项卡...但是如何从子小部件中执行此操作

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  final NavigationTabHome tab1 = NavigationTabHome();
  final NavigationTabCategory tab2 = NavigationTabCategory();
  final NavigationTabSearch tab3 = NavigationTabSearch();
  final NavigationTabOffer tab4 = NavigationTabOffer();
  final NavigationTabCart tab5 = NavigationTabCart();
  
  
  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return tab1;
      case 1:
        return tab2;
      case 2:
        return tab3;
      case 3:
        return tab4;
      case 4:
        return tab5;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF4F4F4),
      appBar: AppBar(
        title: Text(
            "Home",),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 55.0,
        items: <Widget>[
          Icon(Icons.email),
          Icon(Icons.add),
          Icon(Icons.edit_attributes),
          Icon(Icons.golf_course),
          Icon(Icons.filter),
        ],
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: pageChooser(_page),
    );
  }
}

我需要从小部件子项下面更改页面...我尝试了回调，但它的意思是...它不能在初始化程序中使用

class NavigationTabHome extends StatefulWidget {
  @override
  _NavigationTabHomeState createState() => _NavigationTabHomeState();
}

class _NavigationTabHomeState extends State<NavigationTabHome> {
  @override
  Widget build(BuildContext context) {
    return Centre(
        child:RaisedButton(
           onPressed:(){

         //Need to change the curved Navigation tab on clicking this...  

    });
   )
}

}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以传递callback，然后callback将调用setPage的CurvedNavigationBarState函数
程式码片段

void setPage(index) {
    final CurvedNavigationBarState navBarState =
        _bottomNavigationKey.currentState;
    navBarState.setPage(index);
  }

@override
  void initState() {
    tab1 = NavigationTabHome(setPage);
    super.initState();
  }
...
class NavigationTabHome extends StatefulWidget {
  Function callback;
  NavigationTabHome(this.callback);
... 
RaisedButton(
            onPressed: () {
              widget.callback(3);
            },
            child: Text("Switch")));  

工作演示

完整的代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  NavigationTabHome tab1;
  final NavigationTabCategory tab2 = NavigationTabCategory();
  final NavigationTabSearch tab3 = NavigationTabSearch();
  final NavigationTabOffer tab4 = NavigationTabOffer();
  final NavigationTabCart tab5 = NavigationTabCart();

  void setPage(index) {
    final CurvedNavigationBarState navBarState =
        _bottomNavigationKey.currentState;
    navBarState.setPage(index);
  }

  @override
  void initState() {
    tab1 = NavigationTabHome(setPage);
    super.initState();
  }

  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return tab1;
      case 1:
        return tab2;
      case 2:
        return tab3;
      case 3:
        return tab4;
      case 4:
        return tab5;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF4F4F4),
      appBar: AppBar(
        title: Text(
          "Home",
        ),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 55.0,
        items: <Widget>[
          Icon(Icons.email),
          Icon(Icons.add),
          Icon(Icons.edit_attributes),
          Icon(Icons.golf_course),
          Icon(Icons.filter),
        ],
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: pageChooser(_page),
    );
  }
}

class NavigationTabHome extends StatefulWidget {
  Function callback;
  NavigationTabHome(this.callback);

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

class _NavigationTabHomeState extends State<NavigationTabHome> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: RaisedButton(
            onPressed: () {
              widget.callback(3);
            },
            child: Text("Switch")));
  }
}

class NavigationTabCategory extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("NavigationTabCategory");
  }
}

class NavigationTabSearch extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("NavigationTabSearh");
  }
}

class NavigationTabOffer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("NavigationTabOffer");
  }
}

class NavigationTabCart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("NavigationTabCart");
  }
}