如何在 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),
            ],
          ),
        ),
      ),
    );
  }
}