页面:有3个底部标签 使用BottomNavigationBarItem实现

需求1:每次切换标签时需要刷新页面数据

需求2:进入页面时一次将3个页面的数据都加载完成

 

需求1 解决方法:

body 使用:_children[页面序号]   

例:body: _children[widget.currentIndex],

class Home extends StatefulWidget {
  int currentIndex;

  Home({Key key, this.currentIndex = 0}) : super(key:key);

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

class _HomeState extends State<Home> {

  final List<Widget> _children = [Home1(), Home2(), Home3()];
 final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签1', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签2', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签3', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签4', style: TextStyle(fontSize: 14),),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar:BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: widget.currentIndex,
        items: _list,
      ),
        //重点
      body: _children[widget.currentIndex],
    );
  }

  void onTabTapped(int index) {
    setState(() {
      widget.currentIndex = index;
    });
  }

}

需求2 :解决方法

body使用: IndexedStack(index: 页面序号, children: 页面列表,),

例: body: IndexedStack(
             index: widget.currentIndex,
             children: _children,
        ),

class Home extends StatefulWidget {
  int currentIndex;

  Home({Key key, this.currentIndex = 0}) : super(key:key);

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

class _HomeState extends State<Home> {

  final List<Widget> _children = [Home1(), Home2(), Home3()];
 final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签1', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签2', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签3', style: TextStyle(fontSize: 14),),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('标签4', style: TextStyle(fontSize: 14),),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar:BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: widget.currentIndex,
        items: _list,
      ),
        //重点
      body: IndexedStack(
        index: widget.currentIndex,
        children: _children,
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      widget.currentIndex = index;
    });
  }

}

 

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐