非常感谢，

对不起，我添加了更多详细信息：我想制作一个带有标签栏的应用，例如下面的例子。如果您看到这是一个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,
        ),
      ),
    );
  }
}

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

所需内容的最小示例：

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 2

您可以使用以下代码：

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

Answer 3

检查

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 4

您可以通过TabController

声明： TabController _tabController;

初始化：在initState()

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

并在方法 setState((){}) 中传递 _handleTabChange 以反映准时，如

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

现在绑定或注入在其控制器属性中的小部件TabBar和TabBarView中。

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

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

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

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

继续编码;)

Flutter-标签栏中的其他浮动操作按钮

非常感谢，

4 个答案: