如何在 Flutter 中拥有一个选项卡式小部件？

Question

我有一个带有代表不同值的饼图的页面。我想要做的是在饼图下方有一个小部件，它的工作方式类似于带有 Tabbar 的支架，它具有不同的小部件，在我的情况下，我已经完成了一些 Listviews，它们代表饼图中的所有不同切片。当你点击不同的标签时，它会切换到相应的列表，就像一个标签页。

我不知道怎么做，所以如果没有预制的方法，我想我会为此制作自己的小部件，但在我诉诸于此之前，我想问一下是否已经有一个小部件/此方法或其他人之前遇到过此问题。

我刚刚用 balsamiq 快速拟定了一些东西：

一切都完成了，只是选项卡，顺便说一下，不需要看起来像那样

我需要输入这个小部件的代码如下：

class _ListWithTabsState extends State<ListWithTabs> {
  @override
  Widget build(BuildContext context) {
    //here i need the widget
  }
}

class DetailPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return CustomAppPage(
       widget: Column(
          children: [
             PieChartClass(data),
             ListWithTabs(data),
         ],
      ),
   ),
}

Answer 1

这里有用于此的小部件：

https://flutter.dev/docs/cookbook/design/tabs

您基本上使用DefaultTabController、TabBar、Tab 和TabBarView，它会自动在不同的选项卡之间进行动画处理。或者，如果您想要更多控制权，也可以使用自己的控制器。

完整示例：

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}