Flutter-tabbar切換

頂部tabbar切換

import 'package:flutter/material.dart';
import 'index_attendance_record.dart';
import 'index_diet.dart';

class IndexScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TabController _tabController;
    return new DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.event_note),text: '出勤紀錄',),
              Tab(icon: Icon(Icons.local_dining),text: '膳食',),
              Tab(icon: Icon(Icons.face),text: '成長紀錄',),
              Tab(icon: Icon(Icons.description),text: '訂單紀錄',),
            ],
            controller: _tabController,
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(child: AttendanceRecordScreen(),),
            Center(child: IndexDietScreen()),
            Center(child: Text('巴士')),
            Center(child: Text('巴士123123')),
          ],
        ),
      ),
    );
  }
}

屬性詳情

const TabBar({
    Key key,
    @required this.tabs,//显示的标签内容，一般使用Tab对象,也可以是其他的Widget
    this.controller,//TabController对象
    this.isScrollable = false,//是否可滚动
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器高度
    this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding
    this.indicator,//指示器decoration，例如边框等
    this.indicatorSize,//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
    this.labelColor,//选中label颜色
    this.labelStyle,//选中label的Style
    this.labelPadding,//每个label的padding值
    this.unselectedLabelColor,//未选中label颜色
    this.unselectedLabelStyle,//未选中label的Style
    }) : assert(tabs != null),
    assert(isScrollable != null),
    assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
    assert(indicator != null || (indicatorPadding != null)),
    super(key: key);