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

Question

我正在尝试在 TabBar 中获得一个不同的浮动按钮。但是我会尝试很多选择，但我不知道如何。

抱歉，我添加更多详细信息： 我想用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,
        ),
      ),
    );
  }
}

Answer 1

您可以通过TabController 实现此目的

声明： TabController _tabController;

初始化：在initState()

_tabController = TabController(length: 2, vsync: this, initialIndex: 0);
_tabController.addListener(_handleTabChange);

只需在方法_handleTabChange 中传递setState((){}) 以反映准时类似

_handleTabChange(){
  setState((){});    
}

现在 Bind 或 Inject 在其控制器属性中的小部件 TabBar 和 TabBarView 中。

TabBarView(
  controller: _tabController,
  children: [
    Widget(),
    Widget()
  ],
),

TabBar(
  controller: _tabController,
  tabs:[
    Tab(...),
    Tab(...),
  ]
)

现在根据_tabController索引将你不同的FAB按钮放置到不同的Tabs

floatingActionButton: _tabController.index == 0
 ? FloatingActionButton(
  backgroundColor: Colors.blue,
  onPressed: () {},
 )
 : FloatingActionButton(
  backgroundColor: Colors.red,
  onPressed: () {},
 ),

继续编码 ;)

Answer 2

检查一下

import 'package:flutter/material.dart';

class Lista extends StatefulWidget {

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

class _ListaState extends State<Lista> {
  int indexTab=0;

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Scaffold(
          appBar: AppBar (
            title: Text("Test"),
            bottom: TabBar(
              onTap: (index){
                setState(() {
                  indexTab = index;
                });
              },
              tabs: <Widget>[
                Tab(icon: Icon(Icons.calendar_today)),
                Tab(icon: Icon(Icons.whatshot)),
              ],
            ),
          ),
          floatingActionButton: indexTab==0? FloatingActionButton (
            onPressed: () {},
            child: Icon(Icons.add),
          ):FloatingActionButton (
            onPressed: () {},
            child: Text('test'),
          ),
          body: TabBarView(
            children: <Widget>[
              Text('1'),
              Text('2'),
            ],
          )
      ),
    );
  }
}

Answer 3

你想要的一个最小的例子：

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

Answer 4

您可以使用此代码：

floatingActionButton: new Container(
      height: 140.0,
      child: new Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomRight,
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Container(
                  height: 60.0,
                  child: new FloatingActionButton(
                    onPressed: _incrementCounter,
                    tooltip: 'Increment',
                    child: new Icon(Icons.add),
                  ),
                ),
                new Container(
                  height: 20.0,
                ), // a space
                Container(
                  height: 60.0,
                  child: new FloatingActionButton(
                    onPressed: _decremenrCounter,
                    backgroundColor: Colors.red,
                    tooltip: 'Increment',
                    child: new Icon(Icons.remove),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    ) 

截图：

如果需要，这里是所有代码：main.dart

    import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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


  final String title;

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

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

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  void _decremenrCounter() {
    setState(() {

      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: new AppBar(

          title: new Text(widget.title),
        ),
        body: new Center(

          child: new Column(

            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'You have pushed the button this many times:',
              ),
              new Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        floatingActionButton: new Container(
          height: 140.0,
          child: new Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.bottomRight,
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(
                      height: 60.0,
                      child: new FloatingActionButton(
                        onPressed: _incrementCounter,
                        tooltip: 'Increment',
                        child: new Icon(Icons.add),
                      ),
                    ),
                    new Container(
                      height: 20.0,
                    ), // a space
                    Container(
                      height: 60.0,
                      child: new FloatingActionButton(
                        onPressed: _decremenrCounter,
                        backgroundColor: Colors.red,
                        tooltip: 'Increment',
                        child: new Icon(Icons.remove),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}