Flutter - TabBar 中不同的浮动操作按钮

2023-11-26

我正在尝试在一个不同的浮动按钮TabBar扑腾中。但我会尝试很多选择,但我不知道如何做。

抱歉,我添加更多详细信息: 我想做一个应用程序TabBar,就像这个颤振示例一样。 如果您看到这是一个tabBarDemo应用程序,我可以在选项卡之间进行更改, 但我不知道如何更改选项卡之间的浮动按钮。谢谢

就像这个动图: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,
            ),
          );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter - TabBar 中不同的浮动操作按钮 的相关文章

随机推荐