flutter 选项卡 TabBar

1.基本选项卡

只带文字选项卡

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(
      text: '选项卡一',
    ),
    Tab(
      text: '选项卡二',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "底部标签栏",
      home: DefaultTabController(
        //选项卡长度
        length: myTabs.length,
        child: Scaffold(
            appBar: AppBar(
              title: Text('AppBar标题'),
              //添加选项卡按钮，注意此bottom表示在AppBar的底部，在整个页面上看还是处于顶部区域
              bottom: TabBar(
                tabs: myTabs,
              ),
            ),
            body: TabBarView(
              children: myTabs.map((Tab tab) {
                return Center(child: Text(tab.text));
              }).toList(),
            )),
      ),
    );
  }
}

2.带图片选项卡

image.png

import 'package:flutter/material.dart';

void main() => runApp(TabbarSample());

class TabbarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "TabbarSample",
      home: DefaultTabController(
        length: items.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('tabbar选项卡'),
            bottom: TabBar(
              tabs: items.map((ItemView item) {
                return Tab(text: item.title, icon: Icon(item.icon));
              }).toList(),
            ),
          ),
          body: TabBarView(
              children: items.map((ItemView item) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: SelectdView(
                item: item,
              ),
            );
          }).toList()),
        ),
      ),
    );
  }
}

class SelectdView extends StatelessWidget {
  const SelectdView({Key key, this.item}) : super(key: key);

  final ItemView item;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final TextStyle textStyle = Theme.of(context).textTheme.display1;

    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(
              item.icon,
              size: 128.0,
              color: textStyle.color,
            ),
            Text(
              item.title,
              style: textStyle,
            )
          ],
        ),
      ),
    );
  }
}

class ItemView {
  const ItemView({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<ItemView> items = const <ItemView>[
  const ItemView(title: "自驾", icon: Icons.directions_car),
  const ItemView(title: "自行车", icon: Icons.directions_bike),
  const ItemView(title: "轮船", icon: Icons.directions_boat),
  const ItemView(title: "公交车", icon: Icons.directions_bus),
  const ItemView(title: "火车", icon: Icons.directions_railway),
  const ItemView(title: "步行", icon: Icons.directions_walk),
];