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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容