flutter - 如何在 Flutter 中从 CurvedNavigationBar 中的子项更改页面

Question

我在颤振中使用 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...  

    });
   )
}

}

标签： flutterdartflutter-layout

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");
  }
}