Flutter-TabBar中的其他浮动操作按钮 [英] Flutter - Different floating action button in TabBar

问题描述

我试图在TabBar的颤动中获得一个不同的浮动按钮.但是我会尝试很多选择，但是我不知道怎么做.

I'm trying to get a different floatting button in a TabBar in flutter. But I will try a lot of option, but I don't know how.

对不起，我添加了更多详细信息: 我想用TabBar编写一个应用程序，例如下面的例子. 如果您看到这是一个tabBarDemo应用程序，则可以在两个标签之间进行切换， 但我不知道如何更改选项卡之间的浮动按钮.谢谢

Sorry, I add more details: I want to do a app with a TabBar, like this flutter example. If you see this is a tabBarDemo application, I can change between tabs, but I don't know how to change the floating button between tabs. Thanks

喜欢这个gif: https://i.stack.imgur.com/bxtN4.gif

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),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended
            (onPressed: null,
            icon: Icon(Icons.add, color: Colors.white,),
            label: new Text('FLOATING TO CHANGE'),
            ),
          floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat,
        ),
      ),
    );
  }
}

推荐答案

所需内容的最小示例:

class TabsDemo extends StatefulWidget {

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

class _TabsDemoState extends State<TabsDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.removeListener(_handleTabIndex);
    _tabController.dispose();
    super.dispose();
  }

  void _handleTabIndex() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Demo'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(
                text: "Tab1",
              ),
              Tab(
                text: "Tab2",
              ),
            ],
          ),
        ), //   floatingActionButton: _buildFloatingActionButton(context),
        body: TabBarView(controller: _tabController, children: [
          Center(
            child: Container(
              child: Text('Tab 1'),
            ),
          ),
          Center(
            child: Container(
              child: Text('Tab 2'),
            ),
          ),
        ]),
        floatingActionButton: _bottomButtons(),
      ),
    );


}



Widget _bottomButtons() {
    return _tabController.index == 0
        ? FloatingActionButton(
            shape: StadiumBorder(),
            onPressed: null,
            backgroundColor: Colors.redAccent,
            child: Icon(
              Icons.message,
              size: 20.0,
            ))
        : FloatingActionButton(
            shape: StadiumBorder(),
            onPressed: null,
            backgroundColor: Colors.redAccent,
            child: Icon(
              Icons.edit,
              size: 20.0,
            ),
          );
  }
}

这篇关于Flutter-TabBar中的其他浮动操作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！