一个用于 Flutter 的水平和垂直标签小部件

入门

一个简单的用法示例。要查看所有设置,请访问此包的 API 参考

HorizontalTabView

HorizontalTabView(
    initialIndex: 0,
    contentScrollAxis: Axis.horizontal,
    backgroundColor: Colors.grey.shade100,
    tabs: List.generate(10, (idx) => Tab(text: "Flutter")),
    contents:
        List.generate(items.length, (idx) => 
            Container(child: Text('Flutter'), padding: EdgeInsets.all(20))
        )
    ),
);

VerticalTabView

...

VerticalTabView(
  tabsWidth: 150,
  tabs: <Tab>[
    Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
    Tab(child: Text('Dart')),
    Tab(child: Text('NodeJS')),
    Tab(child: Text('PHP')),
    Tab(child: Text('HTML 5')),
  ],
  contents: <Widget>[
    Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
    Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
    Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
    Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
    Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
  ],
),

GitHub

查看 Github