简体   繁体   English

Flutter 在使用 BottomNavigationBar 加载的页面之间切换

[英]Flutter switch between pages loaded using BottomNavigationBar

I have created Flutter home page with BottomNavigationBar by following this link https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html我通过以下链接创建了带有 BottomNavigationBar 的 Flutter 主页https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

It is working fine.它工作正常。 But I wanted to know how to go to the first page from the third page.但是我想知道如何从第三页转到第一页。 I mean, inside the third page, I have a button, when the user clicks on it, I have to redirect the user to the first page.我的意思是,在第三页内,我有一个按钮,当用户点击它时,我必须将用户重定向到第一页。 ( I'm not speaking about the button on the bottom navigation bar ) (我不是在说底部导航栏上的按钮)

Is it possible?是否可以?

Just change the _selectedIndex and call the setState method,like this:只需更改_selectedIndex并调用setState方法,如下所示:

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget>
    with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  List<Widget> _widgetOptions;

  @override
  void initState() {
    super.initState();
    _widgetOptions = <Widget>[
      Text(
        'Index 0: Home',
        style: optionStyle,
      ),
      Text(
        'Index 1: Business',
        style: optionStyle,
      ),
      TestBusinessPage<Object>((data,index){
        _onItemTapped(index);
      }),
    ];
  }

  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'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

/// T is business data,index is target index
typedef void OnButtonClicked<T>(T data, int index);

class TestBusinessPage<T> extends StatelessWidget {
  final OnButtonClicked buttonClicked;

  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  TestBusinessPage(this.buttonClicked);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          buttonClicked(null,0);
        },
        child: Text(
          'Index 2: School',
          style: optionStyle,
        ),
      ),
    );
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 颤动:bottomNavigationBar 无法使用 WebView 在 html 页面之间切换 - flutter: bottomNavigationBar cannot switch between html pages using WebView 如何在 flutter 中以编程方式切换 BottomNavigationBar 选项卡(以及在页面之间导航) - How to switch BottomNavigationBar tabs Programmatically in flutter (and Navigate between pages) 在页面之间使用bottomNavigationBar进行颤振导航会使应用程序崩溃 - Flutter navigation with the bottomNavigationBar between pages crash the app Flutter:如何使用 BottomNavigationBar 在页面之间设置动画 - Flutter: How to animate between pages with BottomNavigationBar Flutter 使用一个 Scaffold 使用 BottomNavigationBar 更改页面 - Flutter Changing pages with BottomNavigationBar using one Scaffold 如何使用 flutter 中的底部导航栏移动到新页面? - How to move to a new pages using bottomnavigationbar in flutter? 如何使用BottomNavigationBar在.dart文件之间切换 - How to switch between .dart files using BottomNavigationBar Flutter bottomNavigationBar不能更改页面 - Flutter bottomNavigationBar not change pages 使用 Flutter 中的 BottomNavigationBar 导航页面时的标准做法? - Standard practice when navigating pages using BottomNavigationBar in Flutter? 使用平滑页面指示器在颤动中的页面之间切换 - switch between pages in the flutter using the Smooth Page Indicator
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM