Flutter-TabBar中的其他浮动操作按钮

mreig 发表于 Dev

布列塔尼

我正在尝试在TabBarin flutter中获得另一个浮动按钮。但是我会尝试很多选择，但是我不知道怎么做。

抱歉，我添加了更多详细信息：我想使用制作一个应用，TabBar例如下面的例子。如果您看到这是一个tabBarDemo应用程序，则可以在选项卡之间进行切换，但是我不知道如何更改选项卡之间的浮动按钮。谢谢

像这样的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,
        ),
      ),
    );
  }
}

Anmol.majhail

所需内容的最小示例：

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,
            ),
          );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。