如何在一个选项卡中显示/隐藏一个浮动动作按钮？

Question

我想知道如何在FloatingActionButton中显示/隐藏TabBarView。因此，例如，在我的第一个标签中，我想要一个FloatingActionButton，但在第二个标签中，我想要将其隐藏。

因此，我的代码是：

class Notifications extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        backgroundColor: kPink,
        child: Icon(Icons.add),
        onPressed: () => print(Localizations.localeOf(context)),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: kBigSeparation),
          child: DefaultTabController(
            length: 2,
            initialIndex: 0,
            child: Padding(
              padding: kPaddingTabBar,
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(kTinySeparation),
                    decoration: BoxDecoration(
                      color: kLightGrey,
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                    ),
                    child: TabBar(
                      tabs: <Tab>[
                        Tab(
                          text: AppLocalizations.of(context)
                              .translate('messages'),
                        ),
                        Tab(
                          text: AppLocalizations.of(context)
                              .translate('notifications'),
                        )
                      ],
                      unselectedLabelColor: Colors.black54,
                      labelColor: Colors.black,
                      unselectedLabelStyle: kBoldText,
                      labelStyle: kBoldText,
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicator: BoxDecoration(
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(height: kMediumSeparation),
                  Expanded(
                    child: TabBarView(children: [
                      MessagesTab(),
                      NotificationsTab(),
                    ]),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码步骤1：您需要使用TabController步骤2：根据floatingActionButton显示/隐藏tabIndex代码段

TabBar(
                controller: _tabController,
                tabs: <Tab>[

...

    floatingActionButton: _tabController.index == 0
          ? FloatingActionButton(
              backgroundColor: Colors.pink,
              child: Icon(Icons.add),
              onPressed: () => print(Localizations.localeOf(context)),
            )
          : Container(),

工作演示

完整代码

import 'package:flutter/material.dart';

class Notifications extends StatefulWidget {
  @override
  _NotificationsState createState() => _NotificationsState();
}

class _NotificationsState extends State<Notifications>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this, initialIndex: 0);
    _tabController.addListener(_switchTabIndex);
  }

  void _switchTabIndex() {
    print(_tabController.index);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: _tabController.index == 0
          ? FloatingActionButton(
              backgroundColor: Colors.pink,
              child: Icon(Icons.add),
              onPressed: () => print(Localizations.localeOf(context)),
            )
          : Container(),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 2.0),
          child: Padding(
            padding: EdgeInsets.all(1.0),
            child: Column(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(
                      Radius.circular(50),
                    ),
                  ),
                  child: TabBar(
                    controller: _tabController,
                    tabs: <Tab>[
                      Tab(
                        text: 'messages',
                      ),
                      Tab(
                        text: 'notifications',
                      )
                    ],
                    unselectedLabelColor: Colors.black54,
                    labelColor: Colors.black,
                    //unselectedLabelStyle: kBoldText,
                    //labelStyle: kBoldText,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicator: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(50),
                      color: Colors.white,
                    ),
                  ),
                ),
                const SizedBox(height: 10),
                Expanded(
                  child: TabBarView(controller: _tabController, children: [
                    MessagesTab(),
                    NotificationsTab(),
                  ]),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MessagesTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("MessagesTab");
  }
}

class NotificationsTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("NotificationsTab");
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Notifications(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}