美文网首页
Flutter学习笔记(三)-TabBar的使用

Flutter学习笔记(三)-TabBar的使用

作者: 过往不恋纵情向前 | 来源:发表于2019-03-19 16:55 被阅读0次

    Flutter TabBar的使用

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_app/list_main.dart';
    
    class HomePageWidget extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePageWidget> {
      int _index = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("主页"),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  child: Align(
                    child: getItemWidget(_index),
                  ),
                  color: Colors.white,
                  margin: EdgeInsets.all(0),
                ),
              ),
              buildTabBar()
            ],
          ),
        );
      }
    
      Widget buildTabBar() {
        return CupertinoTabBar(
          currentIndex: _index,
          items: buildBarItems(),
          onTap: onTap,
        );
      }
    
      List<BottomNavigationBarItem> buildBarItems() {
        List<BottomNavigationBarItem> items = new List();
        items.add(
            BottomNavigationBarItem(icon: Icon(Icons.list), title: Text("列表")));
        items.add(BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm), title: Text("电话")));
        return items;
      }
    
      Widget getItemWidget(int index) {
        if (index == 0) {
          return ListPageState();
        }
        return Text("Page: $index");
      }
    
      void onTap(int index) {
        setState(() {
          _index = index;
        });
      }
    }
    
    

    相关文章

      网友评论

          本文标题:Flutter学习笔记(三)-TabBar的使用

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