將自定義小部件添加到FlutterTabBar的活動選項卡

我需要一個 TabBar 和 TabView，如https://flutter.dev/docs/cookbook/design/tabs 中所述，但有一個轉折點：我需要 ACTIVE 選項卡來顯示額外的自定義小部件。

如果用戶切換到不同的選項卡，我需要自定義小部件從以前的活動選項卡中消失，并需要一個新的自定義小部件出現在新的活動選項卡上。

另一種解釋方式：所有選項卡都需要托管我的自定義小部件的實體，但自定義小部件應該隱藏在除活動選項卡之外的所有選項卡上。

請問如何實作？

非常感謝

uj5u.com熱心網友回復：

Tab( )小部件可以容納任何小部件，而不僅僅是Text和icon

首先，您需要確定選擇了哪個選項卡。

然后，您需要執行“if” (?) 來決定要顯示哪個小部件。

使用此代碼：

int selectedTab=1;
    TabBar(
        onTap: (index) {
          selectedTab = index;
        },

        tabs: [
          Tab(
              child: (selectedTab == 1) ? yourCustomWidget1 : yourWidget1
          ),
          Tab(
              child: (selectedTab == 2) ? yourCustomWidget2 : yourWidget2
          ),
        ]);

如果這不起作用，請告訴我

uj5u.com熱心網友回復：

這都是關于狀態管理的。我做了一個使用AnimatedBuilderwith的示例，TabController但您可以自定義以滿足您的需求。

請記住：宣告式地思考這將幫助您創建具有任何業務邏輯的任何型別的螢屏。

腳步：

• 獲取當前索引
• 當所有選項卡上的當前索引更改時進行偵聽
• 驗證選項卡索引是否是當前選擇的索引
  • 如果是，則呈現自定義小部件
  • 否則，忽略，不要構建任何東西

飛鏢鏈接

import 'package:flutter/material.dart';

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

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  _TabBarDemoState createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  late final TabController _controller;

  @override
  void initState() {
    super.initState();

    _controller = TabController(length: 3, vsync: this, initialIndex: 0);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _controller,
            tabs: [
              Tab(
                child: AnimatedBuilder(
                  animation: _controller,
                  builder: (context, chiild) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.directions_car),
                        if (_controller.index == 0) const MyCustomWidget(),
                      ],
                    );
                  },
                ),
              ),
              Tab(
                child: AnimatedBuilder(
                  animation: _controller,
                  builder: (context, chiild) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.directions_transit),
                        if (_controller.index == 1) const MyCustomWidget(),
                      ],
                    );
                  },
                ),
              ),
              Tab(
                child: AnimatedBuilder(
                  animation: _controller,
                  builder: (context, chiild) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.directions_bike),
                        if (_controller.index == 2) const MyCustomWidget(),
                      ],
                    );
                  },
                ),
              ),
            ],
          ),
          title: const Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _controller,
          children: const [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
  }
}

class MyCustomWidget extends StatelessWidget {
  const MyCustomWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: const Text('Your CustomWidget'),
    );
  }
}

標籤：扑 标签栏

上一篇：Flutter，如何在添加到串列之前確定配接器是否包含字串

下一篇：TextField中的居中文本略有偏移