美文网首页
Flutter之底部导航栏和顶部Tab切换

Flutter之底部导航栏和顶部Tab切换

作者: 前端小慵卿 | 来源:发表于2019-07-29 13:44 被阅读0次

    先上效果图,页面贼丑,但功能正确!



    在简单的单页面中会只用一个dart文件去写Row、Column、Container等Widgets。
    而在复杂的应用中,单单一个页面是不够,根据不同的需要,组件化Class类复用。
    首先可以根据tab的个数创建对应的Dart页面。


    底部导航栏

    红色圈出的是pages文件夹下bottom Tabs 4个tab文件。

    //book_page.dart
    import 'package:flutter/material.dart'; //每个新建的都要引入
    
    class Book extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return new Center(
          child: Text('Book'),
        );
      }
    }
    
    //main.dart
    //1.引入4个tab页面-相对路径和绝对路径都可以
    import 'pages/home.page.dart';
    import 'pages/book_page.dart';
    import 'pages/movie_page.dart';
    import 'pages/music_page.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter  Router',
          theme: ThemeData(
            primarySwatch: Colors.orange,
          ),
          home: Homes(),//页面
          //路由表设置
          routes: <String, WidgetBuilder>{
            '/Second':(BuildContext context) => new SecondPage(),
          },
        );
      }
    }
    
    //2.
    class Homes extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _HomesState();
      }
    }
    //3.List<Widget>存放你的页面
    //List<BottomNavigationBarItem>存放底部图标
    //底部导航栏有几个图标,那么就需要添加几个BottomNavigationBarItem。不过最好不要添加过多的底部导航,最多5个。一般应该没有超过5个图标的吧。
    class _HomesState extends State<Homes> {
      int _currentIndex = 0;
       final List<Widget> _children = [Home(), Book(), Music(), Movie()];
    
      final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            ),
        BottomNavigationBarItem(
            icon: Icon(Icons.book),
            title: Text('Book'),
            ),
        BottomNavigationBarItem(
            icon: Icon(Icons.music_video),
            title: Text('Music'),
            ),
        BottomNavigationBarItem(
            icon: Icon(Icons.movie),
            title: Text('Movie'),
            ),
      ];
       @override
      Widget build(BuildContext context) {
        return Scaffold( //构建底部导航,并添加点击事件
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            onTap: onTabTapped,
            currentIndex: _currentIndex,//点击索引
            items: _list,
          ),
          body: _children[_currentIndex],
        );
      }
    //点击事件
      void onTabTapped(int index) {
        //通过setState告诉Scaffold,你点击了哪一个,它在显示哪一个了
        setState(() {
          _currentIndex = index;
        });
      }
    }
    
    顶部导航栏

    绿色圈出的是pages文件夹下top Tabs 3个tab文件。

    import 'package:flutter/material.dart'; //依旧引入
    import 'tab_bike.dart';
    import 'tab_car.dart';
    import 'tab_transit.dart';
    

    当我们切换 Tab 导航栏时,Tab 的内容要跟着发生改变,这个就是需要 TabCOntroller 来完成的。想要简单地实现,使用 DefaultTabController 就可以了。

    DefaultTabController(
      // The number of tabs / content sections we need to display
      length: 3,
      child: // See the next step!
    );
    

    Tab的位置,这里的是放在了title的位置。TabBar:Tab (Icon / title ),TabBarView:Tab 页的内容

    class Home extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return new DefaultTabController(//DefaultTabController
          length: 3,
          child: Scaffold(
          appBar: AppBar(
            title: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            )
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                child: TabCar(), //TabCar对应tab_car.dart的Class name
              ),
              Container(
                child: TabTransit(),//TabCar对应tab_transit.dart的Class name
              ),
              Container(
                child: TabBike(),//TabCar对应tab_bike.dart的Class name
              ),
            ],
          ),
        ),
        );
      }
    }
    

    这里贴出tab_bike.dart的代码

    import 'package:flutter/material.dart';
    
    class TabBike extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return new Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.directions_bike),
              Text('TabBike')
            ],
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter之底部导航栏和顶部Tab切换

          本文链接:https://www.haomeiwen.com/subject/wztbrctx.html